Javascript：如何用html代码替换所有匹配的字符串

Question

这是我当前的代码：

var filter = ['F', 'p'];
var table_data = ['F1', 'F-BAPP', 'ABC'];

table_data.forEach(function(d)
{
    var final_value = addClass(d, filter);
    console.log(final_value);
});

function addClass(text, filters)
{
    if (filters === '')
    {
        return text;
    }

    String.prototype.replaceAll = function(FindText, RepText)
    {
        regExp = new RegExp(FindText, "gi");
        return this.replace(regExp, RepText);
    };

    filters.forEach(function(kw)
    {
        text = (text + "").replaceAll(kw, "<span class='_p-filter-matched'>" + kw + "</span>");
    });

    return text;
}

我希望final_value的输出是这样的 ：

<span class='_p-filter-matched'>F</span>1
<span class='_p-filter-matched'>F</span>-BA<span class='_p-filter-matched'>P</span><span class='_p-filter-matched'>P</span>

但是有两个问题 ：

 1. <span> becomes <s<span class='_p-filter-matched'>p</span>an.

 2. F-BAPP becomes f-BApp. 

所以我该怎么做？ 谢谢你们。

Answer 1

您的主要问题是因为您要遍历filter阵列并一次更换一次。 因此，当您用"<span class='_p-filter-matched'>" + kw + "</span>"替换F时，您将在字符串上添加多个p字符，下一个过滤器p将要替换。

在下一种方法中，我将函数用作 replace（）方法的第二个参数 （ function(replacement) ），使用正则表达式查找所有滤镜（例如：表达式F|p ）。

做法：

 var filter = ['F', 'p']; var table_data = ['F1', 'F-BAPP', 'ABC']; table_data.forEach(function(d) { var final_value = addClass(d, filter); console.log(final_value); }); function addClass(text, filters) { if (!filters.length) return text; String.prototype.replaceAll = function(filters, RepText, token) { regExp = new RegExp(filters.join("|"), "gi"); return this.replace(regExp, (match) => { return RepText.replace(token, match); }); }; let repText = "<span class='_p-filter-matched'>*filter*</span>"; let token = "*filter*"; return text.replaceAll(filters, repText, token); }