Question

我收到用户选择的文字：

var selection = window.getSelection();
var selectRange = selection.getRangeAt(0);

var content = range.cloneContents(); // DocumentFragment

如何在textNode内容中获取DocumentFragment？

Answer 1

使用textContent

var selection = window.getSelection();
var selectRange = selection.getRangeAt(0);
var content = selectRange.cloneContents(); // DocumentFragment
var text = content.textContent;

Answer 2

过滤fragment.childNodes以获取文本节点：

const selection = window.getSelection();
const selectRange = selection.getRangeAt(0);
const fragment = selectRange.cloneContents(); // DocumentFragment
// Get the child nodes and filter them to only include text nodes
const textNodes = Array.from(fragment.childNodes).filter(child => child.nodeName === "#text");

Answer 3

结合一些技巧，很容易从任何容器节点（在这种情况下为 fragment ）中提取文本节点。问题的 fragment 部分与提取部分无关。

获取容器的所有子项，并使用扩展运算符...将它们转换为“真实”数组，以便可以使用filter。也可以跳过这一部分，因为HTMLCollection确实支持forEach，因此可以在其中填充一个空数组。

请注意，Node.TEXT_NODE是3

的DOM 常量

// create a demo fragment with some HTML mix of text nodes & elements
var frag = document.createRange().createContextualFragment("<a>1</a> 2 <b>3</b> 4.");

// now the work begins: get only the text nodes from the fragment
var textNodes = [...frag.childNodes].filter(node => node.nodeType == Node.TEXT_NODE)

// print the text nodes as an array
console.log( textNodes.map(node => node.textContent) )

如何获取文档片段中的所有文本节点？

3 个答案: