javascript - 在javascript中获取文本选择中的当前节点

Question

如果我有以下 DOM 结构，我试图在选择文本后获取我所站的节点:

<p>
   This is an example
   <span style="text-transform: uppercase">text in caps</span>
   some more text in here
</p>

当我选择大写文本时，我想获取该选择所在的节点。在这种情况下，将是 <span>以防万一我当然选择了所有内容。

我知道有一个名为 rangy 的库，但我认为仅使用它来获取这些节点对我来说有点过分了，还有其他方法可以检索它吗？

到目前为止，这是我实现它的方式:

var select = window.getSelection();
if (select.rangeCount) {
   var $elem = $('<span>', {'style': 'text-transform: ' + type});
   var range = select.getRangeAt(0).cloneRange();
   var selectedNode = range.cloneContents().childNodes[0];
   var nodeHasStyle = !!(selectedNode.style && selectedNode.style.textTransform.length !== 0);

   if (nodeHasStyle) {
       // If it's the same as previous, just toggle it by resetting the node
       var currentStyle = selectedNode.style.textTransform;
       selectedNode.style.textTransform = currentStyle === type ? '' : type;
   }

   range.surroundContents(!nodeHasStyle ? $elem.get(0) : selectedNode);

   select.removeAllRanges();
   select.addRange(range);

但注意到selectedNode并不总是正确的。因此，每当我执行 surroundContents 时，它都会在我一开始就应该得到的那个周围添加一个新的跨度。

我正在使用 summernote 在选定文本范围内切换大写、小写文本转换。

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

您不需要首先依赖其他库，您需要获取选定的文本，然后通过 xpath 找到包含该文本的节点，即

let text = window.getSelection().toString()
if (text) {
  let xpath = "//text()[contains(., '"+ text +"')]";
  let selectionNode = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

或者您可以使用窗口选择，即 window.getSelection().anchorNode.parentNode