Question

我正在尝试使用Jquery构建字符串搜索。我的页面包含包含文本的段落标记的数量。我的代码如下：

$("#search_button").click(function(event){
var keyword = $("#searchkeyword").val();
var paras = $("p:contains('" + keyword + "')").each(function(){
$(this).html(
$(this).html().replace( keyword ,'<span style=color:red>  "' + keyword + '" </span>')
);
});
$('#search_results').html(paras);
event.preventDefault();
});

搜索工作正常。我遇到了html.replace（）的问题，它只替换了确切的大小写匹配单词。假设我搜索单词“apple”，html.replace（）将仅替换字符串，如果文本包含单词“apple”但如果我搜索“Apple”，搜索仍然有效但在那种情况下html.replace（）不起作用，因为字符串包含单词“apple”而不是“Apple”。如何在我的代码中删除html.repalce的区分大小写？

Answer 1

使用正则表达式很容易，请尝试更改此行：

$(this).html().replace( keyword ,'<span style=color:red>  "' + keyword + '" </span>')

这个：

$(this).html().replace( new RegExp(keyword, "ig") ,'<span style=color:red>  "' + keyword + '" </span>')

在RegExp中，“i”参数将执行操作，如果在$（this）.html（）

Answer 2

$("#search_button").on('click', function(e){
    e.preventDefault();

    var keyword = $("#searchkeyword").val().toLowerCase(),
        paras   = $('p').filter(function() {
                     return $(this).text().toLowerCase().indexOf(keyword) != -1;
        }).html(function(_, html) {
            var reg = new RegExp('(' + keyword + ')', 'gi');
            return html.replace(reg, "<span class='red'>$1</span>");
        });

    $('#search_results').html(paras);
});

FIDDLE

请注意，您正在将段落移动（不是复制）到#search_result元素中，并且在下一次搜索时会覆盖它们，并且它们不会神奇地返回，它们就会消失！

Answer 3

老问题但更好的答案是：

$(this).html().replace( new RegExp('('+keyword+')', 'ig') ,'<span style="color:red"> $1 </span>' )

当前的最佳答案会将大写字母更改为小写字母。新Regexp（）中的额外括号将存储找到的值。 .replace（）中的$ 1插入存储的值，因此字符大小写将保持一致。

Answer 4

您可能想要的是使用不区分大小写的替换，如下所示：

msg = 'This is a Case Sensitive message';
msg.replace(/case/gi, "case");
"This is a case Sensitive message"

更多信息：http://www.w3schools.com/jsref/jsref_replace.asp

Answer 5

您可以使用正则表达式。不过，我不擅长构建regExps。检查this，这可能会有所帮助。

顺便说一下，方法“replace”是javascript原生的，而不是jquery

jquery .html（）取代区分大小写

5 个答案: