怎么利用 NodeIterator 接口高效统计 HTML 编辑器中的关键词出现频率-html教程-PHP中文网

nodeiterator 不能直接统计关键词频率，因为它仅线性遍历匹配节点，不解析文本内容、不处理属性值、不跨节点拼接语义，且默认排除 attribute 节点。

怎么利用 nodeiterator 接口高效统计 html 编辑器中的关键词出现频率

NodeIterator 本身不统计频率，它只负责高效筛选节点；关键词统计必须在迭代后手动提取文本并计数，否则会漏掉注释、属性值等非文本节点内容。

为什么不能直接用 NodeIterator 统计关键词频率

NodeIterator 是线性遍历器，只按文档顺序返回匹配的节点，不提供聚合能力。它能快速定位 Text 节点或 Comment 节点，但无法自动扫描节点内部字符串、解析属性值或跨节点拼接语义——这些都得你后续处理。

它默认不包含 Attribute 节点（nodeType === 2），而编辑器常把元信息存在 data- 属性里
对 Text 节点，它只返回整个 nodeValue，不会帮你切分单词或忽略 HTML 实体（如）
若关键词跨两个相邻 Text 节点（比如被 <strong></strong> 包裹），NodeIterator 会拆成两段，无法识别完整词

只统计可见文本时：用 NodeFilter.SHOW_TEXT + 正则计数

这是最常见也最容易出错的场景。目标是统计用户实际看到的、可编辑区域内的纯文本关键词（不含标签、注释、属性）。

包图AI文生图

包图AI文生图是一款AI图像与设计工具，一站式图像与插画生成工具。

下载

创建时 whatToShow 必须设为 NodeFilter.SHOW_TEXT，否则拿不到文本节点
要过滤掉空格/换行为主的“空白文本节点”，避免干扰：在 acceptNode 中加 node.nodeValue.trim().length > 0 判断
关键词匹配建议用 String.prototype.matchAll() 配合全局正则，比循环 indexOf 更准（尤其处理 Unicode 或带边界的情况）
示例：统计编辑器中所有 “todo” 单词（区分大小写、完整单词）

const editor = document.querySelector('[contenteditable]');
const iter = document.createNodeIterator(
  editor,
  NodeFilter.SHOW_TEXT,
  {
    acceptNode(node) {
      return node.nodeValue.trim().length > 0
        ? NodeFilter.FILTER_ACCEPT
        : NodeFilter.FILTER_REJECT;
    }
  }
);
<p>const keyword = 'todo';
const regex = new RegExp(<code>\b${keyword}\b</code>, 'g');
let count = 0;</p><p>let node;
while ((node = iter.nextNode()) !== null) {
const matches = [...node.nodeValue.matchAll(regex)];
count += matches.length;
}</p><p>console.log(<code>"${keyword}" 出现 ${count} 次</code>);
</p>

要覆盖注释和 data-* 属性时：多通道合并统计

富文本编辑器里，“todo” 可能藏在注释里，也可能在 <p data-status="todo"></p> 属性中。NodeIterator 无法一网打尽，必须分三路扫：

第一路：NodeFilter.SHOW_COMMENT → 提取 node.nodeValue 后用同样正则匹配
第二路：用 editor.querySelectorAll('[data-status], [data-type]') 扫描相关属性节点，再逐个读 getAttribute()
第三路：保持原来的 SHOW_TEXT 路径
三路结果累加，别复用同一个 iter 实例——NodeIterator 不支持重置位置，每路都要新建