突出显示浏览器（Chrome）中的文本功能，看起来像在android中突出显示

Question

I want to implement feature (for chrome extension) which allows the user to select some text from webpage in browser with mouse and I want to add ability for the user to edit selection boundaries (like it can be done in android application) with small controls below the selected line which can be moved with the mouse:

May be there is existing library to achieve similar behaviour in browser in easy way?

Answer 1

i think this might help..

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>');
    }); 
}

And more of it can be found in here