浏览器（Chrome）中的文本高亮功能类似于Android中的高亮功能

Question

我想实现一个功能（用于chrome扩展程序），允许用户用鼠标从网页中选择一些文本，并且我想添加用户可以使用在所选行下方的小控件来编辑选择边界的能力（就像在Android应用程序中一样）。这些小控件可以随着鼠标的移动而移动。或许已经存在类似于在浏览器中轻松实现此行为的库吗？请参见以下截图：http://s17.postimg.org/9s9flupjj/android.png

- Maxim Galushka

Answer 1

我认为这可能会有所帮助...

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

更多相关内容可以在这里找到。

- prime