Search for a DOM element with specific text and change it

Question

I am trying to understand how to find an element with special text in raw javascript (without jQuery, etc.) and change this text.

My first incarnation of the solution ... less than adequate. What I did was basically:

var x = document.body.innerHTML; x.replace(/regular-expression/,"text"); document.body.innerHTML = x; 

I naively thought that I succeeded with flying flowers, especially since it was so simple. So, I added an image to my example and thought I could check every 5 seconds (because this line can dynamically enter the DOM) ... and the image flickers every 5 seconds.

Unfortunately.

So there must be a proper way to do this. A method that specifically selects a specific DOM element and updates the text part of this DOM element.

Now always look recursively for children until you find the “deepest child with a string” approach that I want to avoid. And even then I am skeptical that “changing innerHTML to something else” is the right way DOM element updates.

So what is the correct way to search the DOM for a string? And what is the right way to update the text of a DOM element?

Answer 1

Now always “recursively browse children until you find the“ deepest child with a string ”approach that I want to avoid.

I want to find an item in an unordered random list. Now "go through all the elements until you find what you are looking for," which I want to avoid.

Macro cassette of the old time, recording, listening, meditation.

Btw, see Find and Replace Text with JavaScript on James Padolsey's Blog

Answer 2

Don't use innerHTML with a regex, it almost certainly fails for non-trivial content. In addition, there are still differences in how browsers generate it from the live DOM. Replacing innerHTML will also remove all event listeners added as properties of the element (e.g. element.onclick = fn ).

It is best if you can have a string enclosed in an element with an attribute or property that you can search for (id, class, etc.), but searching for text nodes is the best approach.

Edit

Trying to use the general-purpose text highlighting function for an HTML document can lead to a very complex algorithm, because the string can be part of a complex structure, for example:

 <h1>Some <span class="foo"><em>s</em>pecial</span> heading</h1> 

Finding the string "special heading" is difficult because it is divided into 2 elements. Wrapping it with another element (for example, for highlighting) is also not trivial, since the resulting DOM structure must be valid. For example, text matching “some special” in the above may be wrapped in a span, but not a div.

Any such function should be accompanied by documentation indicating its limitations and the most appropriate use.

Answer 3

Forget regular expressions.

Iterate over each text node (and it will be the most elegant recursively) and change the text nodes if the text is found. If you are just looking for a string, you can use indexOf() .

Answer 4

Edit: Changed querySelectorAll for getElementsByTagName from the RobG clause.

You can use the getElementsByTagName function to capture all the tags on the page. From there, you can check your children and see if they have text nodes as children. If they do, then you look at their text and see if it matches what you need. Here is an example that prints the text of each Node text in a document using a console object:

 var elms = document.getElementsByTagName("*"), len = elms.length; for(var ii = 0; ii < len; ii++) { var myChildred = elms[ii].childNodes; len2 = myChildred.length; for (var jj = 0; jj < len2; jj++) { if(myChildred[jj].nodeType === 3) { console.log(myChildred[jj].nodeValue); // example on update a text node value myChildred[jj].nodeValue = myChildred[jj].nodeValue.replace(/test/,"123"); } } } 

To update the text of a DOM element, simply update the nodeValue property in the Node text.

Answer 5

 x.replace(/regular-expression/,"text"); 

will return a value, therefore

 var y = x.replace(/regular-expression/,"text"); 

Now you can assign a new value.

 document.body.innerHTML = y; 

You want to think about it, you don’t want the whole body to just change one small piece of code, why not get the contents of a div or any element, etc.

Example:

 <p id='paragraph'> ... some text here ... </p> 

now you can use javascript

 var para = document.getElementById('paragraph').innerHTML; var newPara = para.replace(/regex/,'new content'); para.innerHTML = newPara; 

This should be the easiest way.