获取所选文本的所有 DOM 块元素

Question

在 HTML 文档中选择文本时，可以从一个 DOM 元素开始到另一个元素，途中可能会跳过多个其他元素。使用 DOM API，可以获得选择范围、所选文本，甚至所有所选 DOM 元素的父元素（根据所使用的浏览器使用 commonAncestorContainer 或parentElement()）。但是，据我所知，除了获取包含所有元素的单个父元素之外，无法列出所有包含所选文本元素的元素。使用父节点并遍历子节点是行不通的，因为在该父节点中可能还有其他未选择的同级节点。

那么，有没有一种方法可以获取包含所选文本的所有这些元素。我主要对获取块元素（p，h1，h2，h3，...等）感兴趣，但我相信如果有一种方法可以获取所有元素，那么我可以遍历它们并过滤它们以获得我想要的想。我欢迎任何想法和建议。

谢谢。

Answer 1

关键是 window.getSelection().getRangeAt(0) https:// developer.mozilla.org/en/DOM/range

这里有一些示例代码，您可以使用它们来完成您想要的操作。提及您真正想要的目的将有助于人们提供更好的答案。

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var allWithinRangeParent = range.commonAncestorContainer.getElementsByTagName("*");

var allSelected = [];
for (var i=0, el; el = allWithinRangeParent[i]; i++) {
  // The second parameter says to include the element 
  // even if it's not fully selected
  if (selection.containsNode(el, true) ) {
    allSelected.push(el);
  }
}


console.log('All selected =', allSelected);

这不是最有效的方法，您可以使用 Range 的 startContainer/endContainer 以及 nextSibling/previousSibling 和 childNode 自己遍历 DOM。

Answer 2

您可以使用我的 Rangy 库 来执行此操作。它为所有浏览器（包括 IE）提供了 DOM Range 和 Selection 对象的实现，并具有额外的 Range 方法。其中之一是 getNodes()：

function isBlockElement(el) {
    // You may want to add a more complete list of block level element
    // names on the next line
    return /h[1-6]|div|p/i.test(el.tagName);
}

var sel = rangy.getSelection();
if (sel.rangeCount) {
    var range = sel.getRangeAt(0);
    var blockElements = range.getNodes([1], isBlockElement);
    console.log(blockElements);
}

Answer 3

听起来您可以使用从 jQuery API 遍历。

可能是 .contents()

希望有帮助！

Answer 4

这是基于 @Juan Mendes 回复的 es6 方法：

const selection = window.getSelection();
const range = selection.getRangeAt(0);
const elementsFromAncestorSelections = range.commonAncestorContainer.getElementsByTagName("*");

const allSelectedElements = Array.from(elementsFromAncestorSelections).reduce(
  (elements, element) =>
    selection.containsNode(element, true)
      ? [...elements, element]
      : elements,
  [],
);