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

Question

我目前的解决方案是：

1. 获取选中的html（包括文本和html标签），即：selText
2. 高亮文本 = <span>selText</span>
3. 在正文或文档（或鼠标拖入的元素）的innerHTML 中查找selText
4. 替换为highlightText

但如果文档是：a a a a a a 并且用户选择了最后一个 a。我的函数将突出显示第一个或所有a。

有什么建议吗？

谢谢。

Answer 1

我认为您的问题是重复的，无论如何我刚刚搜索了互联网并找到了这个article。

下面是实现你所要求的最终代码

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

我还发现了这个库rangy，它是一个可用于选择文本但仅适用于 jquery 的助手，因此我更喜欢第一个 vanilla-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);

关于范围和用户选择

您必须使用返回 Range 对象的Document.createRange 选择范围，然后才能使用Range.surroundContents()，您可以通过这种方式创建范围。

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

在实践中，您可以关注this guide 以了解范围和选择技术。 最重要的一点都包含在这段代码中

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

之后就可以使用了

userSelection.surroundContents()