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。如果为真，插件将只匹配完全匹配，而不是部分匹配。例如，如果为 false，hello则匹配字符串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

为了突出整行：

$("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 回答
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 回答