javascript - Highlight all comma's in page with jquery -

i have very simple question , didn't find answer.

i have page using ajax , gets update again , again in 1 div of it.

now, want highlight commas , of div. example, red color.

how can ajax page ?

i wanted try this code, coudn't

$(document":contains(',')").css("color","red"); 

i need find commas in div every second , give style them .

how jquery?

don't know jquery, can done pure javascript. it's not easy actually.

tl;dr jsfiddle

this answer not cause dom revalidation , not mess-up javascript events!

first need loop through page content , replace every comma (or every character) <span> or other node can give individual css style. let's start getting textnodes:

htmlelement.prototype.gettextnodes = function(recursive, uselist) {   var list = this.childnodes;   var nodes = uselist!=null?uselist:[];   for(var i=0,l=list.length; i<l;i++) {     if(list[i].nodetype==node.text_node) {       nodes.push(list[i]);     }     else if(recursive==true&&list[i].nodetype==1&&list[i].tagname.tolowercase()!="script"&&list[i].tagname.tolowercase()!="style") {       list[i].gettextnodes(true, nodes);     }   }   //console.log(nodes);   return nodes; } 

you'll need split spans wherever commas are:

/*turn single text node many spans containing single letters */   /* @param        textnode - htmltextnode element        highlight - character highlight      @return        null   */   function replaceletters(textnode, highlight) {     //get string contained in text node     var text = textnode.data;     //generate container contain text-node data     var container = document.createelement("span");     //create span every single letter     var tinynodes = [];     //split letters in spans     for(var i=0,l=text.length;i<l; i++) {       //skip whitespace       if(text[i].match(/^\s*$/)) {         container.appendchild(document.createtextnode(text[i]));       }       //create span letter       else {         //create span         var tiny = document.createelement("span");         //if letter our character         if(text[i]==highlight)            tiny.classname = "highlighted";         tiny.innerhtml = text[i];         container.appendchild(tiny);       }     }     //replace text node span     textnode.parentnode.insertbefore(container, textnode);     textnode.parentnode.removechild(textnode);   } 

the function above originaly used animating letters on page (even when loaded). need change color of of these.

if functions above defined, call this:

var nodes = document.getelementbyid("mydiv").gettextnodes(true); for(var i=0, l=nodes.length; i<l; i++) {     replaceletters(nodes[i], ","); }