javascript - Change back color of several contiguous HTML tags when user selects them -

i'm developing extension google chrome. has text highlighting facility when user select text area. when comes single tag can use <span> tag inside particular tag. far have done below.

var divs = document.getelementsbytagname("p");     for(var d in divs) {       // highlight part of <p> tag         divs[d].addeventlistener('mouseup',function(){var str= document.getselection() ;alert(str);                   this.innerhtml =this.innerhtml.replace(str,'<span style="background-color: '+'yellow'+' ">'+str+'</span>');         });    } 

but if user select several tag areas (contiguous tags) how can it. can't put single <span> tag there. have use <span> tag each of selected tags.

1) how detect , user selected tags. , starting points , end points.?

2) how change color of them @ once.?

3) want add listeners , if how should ?

any appreciate .

i have understood following:

• your extension changes background color of text (of underlying paragraph-nodes) user has selected in webpage.
• currently implementation adds eventlistener inject span tag inside paragraph-tag

  if event mouseup fires.

• you know how highlight selected area (the nodes) if user has selected more single leaf-node?

have understood correctly?

as far have understood question following. if multiple nodes selected set background-color on each node within selected text:

based on html:

<h2>how set background color of selected text</h2> <div>        <h3 id="h">this headline</h3>     <p id="p1">this first paragraph</p>     <p id="p2">this second paragraph</p>     <button id="b1" onclick="colorselectednodes()">color selected nodes</button> </div> 

you use following javascript:

function colorselectednodes(){     var ds= document.getselection();     var elements = []         // start node if selection occured start end          // (from top left right bottom)     var anchornode = ds.anchornode.parentnode;      var elementsibling = anchornode.nextelementsibling;     var focusnode = ds.focusnode.parentnode; // endnode      while(elementsibling.nextelementsibling){         console.log("elementsibling", elementsibling);         elementsibling.style.backgroundcolor = "#00ffff";                    elementsibling.style.fontweight = "bold";         elementsibling.style.color = "blue";         elementsibling = elementsibling.nextelementsibling;     }     // show focus , end node     anchornode.style.backgroundcolor = "lightgreen";      focusnode.style.backgroundcolor = "yellow";      console.log("anchornode", anchornode);     console.log("focusnode", focusnode); } 

there few thinks take care of

• if user selects end start anchornode , focusnode switched,
• above not check if selection within single node (for example inside span) or if selection contains many nodes
• according question chrome (webkit) changed api of document.getselection();
• cross browser bumby ride; looking chrome solution should not relevant

i hope my answer gets going in right direction. if have more questions feel free ask.