Home/ Questions/Q 9157491
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T13:01:48+00:00

I m new to javascript and would be great if you could help me

  • 0

I m new to javascript and would be great if you could help me with this issue I m facing.
In the HTML code below, I m trying to highlight a particular word(say “message”)by replacing the word by appending to 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 id, and hence no getElementById can be used to extract the text).

So I got the entire body element and extracted the text by using textContent.(this gave me the text and ignored the image that is above the text in the html.)
Then after highlighting the word I set the ‘body’s textContent back to the new String.

The problem is that now I m not able to preserve the image that was above the text, and the new body has only the value of the textContent in it, and the image is lost. This is the JS I used(but now I m replacing 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 any other way to replace text that is placed directly under the body, which has other elements too?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In order to do something like this, you would need to loop through all text nodes in the document, search for the word, and wrap it.

    Something like this:

    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));
            }
        }
    }
}

    That should do it. To use, just call highlight("message"), with whatever text you want. Note that this will be case-sensitive – if you need caseless matching, 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");)

    Also, you can limit the search to a particular element. Let’s say you have <div id="replace-me">, you can limit the search to that element like so:

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

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

    • 0