Find and Replace only Whole word in HTML using JavaScript?

Question

I want to replace all the occurrences of a particular word in the web page using javascript.

Sample Sentence = "Hi Guys, I have a lot of things. The things are good. They are beautiful-things. Look at /home/things.html"

I am using

document.body.innerHTML = 
document.body.innerHTML.replace(/\bthings\b/g, function (x) {
return 'OBJECTS';
});

But this replaced like this

Hi Guys, I have a lot of OBJECTS. The OBJECTS are good. They are beautiful-OBJECTS. Look at /home/OBJECTS.html

I want to replace only whole words. Not (beautiful-things), (/home/things.html) should not be replaced. I want to replace only (things).

You better hope things doesn't appear in the HTML parts (eg. class names)... — Niet the Dark Absol
– Niet the Dark Absol, Commented Jul 19, 2020 at 7:31
You can use a Treewalker to traverse all textNodes and find the text to change, depending if your target node has children or not. if not, you can simply use innerHTML — vsync
– vsync, Commented Jul 19, 2020 at 7:34

Ritesh Khandekar · Accepted Answer · 2020-07-19 07:46:35Z

1

Try this:

document.body.innerHTML = 
document.body.innerHTML.replace(/\sthings\b/g,' OBJECTS');

Hi Guys, I have a lot of things. The things are good. They are beautiful-things. Look at /home/things.html

answered Jul 19, 2020 at 7:46

Ritesh Khandekar

4,0153 gold badges17 silver badges31 bronze badges

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

Comments

alotropico · Accepted Answer · 2020-07-19 08:23:02Z

0

Ritesh answer will work fine most of the time, but it won't when the word you want to replace is the first one in the text (unless you put an extra white space before it, which you probably don't want to).

document.body.innerHTML = 
document.body.innerHTML.replace(/(^|\s)things\b/gi, m => m.replace(/things/i, 'OBJECTS'));

Things. Hi Guys, I have a lot of things. The things are good. They are beautiful-things. Look at /home/things.html

answered Jul 19, 2020 at 8:23

alotropico

1,9943 gold badges17 silver badges25 bronze badges

Collectives™ on Stack Overflow

Find and Replace only Whole word in HTML using JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related