纯Javascript-查找/替换DOM中的单词列表

Question

I have a list of words and I want to replace them in DOM.

The replace is working but it has an issue. Before and after the replaced text, it puts an undesired slash bar (ie reduced to a brigade > reduced/ OTHER WORD 1 /a brigade)

Also, I need to wrap the replaced word with an html tag, like . (ie reduced to a brigade > reduced OTHER WORD 1 a brigade)

You can see the code here: https://jsfiddle.net/realgrillo/9uL6ofge/

var elements = document.getElementsByTagName('*');

var words = [

    [/(^|\s)([Tt]o)(\s|$)/ig, 'OTHER WORD 1'],
    [/(^|\s)([Aa]nd)(\s|$)/ig, 'OTHER WORD 2']

];

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {

        var node = element.childNodes[j];

        if (node.nodeType === 3) {

            var text = node.data;

            for (var k = 0; k < words.length; k++)
            {
                var from = new RegExp(words[k][0]);
                var to = new RegExp('$1' + words[k][1] + '$3');
                var replacedText = text.replace(from, to);

                //console.log("from: " + from);
                //console.log("to: " + to);
                //console.log("toDo: " + toDo);

                if (replacedText !== text)
                {
                    element.innerHTML = element.textContent.replace(from, to);
                    console.log("text: " + text);
                    console.log("replacedText: " + replacedText);
                }
            }

            /*
            //
            //!!!!THIS CODE FOR 1 WORD WORKS!!!! I need to do this for the list of words.
            //
            var replacedText = text.replace(/(^|\s)([Tt]o)(\s|$)/ig, '$1OTHER WORD$3');

            if (replacedText !== text) {

                element.innerHTML = element.textContent.replace(/(^|\s)([Tt]o)(\s|$)/ig, '$1<b class=modified>OTHER WORD</b>$3');
            }
            */
        }
    }
}

Masters of JS, can you help me? Pure javascript, not jQuery please.

Thanks.

Answer 1

I can give you some much more simple function to use. First define a function for replacing words like this:

String.prototype.replaceAll = function (search, replacement) {
            try {
                var target = this;
                return target.split(search).join(replacement);
            } catch (e) {
                return "";
            }
        };

That's why the pure javascript replace function only replace one time in a whole case. After that you can use it in your code like here:

var replacedText = text.replaceAll(/(^|\s)([Tt]o)(\s|$)/ig, '$1OTHER WORD$3');

Answer 2

You don't need to parse words[k][0] into a RegExp as it is already one, even though it won't break because the constructor will handle a RegExp well.

Also for the words[k][1] , you don't need to parse it into a RegExp either because the second parameter of String.prototype.replace is expected to be a plain string. The slashes are there because you cast your RegExp to a string (and will end up output).

So this is a change that will fix it:

var to = '$1' + words[k][1] + '$3';

And this is optional but probably a good practice:

var from = words[k][0];

For getting an html tag, you can either change it directly in each words[k][1] or in the to var declaration, depending on what you want.

---

Extra:

In the for loop, the code assumes that there are always at least three groups (because of the '$3' reference), an alternative could be to delegate this replacement directly in words[k][1] , but it is up to you to decide.