Insert <span> tag using javascript replace

Question

Is it possible to use javascripts replace function to insert a span tag to an html page?

I've seen examples of scripts that can change a word in an html file using something along the lines of:

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 replacedText = text.replace(/originalword/gi, 'Different Words');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

However, when I try to add a span tag and change the font color of the original or new word it just shows up with the span tag as text.

    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 replacedText = text.replace(/originalword/gi, '<span style="color:blue;"> originalword </span>');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

Is it not possible to insert the span tag like this? Or am I just doing something wrong?

Can you please share the input html and target html in question body? — Ritesh Singh Rajput
– Ritesh Singh Rajput, Commented Apr 2, 2019 at 5:59

Sami Ahmed Siddiqui · Accepted Answer · 2019-04-02 06:48:27Z

2

createTextNode: Creates a new Text node. This method can be used to escape HTML characters that's the reason your span is visible in the HTML rather doing the job as HTML.

Instead you can replace the text by using innerHTML as shown below.

var elements = document.getElementsByTagName('div');
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 replacedText = text.replace(/originalword/gi, '<span style="color:blue;"> originalword </span>');

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

<div>This is an example text which is used to check the replace functionality of JS. It will replace originalword with span tag.</div>

edited Apr 2, 2019 at 6:48

answered Apr 2, 2019 at 6:29

Sami Ahmed Siddiqui

2,3861 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kamil Kiełczewski · Accepted Answer · 2019-04-02 06:06:34Z

0

yes it is possible

t.innerHTML = t.innerHTML.replace(/(orgword)/gi,"<span class='em'>$1</span>");

.em { color: red; }

<div id="t">Some text orgword foo bar ORGword buzz</div>

edited Apr 2, 2019 at 6:06

answered Apr 2, 2019 at 5:55

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Collectives™ on Stack Overflow

Insert <span> tag using javascript replace

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related