获取所选文本的所有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和childNodes自行遍历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中的Traversing 。

可能.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,
  [],
);