将Range或DocumentFragment转换为字符串

基础概念

Range 和 DocumentFragment 是 Web API 中用于处理 DOM（文档对象模型）的两个重要概念。

Range：表示文档中的一部分，可以是文本节点、元素节点或其他类型的节点。Range 对象提供了对 DOM 树中特定部分的精确控制。
DocumentFragment：是一个轻量级的文档对象，可以包含一组子节点，但不属于主文档树。它通常用于在不影响主文档的情况下操作一组节点。

将 Range 或 DocumentFragment 转换为字符串

Range 转换为字符串

要将 Range 对象转换为字符串，可以使用 Range.prototype.toString() 方法。这个方法会返回 Range 对象所包含的文本内容。

const range = document.createRange();
range.selectNodeContents(document.getElementById('myElement'));
const rangeString = range.toString();
console.log(rangeString);

DocumentFragment 转换为字符串

DocumentFragment 没有直接的 toString() 方法，但可以通过遍历其子节点并拼接它们的文本内容来实现转换。

const fragment = document.createDocumentFragment();
const textNode = document.createTextNode('Hello, ');
const elementNode = document.createElement('span');
elementNode.textContent = 'World!';
fragment.appendChild(textNode);
fragment.appendChild(elementNode);

const fragmentString = Array.from(fragment.childNodes)
  .map(node => node.textContent)
  .join('');
console.log(fragmentString); // 输出: "Hello, World!"

应用场景

文本替换：使用 Range 可以精确地选择和替换文档中的特定文本。
批量插入：使用 DocumentFragment 可以在插入大量节点时减少重绘和回流的次数，提高性能。

遇到的问题及解决方法

问题：Range 或 DocumentFragment 转换为字符串时出现乱码

原因：可能是由于字符编码问题或节点内容包含特殊字符。

解决方法：

确保文档和所有涉及的元素使用相同的字符编码。
对特殊字符进行转义处理。

const escapeHtml = (str) => {
  return str.replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
};

const rangeString = range.toString().replace(/[&<>"']/g, escapeHtml);
console.log(rangeString);