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

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

I'm developing an Extension for Google Chrome. It has a text highlighting
facility when user select a certain text area. When it comes to a single
tag I can just use a <span> tag inside that particular tag. so far what i
have done is below.
var divs = document.getElementsByTagName("p");
for(var d in divs) {
// highlight a part of a <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 I do it. I
can't put a single <span> tag there. I have to use <span> tag for each of
those selected tags.
1) how to detect and get user selected tags. And the starting points and
end points.?
2) how to change back color of them at once.?
3) do i want to add listeners , If so how should i do that ?
Any help will be appreciate .