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(replacement)) метода 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);
}