突出显示javascript中的文本，如Evernote Web Clipper

Question

我目前的解决办法是：

1. 获取选定的html (包括文本和html标记)，即: selText
2. highlightText = <span>selText</span>
3. 在主体或文档的selText (或鼠标拖动的元素)中查找innerHTML
4. 用highlightText替换

但是如果文档是：a a a a a a和a，则选择最后一个a。我的函数将突出显示第一个或全部a。

有什么建议吗？

谢谢。

Answer 1

我想你的问题是重复的，不管怎样，我只是在网上搜索并找到了这个文章。

在下面的最终代码中实现您的要求

function highlightSelection()  {
  var selection;

  //Get the selected stuff
  if(window.getSelection) 
    selection = window.getSelection();
  else if(typeof document.selection!="undefined")
    selection = document.selection;

  //Get a the selected content, in a range object
  var range = selection.getRangeAt(0);

  //If the range spans some text, and inside a tag, set its css class.
  if(range && !selection.isCollapsed)
  {
    if(selection.anchorNode.parentNode == selection.focusNode.parentNode)
    {
      var span = document.createElement('span');
      span.className = 'highlight-green';
      range.surroundContents(span);
    }
  }
}

我还发现了这个库兰迪，它可以用来选择文本，但只适用于jquery，所以我更喜欢第一个普通的js解决方案。

var el = $("<span></span>");
el.text(rangy.getSelection().getRangeAt(0).toString());
rangy.getSelection().getRangeAt(0).deleteContents();
rangy.getSelection().getRangeAt(0).insertNode(el.get(0));
rangy.getSelection().getRangeAt(0).getSelection().setSingleRange(range);

On Range和用户选择

必须使用返回range对象的Document.createRange来选择Range，然后才能使用Range.surroundContents()，这样就可以创建范围。

var range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

在实践中，您遵循本指南来理解范围和选择技术。最重要的一点包含在代码中。

var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // should come last; Opera!
    userSelection = document.selection.createRange();
}

在这之后你可以用

userSelection.surroundContents()