Bold text in body using javascript

Question

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>

This is a duplicate of the poster’s question from yesterday, though possibly better formulated. — Jukka K. Korpela
– Jukka K. Korpela, Commented Jan 22, 2013 at 13:42
Or maybe rather a duplicate of stackoverflow.com/questions/14456079/… — Jukka K. Korpela
– Jukka K. Korpela, Commented Jan 22, 2013 at 13:47

sethmcl · Accepted Answer · 2013-01-22 12:43:23Z

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>

Alex K. · Accepted Answer · 2013-01-22 12:45:24Z

A textNode cannot have child elements so it needs to be replaced, one way;

Replace

children[child].nodeValue = output;

With

var n = document.createElement("span"); n.innerHTML = output; children[child].parentNode.replaceChild(n, children[child]);

Collectives™ on Stack Overflow

Bold text in body using javascript

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related