Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can iterate through all the text nodes with the methods in <a href="https://stackoverflow.com/questions/2579666/getelementsbytagname-equivalent-for-textnodes">this thread</a>, change them and replace them with new bold ones.</p> <pre class="lang-js prettyprint-override"><code>var hlWord = "idm"; var nregex = new RegExp(hlWord,"gi"); var sr = document.getElementById('SR'); function escape_html(html) { return html.replace(/&amp;/g,'&amp;amp;').replace(/&lt;/g,'&amp;lt;').replace(/&gt;/g,'&amp;gt;'); } (function findTextNodes(current) { // make a shadow copy of the child nodes. var current_children = Array.prototype.slice.call(current.childNodes); for(var i = 0; i &lt; current_children.length; i++) { var child = current.childNodes[i]; // text node if(child.nodeType == 3) { var value = escape_html(child.nodeValue); var html = value.replace(nregex, '&lt;b&gt;' + hlWord + '&lt;/b&gt;'); if (html != value) { var node = document.createElement('div'); node.innerHTML = html; // make a shadow copy of the child nodes. var childNodes = Array.prototype.slice.call(node.childNodes); // replace the plain text node with the bold segments for (var j = 0; j &lt; childNodes.length; j++) { var c = childNodes[j]; current.insertBefore(c, child); } current.removeChild(child); } } else { findTextNodes(child); } } })(sr); </code></pre> <p>Check the code example at <a href="http://jsfiddle.net/ArieShout/r9Qrr/7/" rel="nofollow noreferrer">jsFiddle</a>.</p> <p><strong>UPDATE</strong>:</p> <ul> <li><a href="https://stackoverflow.com/users/570812/passerby">Passerby</a> pointed out that <code>innerHTML</code> should be used carefully. Escape text nodeValue before processing.</li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload