Highlight text feature in browser (Chrome) which looks like highlighting in 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