Intl.Segmenter 实现中文分词搜索高亮方法

Intl.Segmenter 并非中文语义分词引擎，它仅依据 Unicode 边界规则（如 CJK 字词切分）提供语言感知的文本分段与精确字符位置映射，无法识别“南京市”“长江大桥”等实体或解决歧义（如“苹果”指水果还是公司），因此不能直接用于精准搜索高亮；真正可行的方案是将其作为坐标定位工具——先用它获取原文中每个分段的起止索引，再结合字符串匹配或正则定位搜索关键词的真实位置，通过区间重叠判断实现像素级准确的高亮渲染，同时必须妥善处理浏览器兼容性、locale 配置、实例复用、DOM 安全插入及移动端样式降级等关键细节，否则极易导致高亮错位、文本损坏或体验断裂。

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 时，按原始字符索引插入 ，不是按分段数组顺序拼

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

截至 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 字符串，然后拼成新字符串并插入 ，结果破坏了原始文本的空白、换行、HTML 实体（如 &）。正确做法是：

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

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

到这里，我们也就讲完了《Intl.Segmenter 实现中文分词搜索高亮方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！