如何用Intl.Segmenter实现中文网页全文搜索长尾词高亮？

本文共计1228个文字，预计阅读时间需要5分钟。

Intl.Segmenter 不能直接实现语义分词的全文搜索高亮，它只负责按 Unicode 规则切出语言感知的边界（如中文的词或句子）。它不识别南京市或长江大桥这类实体。若要实现高亮，需先使用它进行分词，再结合字符串匹配或正则定位。否则，直接在南京市长江大桥中高亮南京、市、长江、大桥将导致完全错误。

为什么不能直接用 granularity: "word" 做中文搜索分词

Intl.Segmenter 在 zh-CN 下的 "word" 模式，本质是调用 ICU 的「CJK Word Boundary」规则，它按字、标点、常见双字组合（如“我们”“可以”）切分，但不查词典、不消歧、不支持未登录词。比如：

• "南京市长江大桥" 会被切成 ["南京", "市", "长江", "大桥"] 或 ["南京", "市长", "江", "大桥"]（取决于浏览器 ICU 版本），但绝不会稳定输出 ["南京市", "长江大桥"]
• "苹果发布了新手机" 可能切出 ["苹果", "发布", "了", "新", "手机"]，但无法区分“苹果”是水果还是公司
• Safari 14.0 不支持 granularity: "word"，只返回单字；Chrome 100+ 才逐步稳定

如何用 Intl.Segmenter 辅助高亮：分段 + 精确位置映射

它的真正价值是提供 index 和 segment 字段，让你知道每个分段在原文中的起止位置。这对高亮很关键——你不需要“猜词”，而是让搜索关键词在原始字符串上做 indexOf 或正则匹配，再用 Segmenter 结果找出哪些分段被覆盖。

• 先对用户输入的 searchText 调用 segmenter.segment(searchText)，拿到所有 { segment, index } 对象
• 对目标文本 content 同样分段，但保留全部 index 信息
• 用 content.indexOf(searchText) 或 new RegExp(escapeRegExp(searchText), "g") 找到所有匹配起始位置
• 遍历 Segmenter 输出，判断每个分段的 [index, index + segment.length) 是否与任一匹配区间重叠；重叠则标记为需高亮
• 最后拼 HTML 时，按原始字符索引插入 <mark></mark>，不是按分段数组顺序拼

浏览器兼容性与降级必须写死

截至 2026 年 4 月，Intl.Segmenter 在 Safari 14.1+、Firefox 78+、Chrome 86+ 支持完整 granularity，但 Edge 18 及更早版本完全不支持。别依赖 try/catch，直接检测：

if (typeof Intl.Segmenter !== 'function') { // 降级方案：对中文用 /[\u4e00-\u9fa5]+/g 匹配连续汉字，对英文用 /\b\w+\b/g // 或直接 fallback 到 string.split('')，至少保证标点和汉字不粘连 }

• 不要在构造 Intl.Segmenter 时传错 locale：用 "zh-CN"，别用 "zh" 或 "cn"，后者可能触发默认 English 规则
• 避免在循环中反复 new 实例：每个 locale + granularity 组合应复用同一个 segmenter 实例
• 注意 segment() 返回的是迭代器，不是数组；想随机访问必须 Array.from(segmenter.segment(str))，但大文本慎用——会一次性展开全部分段，失去懒加载优势

高亮渲染时最容易忽略的细节

很多人用 segmenter.segment(content) 得到一堆 segment 字符串，然后拼成新字符串并插入 <mark>，结果破坏了原始文本的空白、换行、HTML 实体（如 &）。正确做法是：

• 永远基于原始 content 字符串做 DOM 插入，用 textContent 和 createTextNode + createElement("mark") 分段构建 DocumentFragment
• 如果内容含 HTML 标签（如富文本），先用 DOMParser 解析，再对 textContent 分段高亮，最后把高亮节点塞回对应文本节点位置——不能对 innerHTML 做正则替换
• 移动端要注意 <mark> 默认样式在 iOS 上背景色极淡，需加 CSS：mark { background-color: #ffeb3b; }

真正的难点不在分段，而在把“分段坐标”、“搜索匹配坐标”、“DOM 文本节点坐标”三者对齐。少一步映射，高亮就偏移或断裂。