JavaScript Intl.Segmenter 如何处理中文断词：光标定位与搜索高亮边界

中文搜索框里输入“前端性能”时，直接用 split(" ") 得不到可用的词边界；用户点一下“性能”，还可能因为表情符号或中英文混排导致光标位置错开。Intl.Segmenter 能按语言和粒度拆出词段，同时保留每段的 index 与 isWordLike，适合把搜索词映射回原文。

把 Intl.Segmenter("zh-Hans", { granularity: "word" }) 当成“边界计算器”，再用原字符串的 index 做高亮范围；不要先删空格或用正则重组文本。

先看清中文词段和字符位置

先准备一段混合文本，里面同时放中文、英文和 emoji。Intl.Segmenter 返回的是可迭代的 segment 记录，不是简单字符串数组；除了 segment，还可以读到 index 和 isWordLike。

const text = "前端性能 Web API 🚀";
const segmenter = new Intl.Segmenter("zh-Hans", { granularity: "word" });

const segments = [...segmenter.segment(text)];
const words = segments
  .filter(({ isWordLike }) => isWordLike)
  .map(({ segment, index }) => ({ segment, index }));

console.log(words);
// segment 和 index 来自同一个原始 text

这里不要把 segment 再拼成新字符串后寻找位置。中文词段可能不是单个汉字，emoji 也可能由多个 UTF-16 code unit 组成；原始 index 才能和 DOM 文本或后续切片保持一致。

从 Intl.Segmenter 结果生成高亮范围

搜索高亮只需要三件事：原文、用户输入的词，以及 segment 结果。下面的 findWordRange 只返回第一个完全匹配的词段，范围用原字符串的起止位置表示，后面可以交给渲染层处理。

function findWordRange(text, keyword, locale = "zh-Hans") {
  if (!keyword || !("Segmenter" in Intl)) return null;

  const segmenter = new Intl.Segmenter(locale, { granularity: "word" });
  for (const item of segmenter.segment(text)) {
    if (item.isWordLike && item.segment === keyword) {
      return {
        start: item.index,
        end: item.index + item.segment.length,
        segment: item.segment,
      };
    }
  }
  return null;
}

const range = findWordRange("前端性能 Web API 🚀", "性能");
console.log(range);
// { start: 2, end: 4, segment: "性能" }

这个调用链的重点是 findWordRange 创建 Intl.Segmenter，遍历 segment，最后返回 start / end 范围。没有匹配项时返回 null，调用方可以保持原文显示，不要把整段内容误标成命中。

把范围交给渲染层时别破坏原文

如果页面使用文本节点渲染高亮，推荐把范围切成三段：命中前、命中词、命中后。示例只演示字符串切片，真实项目里应使用框架的安全文本节点或安全 HTML API，不能把用户输入直接拼进 innerHTML。

function splitHighlight(text, range) {
  if (!range) return [{ text, highlighted: false }];
  return [
    { text: text.slice(0, range.start), highlighted: false },
    { text: text.slice(range.start, range.end), highlighted: true },
    { text: text.slice(range.end), highlighted: false },
  ].filter(({ text }) => text.length > 0);
}

const parts = splitHighlight("前端性能 Web API 🚀", range);
console.log(parts);
// 前端 / 性能 /  Web API 🚀

验收时至少检查三种情况：中文命中“性能”时范围是 2 到 4；英文关键字不存在时返回 null；输入含 emoji 时，命中词前后的内容仍然完整。高亮只是显示状态，不能改变搜索索引里的原文。

浏览器不支持时怎样安全降级

MDN 将 Intl.Segmenter 标为 Baseline 2024，但旧设备或旧浏览器仍可能没有它。降级的目标不是假装得出同样精确的中文词边界，而是保证搜索和阅读可用：保留原文，关闭精确词段高亮，或者接入项目已经审核过的分词库。

function getWordRange(text, keyword) {
  if (!("Segmenter" in Intl)) {
    return text.includes(keyword)
      ? { start: text.indexOf(keyword), end: text.indexOf(keyword) + keyword.length, approximate: true }
      : null;
  }
  return findWordRange(text, keyword);
}

approximate: true 是给界面层的提醒：它只能说明字符串包含该词，不能证明这是符合中文语言规则的词段。生产中还要在目标浏览器矩阵里验证 word 粒度、混排文本和辅助功能阅读顺序。

常见问题：词段、下标和高亮边界

为什么不用正则按中文字符切开？

字符不等于词。正则可以做粗略匹配，却无法稳定表达中文词段、英文词和标点之间的边界；词级搜索应优先使用语言感知的 segment 结果。

isWordLike 为 false 的内容要删除吗？

不要删除原文。它通常代表空白或标点，只是在统计词段时排除；渲染和下标计算仍应基于完整的 text。

为什么高亮范围不能用重新拼接后的字符串计算？

重新拼接会丢掉空格、标点或 emoji 的原位置。直接使用 segment 的 index，再加上 segment.length，才能回到同一个原始字符串。

小结

这套实现的边界很明确：Intl.Segmenter 负责按 locale 产生词段，isWordLike 负责筛选，index 和 segment.length 负责定位，渲染层只负责显示命中状态。遇到旧浏览器则明确标记近似结果，别用一个看似成功的正则切词掩盖边界误差。