突出显示所有出现的字符串 - 不区分大小写答案

【问题标题】：Highlight all occurrences of string - case insensitive突出显示所有出现的字符串 - 不区分大小写
【发布时间】：2013-10-04 02:30:02
【问题描述】：

在这个page 上，我想在文本中搜索一个单词并突出显示所有出现的单词。例如，如果我寻找“前端”而不是希望突出显示所有出现的“前端”。使用下面的代码，我会突出显示它们，但出现的大写字符也会被替换。你能修这个吗？这是我的代码：

这使得 jQuery 包含不区分大小写

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

这是通过替换突出显示的代码

$('input[value="Zoeken"]').click(function(){
    $('.section').html(function (i, str) {
        yellowspan = new RegExp('<span style="background-color: #FFFF00">' ,"g"); 
        empty = "";
        return str.replace(yellowspan, empty);
    });

    $('.section').html(function (i, str) {
        endspan = new RegExp("</span>" ,"g"); 
        empty = "";
        return str.replace(endspan, empty);
    });

    var string = $('input[placeholder="Zoeken"]').val();                    
    $('.section:contains("' + string + '")').each(function(index, value){
        $(this).html(function (i, str) {
            simpletext = new RegExp(string,"gi"); 
            yellowtext = "<span style='background-color: #FFFF00'>" + string + "</span>";
            return str.replace(simpletext, yellowtext);
        });
    });
});

有问题的代码在最后一个html() 函数上

【问题讨论】：

你的代码有什么问题？您是否尝试过了解什么是行不通的？
我更改了 jQuery 包含的内容，以便查找字符串的所有出现，无论是大写还是小写。然后我寻找任何用于突出显示的跨度标签，并将它们删除。最后，我通过用搜索的字符串替换它们的文本来突出显示所有新出现的事件。但是正如我上面所说，这会将这些出现的大写字符替换为小写。

标签： javascript jquery string replace

【解决方案1】：

替换

simpletext = new RegExp(string,"gi"); 
yellowtext = "<span style='background-color: #FFFF00'>" + string + "</span>";
return str.replace(simpletext, yellowtext);

与

simpletext = new RegExp("(" + string + ")","gi"); 
return str.replace(simpletext, "<span style='background-color: #FFFF00'>$1</span>")

new Regexp() 中的额外括号捕获找到的值。 str.replace 中的 $1 插入捕获的值

【讨论】：