Home/ Questions/Q 9163691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:30:23+00:00

This code is attempting to highlight (by adding ‘bold’ tag) some characters that are

  • 0

This code is attempting to highlight (by adding ‘bold’ tag) some characters that are in the HTML body. (These are specified in the JS function)
But instead of the text becoming bold, I get the ‘bold’ tag as the result in the html page that is getting rendered.

While I want some thing like

This is a test message

I get

This is a test <b>message</>

Any help would be awesome.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>

<script>

function myFunction(){
        var children = document.body.childNodes;
    for(var len = children.length, child=0; child<len; child++){
     if (children[child].nodeType === 3){ // textnode
        var highLight = new Array('abcd', 'edge', 'rss feeds');
        var contents = children[child].nodeValue;
        var output = contents;
        for(var i =0;i<highLight.length;i++){
            output = delimiter(output, highLight[i]); 
        }


    children[child].nodeValue= output; 
    }
    }
}

function delimiter(input, value) {
    return unescape(input.replace(new RegExp('(\\b)(' + value + ')(\\b)','ig'), '$1<b>$2</b>$3'));
}
</script>



</head>
<body>
<img src="http://some.web.site/image.jpg" title="abcd"/>

These words are highlighted: knorex, edge, rss feeds while these words are not: knewedge, abcdef, rss feedssss

<input type ="button" value="Button" onclick = "myFunction()">
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that you are putting HTML in to a text node, so it is being evaluated strictly as text. One easy fix would be to simply operate on the innerHTML of the body element, like this:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>

<script>

function myFunction(){
  var highLight = ['abcd', 'edge', 'rss feeds'],
      contents = document.body.innerHTML;

  for( i = 0; i < highLight.length; i++ ){
    contents = delimiter(contents, highLight[i]); 
  }

  document.body.innerHTML = contents;
}

function delimiter(input, value) {
  return input.replace(new RegExp('(\\b)(' + value + ')(\\b)','ig'), '$1<b>$2</b>$3');
}
</script>



</head>
<body>
<img src="http://some.web.site/image.jpg" title="abcd"/>

These words are highlighted: knorex, edge, rss feeds while these words are not: knewedge, abcdef, rss feedssss

<input type ="button" value="Button" onclick = "myFunction()">
</body>
</html>
    • 0