本文详解为何 split("") 会导致印地语等复杂脚本在 Safari 中显示错乱，并提供基于 Intl.Segmenter 的现代解决方案及兼容性 fallback 方案，确保多语言字符（尤其是组合字符、连字）被原子化拆分。
本文详解为何 `split("")` 会导致印地语等复杂脚本在 safari 中显示错乱，并提供基于 `intl.segmenter` 的现代解决方案及兼容性 fallback 方案，确保多语言字符（尤其是组合字符、连字）被原子化拆分。
在实现多语言轮播文本（如印地语、日语、俄语等）时，开发者常使用 textContent.split("") 将单词逐字符拆分为 <span> 元素，再逐个动画呈现。然而，这种看似直观的方法在处理Unicode 复合字符（如印地语中的元音符号、辅音连字、变音标记）时会严重失效——尤其在 Safari 中表现尤为明显：文字被错误截断、显示为方块或乱码，甚至丢失部分音节。
根本原因在于：JavaScript 的原生字符串是基于 UTF-16 代码单元（code units） 的，而 split("") 按单个代码单元切分。但印地语等文字的“视觉字符”（grapheme cluster）往往由多个 Unicode 码点组合而成（例如 "चं" 实际由 U+091A（च） + U+0902（ं，梵文 anusvāra）构成），强行按代码单元拆分就会破坏其渲染逻辑，导致浏览器无法正确合成字形。
✅ 正确做法是按 图形单位（grapheme cluster） 分割，即把每个用户感知的“可读字符”视为一个不可分割单元。
✅ 推荐方案：使用 Intl.Segmenter（现代标准）
Intl.Segmenter 是 ECMAScript 标准中专为语言敏感文本分割设计的 API，支持按 grapheme、word、sentence 等粒度切分：
const graphemeSplit = (str, locale) => {
try {
const segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' });
return Array.from(segmenter.segment(str), ({ segment }) => segment);
} catch (e) {
// 回退到备用方案（见下文）
console.warn('Intl.Segmenter not supported, using fallback');
return Array.from(str); // 仅作降级，不推荐用于印地语
}
};在 HTML 中为每个 <span class="word"> 添加 data-locale 属性标识语言：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
<span class="word w-2" data-locale="hi-IN">अभय चंद्रा</span> <span class="word w-3" data-locale="ja-JP">アバイ・チャンドラ</span>
JS 初始化时调用图形单位分割：
words.forEach((word) => {
const locale = word.dataset.locale || 'en';
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);
});
});⚠️ 注意：Intl.Segmenter 在 Safari 16.4+、Chrome 110+、Firefox 113+ 中已稳定支持；旧版 Safari 需启用实验性功能或使用 fallback。
?️ 兼容性 fallback：预定义图形单位映射表
对需支持旧版浏览器（如 Safari < 16.4）的项目，建议采用静态映射方式，手动维护各语言的合法图形单位数组：
const LOCALE_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 = LOCALE_GRAPHEMES[locale] || Array.from(word.textContent);该方案完全规避运行时分割风险，确保印地语 "चं"、日语 "ャ" 等复合字符始终以完整图形单位呈现。
? 验证与调试建议
- 使用 Unicode Explorer 检查目标文本的码点组成；
- 在 Safari 开发者工具中 inspect 元素，确认 <span> 内容是否为完整字形（而非残缺码点）；
- 避免在 CSS 中对 .letter 设置 display: inline-block 或 width，以免干扰复杂脚本的连字渲染；
- 字体声明建议显式指定支持 Devanagari 的字体栈：
font-family: 'Noto Sans Devanagari', 'Segoe UI', sans-serif;
通过图形单位精准分割，不仅解决 Safari 中印地语显示异常问题，更保障所有复杂文字（阿拉伯语、泰语、梵文等）在轮播、逐字动画、高亮等交互场景下的语义完整性与视觉准确性。
