Javascript: How to replace all matching strings by html code

Question

Here is my current code:

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;
}

I want the final_value's output to be like this:

<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>

But there are two questions:

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

 2. F-BAPP becomes f-BApp.

So, what should I do? Thank you all.

Can you please clarify what you're even trying to do? Please edit your question. — Person
– Person, Commented Jan 23, 2019 at 3:56

Shidersz · Accepted Answer · 2019-01-23 04:32:48Z

Your main problem is because you are iterating over the filter array and do a replacement one a time. So when you replace F by "<span class='_p-filter-matched'>" + kw + "</span>" you are adding multiple p characters on the string that the next filter p will going to replace.

On the next approach, I have used the function as second parameter (function(replacement)) of the replace() method to do all the replacements on one shot using also a regular expression that will look for all the filters (example: the regular expression F|p).

Approach:

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);
}

Collectives™ on Stack Overflow

Javascript: How to replace all matching strings by html code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related