javascript - 查找字母数字字符、文本并替换为 HTML

Question

我正在尝试查找并替换 HTML 中的文本。并在文本周围添加粗体元素。

例如，假设我有以下文本:

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

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

<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