rafaelcpalmeida rafaelcpalmeida - 8 months ago 55
Javascript Question

Manipulate text node innerHTML using replace

I'm developing a Google Chrome extension that allows you to automatically apply a highlighting CSS rule to a word that you choose.

I have the following code

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

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.nodeValue;

var fetchedText = text.match(/teste/gi);

if(fetchedText) {
var replacedText = element.innerHTML.replace(/(teste)/gi, "<span style=\"background-color: yellow\">$1</span>");

if (replacedText !== text) {
element.innerHTML = replacedText;

Which breaks and freezes my Chrome tab. However, if I switch from
element.innerHTML = replacedText;
element.innerHTML = "text";
this works.

I can't seem to find what's wrong with the following code.

Answer Source

The error I was experiencing was due to a recursive loop because, for instance, I was looking for the keyword teste and I was inserting a new element with the content <span style=\"background-color: #ffff00\">teste</span> which would force the script to try to replace the new keyword teste again and so on.

I came up with this function:

function applyReplacementRule(node) {
    // Ignore any node whose tag is banned
    if (!node || $.inArray(node.tagName, hwBannedTags) !== -1) { return; }

    try {
        $(node).contents().each(function (i, v) {
            // Ignore any child node that has been replaced already or doesn't contain text
            if (v.isReplaced || v.nodeType !== Node.TEXT_NODE) { return; }

            // Apply each replacement in order
            hwReplacements.then(function (replacements) {
                replacements.words.forEach(function (replacement) {
                    //if( !replacement.active ) return;
                    var matchedText = v.textContent.match(new RegExp(replacement, "i"));

                    if (matchedText) {
                        // Use `` instead of '' or "" if you want to use ${variable} inside a string
                        // For more information visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
                        var replacedText = node.innerHTML.replace(new RegExp(`(${replacement})`, "i"), "<span style=\"background-color: #ffff00\">$1</span>");

                        node.innerHTML = replacedText;
            }).catch(function (reason) {
                console.log("Handle rejected promise (" + reason + ") here.");

            v.isReplaced = true;
    } catch (err) {
        // Basically this means that an iframe had a cross-domain source
        if (err.name !== "SecurityError")
        { throw err; }

Where I modify the node property and "tell" that I've already modify that node so I don't end up on a recursive infinite loop again.

P.S. As you can see this solution uses jQuery. I'll try to rewrite this to use just Vanilla JS.