Javascript: changing the color of each "r" in an html document

Question

EDIT [how can I] change the color of each R and r in my HTML document using javascript?

Answer 1

I would use a highlight plugin for jQuery . Then do something like:

$('*').highlight('r'); // Not sure if it case-insensitive or not

and in CSS:

.highlight { background-color: yellow; }

Answer 2

Say, but not super easy. There is no CSS way to do this.

Basically, you will need to use Javascript and iterate over all the nodes. If this is node text, you can find it for "R" and then replace R with<span style="color:red">R</span>

, , , , "highlight", , , CSS. , , . , , node, , , , , (script ?), .

 function updateNodes(node) { 
   if (node.nextSibling)
     updateNodes(node.nextSibling);
   if (node.nodeType ==8) return; //Don't update comments
   if (node.firstChild)
      updateNodes(node.firstChild);
   if (node.nodeValue) { // update me    
       if (node.nodeValue.search(/[Rr]/) > -1){ // does the text node have an R
               var span=document.createElement("span");
               var remainingText = node.nodeValue;
               var newValue='';
               while (remainingText.search(/[Rr]/) > -1){ //Crawl through the node finding each R
                 var rPos = remainingText.search(/[Rr]/);
                 var bit = remainingText.substr(0,rPos);
                 var r = remainingText.substr(rPos,1);
                 remainingText=remainingText.substr(rPos+1);
                 newValue+=bit;
                 newValue+='<span style="color:red">';
                 newValue+=r;
                 newValue+='</span>';
               }
               newValue+=remainingText;
               span.innerHTML=newValue;
               node.parentNode.insertBefore(span,node);
               node.parentNode.removeChild(node);   
            } 
        }
     } 

        function replace(){   updateNodes(document.body); 
}

Answer 3

DOM ( jQuery) node . , R, , .

. node "art" "a<span class="colored">r</span>t". : "r" "t" span.

Answer 4

, Javascript, CSS .

, ( CSS " " ), HTML, . "r" "R" - ( ):

<span class="new-colour">r</span>

, . , , . :

regexlib.com

8 ,

Answer 5

jQuery - . - - - Google Closure goog.dom.annotate Class. , - . .

, HTML-, .

, " , "

var body = document.getElementsByTagName("body")[0];
var html = body.innerHTML
.replace(/(^|>[^<rR]*)([rR])/g, "$1<em>$2</em>");
body.innerHTML = html; 

. :

<p class="red">text......</p>

<p class="<span class="red">r</span>ed .....

html.

In general, parsing the DOM is "slow", so try to avoid annotating the entire web page, ask yourself why you only need to highlight R? I'm actually curious why you want to comment on r? :)

Answer 6

A simple JS solution without the need for any JS 20kB library:

var body = document.getElementsByTagName("body")[0];
var html = body.innerHTML
               .replace(/(^|>[^<rR]*)([rR])/g, "$1<em>$2</em>");
body.innerHTML = html; // note that you will lose all
                       // event handlers in this step...