JS replace only text without html tags and codes

Question

I want to replace some words of the document without changing any html tags or js codes.

Basically what I do is;

document.body.innerHTML = document.body.innerHTML.replace('lorem','new lorem');

But this code will replace any 'lorem'. I want to avoid tags like; <script... var lorem = 123; <div class="lorem", <a id="lorem" etc.

How can I do this in JS?

I Hate Lazy · Accepted Answer · 2012-10-17 13:56:13Z

5

Walk the DOM, and .replace() the values of text nodes.

function walk(el, fn) {
    for (var i = 0, len = el.childNodes.length; i < len; i++) {
        var node = el.childNodes[i];
        if (node.nodeType === 3)
            fn(node);
        else if (node.nodeType === 1 && node.nodeName !== "SCRIPT")
            walk(node, fn);
    }
}

walk(document.body, function(node) {
    var text = node.data.split("foo"),
        parent = node.parentNode,
        i = 1,
        newNode;

    parent.insertBefore(textNode(text[0]), node);

    for (; i < text.length; i += 2) {
        (newNode = document.createElement("b"))
                           .appendChild(textNode("bar"));
        parent.insertBefore(newNode, node);
        parent.insertBefore(textNode(text[i]), node);
    }
    parent.removeChild(node);
});

function textNode(txt) {
    return document.createTextNode(txt);
}

edited Oct 17, 2012 at 13:56

answered Oct 16, 2012 at 16:21

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

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

9 Comments

kent ilyuk Over a year ago

Thank you. It works great. There is only one thing, I can't work html tags with replace. I want to do replace(/foo/g, "<b>bar</b>"); but it doesn't affect because of node.data

I Hate Lazy Over a year ago

@kentilyuk: I thought you didn't want to replace any elements. The DOM is not a string, so no, that won't work. What do you actually need to do?

kent ilyuk Over a year ago

I want to find 'foo' and change it with or without html tags like 'bar', '<b>bar</b>', '<span class="cname">bar</span>', '<a href="#">bar</a>' etc.

I Hate Lazy Over a year ago

@kentilyuk: So you're saying you want to wrap the matched text in an element? Again, the DOM is not a string. We won't be using HTML markup to accomplish this.

kent ilyuk Over a year ago

Yes. That's what I try to do.

|

user1691388 · Accepted Answer · 2012-10-16 17:23:35Z

0

Another way of doing this is using regular expressions, science you can't insert HTML tags to a text node.

First I am using a regular expressions to catch parts of the body.innerHTML property that are outside of the HTML tags.

But, the string contains also another data, and if I will directly replace it with thge new data some text will be lost.

Insted, I get each match as an argument for a function, and inside this function I use another regular expression.

Notice that you have to replace "foo" twice.

The code:

document.body.innerHTML=document.body.innerHTML.replace(/<[^(script)][^>]*>[^<]*(foo)[^<]*</g,function(match){ return match.replace(/foo/,"newWord"); });

edited Oct 16, 2012 at 17:23

answered Oct 16, 2012 at 17:02

user1691388

1381 silver badge7 bronze badges

1 Comment

kent ilyuk Over a year ago

This code changes not only text but also js codes. I have <script tag in body. And it turned like this; <script type="text/javascript"> var <b>bar</b> = '';

Collectives™ on Stack Overflow

JS replace only text without html tags and codes

2 Answers 2

9 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related