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

【问题标题】：Javascript: How to replace all matching strings by html codeJavascript：如何用 html 代码替换所有匹配的字符串
【发布时间】：2019-06-16 14:29:02
【问题描述】：

这是我当前的代码：

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.

那么，我该怎么办？谢谢大家。

【问题讨论】：

你能澄清一下你想要做什么吗？请编辑您的问题。

标签： javascript regex highlight replaceall

【解决方案1】：

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

在下一种方法中，我使用了replace() 方法的function as second parameter (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);
}

【讨论】：