JavaScript中如何过滤DOMRange仅保留span元素与#text文本节点

我们可以通过遍历Range覆盖的所有节点、校验节点类型、调整Range边界三个步骤实现需求，完整实现如下： #

核心实现代码 #

1. 节点合法性校验工具函数 #

// 校验节点是否为允许的类型：#text文本节点 / span元素
function isAllowedNode(node) {
  return node.nodeType === Node.TEXT_NODE 
    || (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'span');
}

2. 过滤Range的主函数 #

function filterRange(range) {
  // 收集Range范围内所有合法节点
  const allowedNodes = [];
  const walker = document.createTreeWalker(
    range.commonAncestorContainer,
    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
    {
      acceptNode: node => {
        // 仅保留在Range范围内的合法节点
        if (range.intersectsNode(node) && isAllowedNode(node)) {
          return NodeFilter.FILTER_ACCEPT;
        }
        return NodeFilter.FILTER_SKIP;
      }
    }
  );

  let node;
  while (node = walker.nextNode()) {
    allowedNodes.push(node);
  }

  if (allowedNodes.length === 0) return null;

  // 调整Range边界为第一个和最后一个合法节点的边界
  const newRange = document.createRange();
  newRange.setStart(allowedNodes[0], 0);
  newRange.setEnd(allowedNodes[allowedNodes.length - 1], allowedNodes[allowedNodes.length - 1].childNodes.length || allowedNodes[allowedNodes.length - 1].length);

  return newRange;
}

3. 调用示例 #

// 从选区获取原始Range
const originalRange = window.getSelection().getRangeAt(0);
// 过滤后得到仅包含span和文本节点的Range
const filteredRange = filterRange(originalRange);

注意事项 #

• 如果原Range范围内没有符合要求的节点，函数会返回null，可根据业务需求补充兜底逻辑
• 如果你仅需要提取内容而非修改原选区的Range，可以直接遍历allowedNodes数组克隆节点拼接即可，无需调整Range边界
• 以上实现默认会保留合法节点的全部内容，如果你需要保留原Range的首尾截断逻辑（比如原Range只选中了某个文本节点的后半段），可以在设置新Range的start和end时额外计算偏移量

内容的提问来源于stack exchange，提问作者Shess