Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>To do this, you will want to recurse through just the text nodes, careful not to trash child HTML elements. </p> <p><a href="http://jsfiddle.net/wXNsG/" rel="nofollow"><strong>See the demo at jsFiddle.</strong></a></p> <pre><code>var x = document.querySelector ("body"); // Etc. buggerTextNodesIn (x); function buggerTextNodesIn (node) { var wrapClass = 'gmColorBarf'; function turnerizeTextNodes (node) { if (node.nodeType === Node.TEXT_NODE) { //--- Skip this node if it's already been wrapped. if ( ! node.parentNode.classList.contains (wrapClass) ) { var oldText = node.nodeValue; var parent = node.parentNode; for (var J = 0, len = oldText.length; J &lt; len; ++J) { var wrapSpan = document.createElement ("span"); wrapSpan.classList.add (wrapClass); wrapSpan.textContent = oldText[J]; wrapSpan.style.color = getRandomColor (); parent.insertBefore (wrapSpan, node); } parent.removeChild (node); } } else if (node.nodeType === Node.ELEMENT_NODE) { /*--- IMPORTANT! Start "bottom up" since we will be adding gazillions of nodes and "top down" would skew our length measurement. */ for (var K = node.childNodes.length - 1; K &gt;= 0; --K) { turnerizeTextNodes (node.childNodes[K] ); } } } turnerizeTextNodes (node); } function getRandomColor () { var letters = '0123456789ABCDEF'.split (''); var color = '#'; for (var J = 0; J &lt; 6; ++J) { color += letters[Math.round(Math.random() * 15)]; } return color; } </code></pre> <p><br></p> <hr> <p>Note that to get iframed content, the easiest way is to tune the <code>@include</code>, <code>@exclude</code>, and/or <code>@match</code> directives to trigger on the iframe URL(s) -- if they don't already.</p>
    singulars
    1. This table or related slice is empty.
    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.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      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