Clever Geek Handbook

Replacing text in <body>

I am new to javascript and it would be great if you could help me with this problem I am facing. In the HTML code below, I am trying to highlight a specific word (like "message") by replacing that word, adding it to make it bold.

<body>
  <img src="http://some.web.site/image.jpg" title="abcd" />
  This is a test message.
</body>

The string "This is a test message" is found directly in the body element (so there is no identifier, and hence getElementById cannot be used to retrieve text).

So, I got the whole body element and extracted the text using textContent (this gave me the text and ignored the image that is above the text in the html.) Then, highlighting the word, I put "body textContent" back on a new line.

The problem is that now I cannot save the image that was above the text and the new body only has the textContent value in it and the image is lost. This is the JS I used (but now I replace the message with the word phone).

<script>
function myFunction(){
  var x = document.getElementsByTagName('body')[0].textContent;
  var v = x.replace("message","phone");
  document.getElementsByTagName('body')[0].textContent = v;
} 
</script>

Is there another way to replace the text that is placed directly below the body, which has other elements as well?

0


source to share


3 answers


To do something like this, you would have to loop through all the text nodes in the document, find the word, and wrap it.

Something like that:

function highlight(str,node) {
    if( !node) node = document.body;
    var c = node.children, l = c.length, i, p;
    for( i=0; i<l; i++) {
        if( c[i].nodeType == 1) highlight(str,c[i]);
        if( c[i].nodeType == 3) {
            if( (p=c[i].data.indexOf(str)) > -1) {
                c[i].splitText(p);
                c[i].nextSibling.deleteData(0,str.length);
                c[i].parentNode.insertBefore(
                    document.createElement('b'),c[i].nextSibling
                ).appendChild(document.createTextNode(str));
            }
        }
    }
}

This should do it. To use, just call highlight("message")

, with whatever text you want. Note that this will be case sensitive - if you require a match without content, let me know and I'll edit to take that into account (although for the most part you could probably get away with highlight("message"); highlight("Message");

)



In addition, you can restrict your search to a specific item. Let's say you have <div id="replace-me">

, you can limit your search to such an element like this:

highlight("message",document.getElementById('replace-me'));

(You can use any way to get node, this is the easiest one)

+2


source


The textContent property sets or returns the text content of the specified node and all of its descendants.

If you set the textContent patronage, all child nodes are removed and replaced with a single text node containing the specified string.



refer to here

0


source


Try

var children = document.body.childNodes;
for(var len = children.length, child=0; child<len; child++){
    if (children[child].nodeType === 3){ // textnode
        var contents = children[child].nodeValue;
       children[child].nodeValue = contents.replace(/message/gi, 'phone');
    }
}
0


source






More articles:


All Articles