1

テキストの html 段落がいくつかあります。.content 内のすべての段落を調べたいのですが、「Hello」または「hello」(または大文字と小文字のバリエーション) という単語が含まれている場合は、その単語のみを青色にしたいと考えています。「さようなら」も同じですが、赤くします。

4

6 に答える 6

2

そのために、highlight という jQuery プラグインを使用できます。

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

$('li').highlight('bla');

さまざまなスタイルで動作するようにわずかに変更されたバージョン。
http://jsfiddle.net/ReNvf/

于 2012-04-25T20:39:44.613 に答える
1

これを簡単にするプラグインがあります。ここにフィドルがあります: http://jsfiddle.net/NFDqe/8/

$(document).ready(function(){
    $("#content").highlightText("hello","hello",true);
    $("#content").highlightText("goodbye","goodbye",true);
});​

https://github.com/tentonaxe/jQuery-highlightText

更新
このプラグインに関するドキュメントは文字通り存在しないため、いくつか投稿する必要があると考えました。

$(selector).highlightText(string, class, onlyfullmatches)

string任意の文字列または正規表現にすることができます。文字列の場合、大文字と小文字は区別されません。つまり、hello は HeLlO と一致します。正規表現の場合は、そのまま使用されます。

class単一のクラスにすることも、スペースで区切ったクラスのリストにすることもできます。

onlyfullmatchesブール値である必要があり、デフォルトは false です。true の場合、プラグインは完全一致のみに一致し、部分一致には一致しません。たとえば、false の場合hello、string に一致しますhellow。

于 2012-04-25T20:40:13.940 に答える
1

各 p タグを反復処理し、テキストをチェックして、css を割り当てます。

jsFiddle( http://jsfiddle.net/fM7MP/26/ )

$('p').each( function(index)
{
    replaceWithColors( $(this) , "hello" , "blue" );
    replaceWithColors( $(this) , "goodbye" , "red" );
});

function replaceWithColors( object , word , color )
{
    var index = $(object).html().toLowerCase().indexOf( word );  

    if ( index > -1 )
    {
        var before = $(object).html().substring( 0 , index );
        var theWord = $(object).html().substring( index , index + word.length );
        var after = $(object).html().substring( index + word.length );

        $(object).html( before + "<span style='color:" + color + "'>" + theWord + "</span>" + after);
    }
}

</p>

于 2012-04-25T20:42:15.013 に答える
0

プラグインを必要とせずにこれを行うことができます：

$("p").each(function() {
    if ($(this).children().length == 0) {
        var txt = $(this).text();
        var blue = /hello/i.exec(txt);
        var red = /goodby/i.exec(txt);
        if (blue) {
            $(this).html(txt.replace(/hello/i, '<span class="blue">' + blue + '</span>'));
        } else if (red) {
            $(this).html(txt.replace(/goodbye/i, '<span class="red">' + red + '</span>'));
        }
    }
});

http://jsfiddle.net/99mg7/1/を参照してください

于 2012-04-25T21:04:09.577 に答える
0

このようなもの

$('p').each(function() {
    var html = $(this).html().replace(/L/gi, function(str) {
        var cls;
        if (str == str.toLowerCase()) {
            cls = 'blue';
        } else if (str == str.toUpperCase()) {              
            cls = 'red'; 
        }            
        return '<span class="' + cls + '">' + str + '</span>';
    });

    $(this).html(html);
});

デモ

于 2012-04-25T21:06:09.147 に答える
0

行全体を強調表示するには:

$("div:contains('hello')").css("color", "blue");

編集:質問が単語のみを強調表示するように変更されたため、たとえばここで答えを見つけることができます: jQuery で単語を強調表示する か、他の人が言及したプラグインを単に使用します。

編集: または単にそのように:

​$("div"​)​.each(function() {
    this.innerHTML = this.innerHTML.replace(/(hello)/g, "<span style='color: red'>$1</span>");
    this.innerHTML = this.innerHTML.replace(/(goodbye)/g, "<span style='color: blue'>$1</span>");
})​;​

無視して大文字と小文字を区別するには、/(hello)/ig正規表現を使用します。

于 2012-04-25T20:37:54.597 に答える