Question

我目前的解决方案是：

获取选定的html（包含text和html标签），即：selText
highlightText = <span>selText</span>
在正文或文档的selText中找到innerHTML（或鼠标拖入的元素）
替换为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);

关于范围和用户选择

在使用Document.createRange之前，您必须使用返回Range对象的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()

在Evernote Web Clipper等javascript中突出显示文本

1 个答案: