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

【问题标题】：Get current node within text selection in javascript在javascript中的文本选择中获取当前节点
【发布时间】：2019-12-02 23:27:36
【问题描述】：

如果我有以下 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 并不总是正确的。所以每当我做环绕内容时，它都会在我一开始就应该得到的那个周围添加一个新的跨度。

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

任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： javascript summernote

【解决方案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

【讨论】：

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