如何正确分割印度语系文字（如印地语）以避免 Safari 中显示异常-html教程-PHP中文网

如何正确分割印度语系文字（如印地语）以避免 Safari 中显示异常

本文详解为何在 Safari 中印地语等复杂脚本文字因 JavaScript 字符串分割错误而乱码，并提供基于 Intl.Segmenter 的现代解决方案及兼容性 fallback 方案。

本文详解为何在 safari 中印地语等复杂脚本文字因 javascript 字符串分割错误而乱码，并提供基于 `intl.segmenter` 的现代解决方案及兼容性 fallback 方案。

在实现多语言轮播文本（如英文、印地语、日语、俄语、韩语）时，若直接使用 String.prototype.split("") 拆分包含印度语系文字（如“अभय चंद्रा”）的字符串，会导致 Safari 等浏览器中文字显示异常——字符被错误切开、连字断裂、元音标记（matra）脱离基字，甚至出现空白或方块符号。根本原因在于：JavaScript 的默认字符串操作基于 UTF-16 代码单元（code units），而非用户感知的“字素簇”（grapheme clusters）。

印地语等使用天城文（Devanagari）的语言依赖复杂的组合规则：一个视觉上“单个字符”往往由多个 Unicode 码点构成（如 च + ं → चं，即辅音+鼻化符号）。split("") 会将这些逻辑上不可分割的字素簇暴力拆开，破坏渲染上下文，而 Safari 的文本渲染引擎对这类破损序列尤为敏感，导致回退失败或显示异常；相比之下，纯 HTML 文本（未经 JS 拆分）由浏览器原生解析，能正确识别并渲染完整字素簇，因此显示正常。

✅ 正确解法：使用 Grapheme-Aware 分割
现代标准推荐使用 Intl.Segmenter API，它专为按语言感知单位（如字素簇、单词、句子）分割文本而设计：

const graphemeSplit = (str, locale) => {
  try {
    const segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' });
    return Array.from(segmenter.segment(str), ({ segment }) => segment);
  } catch (e) {
    // Intl.Segmenter 不可用时降级为简单分割（仅用于基础拉丁字母）
    return [...str];
  }
};

// 使用示例：
words.forEach((word) => {
  const locale = word.dataset.locale || 'en'; // 如 <span data-locale="hi-IN">
  const letters = graphemeSplit(word.textContent.trim(), locale);
  word.textContent = '';
  letters.forEach(letter => {
    const span = document.createElement('span');
    span.textContent = letter;
    span.className = 'letter';
    word.append(span);
  });
});</span>

⚠️ 注意事项：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

浏览器兼容性：Intl.Segmenter 在 Safari 17.4+、Chrome 95+、Firefox 102+ 中支持良好，但旧版 Safari（≤17.3）需降级处理；
HTML 标记增强：务必为每个 .word 元素添加 data-locale 属性（如 data-locale="hi-IN"），确保 Segmenter 获得正确语言上下文；
空格与标点处理：印地语中空格、连字符等也属于字素簇一部分，Intl.Segmenter 可自动保留其完整性，无需额外清洗。

? 兼容性兜底方案（适用于需支持 Safari 16 或更早版本的项目）：
当 Intl.Segmenter 不可用时，可预定义各语言的字素簇数组，绕过运行时分割逻辑：

const PRE_SPLIT_GRAPHEMES = {
  'en': ['A','b','h','a','y','_','C','h','a','n','d','r','a'],
  'hi-IN': ['अ','भ','य',' ','चं','द्रा',' '], // ✅ "चं" 作为整体，不拆为 'च'+'ं'
  'ja-JP': ['ア','バ','イ','・','チ','ャ','ン','ド','ラ'],
  'ru-RU': ['А','б','х','а','й',' ','Ч','а','н','д','р','а'],
  'ko-KR': ['아','바','이',' ','찬','드','라']
};

// 使用时：
const locale = word.dataset.locale;
const letters = PRE_SPLIT_GRAPHEMES[locale] || [...word.textContent];

? 总结：