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

如果我具有以下DOM结构，我将尝试在选择文本后获取我所处的节点：

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

当我选择大写文本时，我希望获得该选择所在的节点。在这种情况下，我当然会选择一切

我知道有一个名为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并不总是正确的。因此，每当我围绕内容，它会增加一个新的跨度，围绕着我应该首先得到的跨度

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

任何帮助都将不胜感激

---

谢谢。

您不需要依赖其他库，首先需要获取所选文本，然后通过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

谢谢您的回复。哇，让我检查一下。嗯，它不工作了，它从文档返回了一些不同的DOM元素。与我当前正在编辑的内容无关。我尝试将锚点更改为span，因为它通常是一个span，并返回一些随机span。这很奇怪，因为我将要编辑的段落作为节点上下文传递。对不起，我的错误是，在这种情况下，您可以使用通用xpath，即：xpath=//text[contains.，'+text+']；它仍然返回任何包含该单词的随机文本，即使它是文档中样式标记中的css，而不是期望的结果。另外，假设我突出显示单词内容，它将搜索文档中的任何单词内容，并应用大写/小写内联样式。。。当我只想获取我在RTE contenteditable上选择的节点时。请记住，我可以有许多内容的话在一个单一的文本以及。。。我只需要我正在选择的atm。我想你需要window.getSelection.anchorNode.parentNode