查找字母数字字符，文本并替换为HTML

Question

我试图查找并替换HTML中的文本。并在文本周围添加一个大胆的元素。

例如，可以说我有以下文字：

<div>This is a test content and I'm trying to write testimonial of an user.</div> 

如果用户搜索我的HTML字符串“测试”，我需要显示粗体所有包含有文本搜索文本。

<div>This is a <b>test</b> content and I'm trying to write <b>test</b>imonial of an user.</div> 

这是工作使用下面的代码：

$.fn.wrapInTag = function(opts) { 

var o = $.extend({ 
    words: [], 
    tag: '<strong>' 
}, opts); 

return this.each(function() { 
    var html = $(this).html(); 
    for (var i = 0, len = o.words.length; i < len; i++) { 
     var re = new RegExp(o.words[i], "gi"); 
     html = html.replace(re, o.tag + '$&' + o.tag.replace('<', '</')); 
    } 
    $(this).html(html); 
}); 
$('div').wrapInTag({ 
    tag: 'b', 
    words: ['test'] 
}); 

但是如果我搜索类似的JavaScript方法上面的失败： *测试或/测试 正则表达式不支持这里的。 网络上有多种方法，但它们都不适用于字母数字文本。

Answer 1

这是我会怎样执行文本高亮显示：

$("#search").keyup(function(){ 
    $("#text").html($("#text").html().replace("<b>", "").replace("</b>", "")); 
    var reg = new RegExp($(this).val().replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"),"g"); 
    $("#text").html($("#text").text().replace(reg, "<b>"+$("#search").val()+"</b>")); 
}); 

Here is the JSFiddle demo

Answer 2

您需要转义RegExp输入。见How to escape regular expression in javascript?

function escapeRegExp(string){ 
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"); 
}