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

我目前的解决办法是：

获取选定的html包含文本和html标记，即：selText highlightText=selText 在主体、文档或鼠标拖入的元素的innerHTML中查找selText 替换为highlightText 但是如果文档是：a，并且用户选择了最后一个a。我的函数将突出显示第一个或全部a

有什么建议吗

---

谢谢。

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

下面是最终代码，以实现您的要求

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，所以我更喜欢第一个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);

在实践中，您需要了解范围和选择技术。 最重要的一点包含在这段代码中

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

在此之后，您可以使用

userSelection.surroundContents()

---

，我想这会对你有帮助。完全相同的要求。我认为你的链接是相同的要求。但没有具体的问题。该链接中的解决方案与我的解决方案相同，但我需要改进，以便您可以根据需要修改/更新它。没有人会为你编码。我不明白你在说什么。我需要一个建议，而不是代码。是的，你的highlightSelection功能与textnode一起工作。不幸的是，当我这样选择时，周围的内容不起作用：这是一个链接。根据您的建议，现在我可以获得用户选择的textnode列表，但我不知道如何将其包装/环绕到突出显示范围中。另外，非常感谢。我添加了更多信息以了解如何使用surroundContents，在使用该方法之前，必须从userSelection创建一个Range对象。如果这解决了您的问题，请将答案标记为已解决。是的，我会的。我从你的回答中得到了这个想法：处理范围对象，而不是提取文本或htmlText。非常感谢。

userSelection.surroundContents()