获取所选文本的所有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);
}