如何在dom范围内获取所有文本节点？

Question

我正在使用实时编辑器,需要找到用户所选范围内的所有文本节点.

示例("|"标记选择范围的起点和终点):

<p>Here starts the |selection.</p>
<p>This is fully in the range.</p>
<p>This only |partial.</p>

我如何找到所有这些节点？(我不想在第一段中有多个文本节点的情况下找到textnode"Here"!(可能有几个!))

Answer 1

Rangy(披露:由我撰写)为您做到这一点:

range.getNodes([3]); // 3 is Node.TEXT_NODE

否则,我建议遍历范围的DOM commonAncestorContainer并且对于遇到的每个文本节点,通过为文本节点(使用selectNode())创建范围并使用其compareBoundaryPoints()方法将其与选择范围进行比较来检查它是否与范围重叠.

Answer 2

假设您只对消除未选择的文本节点感兴趣，这可能适合您。

 var selectedTextOfFirstNode = '';
 //for simplicity assuming one selected range
 var range = window.getSelection().getRangeAt(0);
 if (range.startContainer.nodeType == 3)   
     selectedTextOfFirstNode = range.startContainer.textContent
                                           .substring(range.startOffset);

这会给出字符串"selection."并保留未选择的文本。range.endContainer如果您对节点而不是所选的文本感兴趣，您可以使用“现在您可以使用此文本创建文本节点”执行相同的操作。