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 数组并一次进行一个替换。因此，当您将 F 替换为 "<span class='_p-filter-matched'>" + kw + "</span>" 时，您将在下一个过滤器 p 将要替换的字符串中添加多个 p 字符。

在下一种方法中，我使用 function as second parameter (function(replacement)) of the replace() 方法在一次拍摄中完成所有替换，同时使用一个正则表达式来查找所有过滤器（例如：正则表达式 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);
}

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

Javascript: How to replace all matching strings by html code

javascript

regex

highlight

replaceall