首字母高亮必须拆字，因CSS :first-letter受限且不支持动态控制；可靠方法是用TreeWalker遍历文本节点，还原HTML实体后按单词边界或Unicode字符规则识别首字母并包裹span。

首字母高亮必须拆字，不能靠 CSS :first-letter

:first-letter 只作用于块级元素的**第一个排版字符**，遇到  、

<br>

、<span></span> 或内联元素包裹就会失效；更关键的是它不支持 JavaScript 动态控制——你没法在用户点击后才给某个单词首字母加 mark。真正要“动态”高亮任意位置的首字母（比如搜索结果中每个匹配词的首字母），唯一可靠路径是：把目标文本节点拆成单字符数组，对每个字符创建独立 span，再按需加类或 mark。

拆字时必须跳过 HTML 标签和实体，只操作纯文本节点

直接 el.innerHTML.split('') 会撕开所有标签，导致 DOM 崩溃。正确做法是用 document.createTreeWalker(el, NodeFilter.SHOW_TEXT) 遍历所有文本节点，对每个节点的 textContent 拆分：

• 遇到 &、、<code>> 等实体，先用正则还原为原始字符再拆（如 → 空格）
• 跳过空字符串节点（换行、缩进产生的空白文本节点）
• 对非空文本节点，逐字符判断是否为“单词首字母”：用 /\b\w/g 匹配单词边界 + 字母，但要注意中文、日文无 \b，需改用 (?

动态加高亮要防样式污染和事件丢失

给首字母套 span 后，常见坑有三个：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• span 默认是内联元素，若父容器设了 line-height: 1 或 font-size: 0，会导致首字母垂直偏移或消失——必须显式设 display: inline-block 和 vertical-align: baseline
• 如果高亮层用了 background: linear-gradient()，别直接写在 span 上，否则 Safari 会渲染错乱；应额外加一层 before 伪元素承载渐变背景
• 用户复制文本时，span 会带入冗余结构；若需干净复制，得监听 copy 事件，临时替换 getSelection().toString() 的返回值

中文/混合文本的首字母判定不能依赖 toUpperCase()

中文没有大小写，但“首字母高亮”常指每个词/短语的首个汉字或拼音首字母。这时候 char.toUpperCase() !== char 完全失效。可行方案有两个：

立即学习“前端免费学习笔记（深入）”；

• 用 pinyin-pro 库把汉字转拼音，取首字母（注意多音字需上下文，简单场景可默认取第一读音）
• 按标点和空白切分后，取每段的首字符，再用 /^[\u4e00-\u9fa5]$/ 判断是否为汉字——这是最轻量、兼容性最好的方式
• 混合英文时，单独处理 /^[a-zA-Z]/，避免把“iPhone”的 i 当小写忽略

首字母动态高亮真正的复杂点不在视觉效果，而在文本边界判定和 DOM 结构保真——你永远不知道用户粘贴进来的是带格式的 Word 片段、Markdown 表格，还是嵌套了 iframe 的富文本。所以任何基于 innerHTML 的粗暴替换都不可靠，必须守住“只动文本节点、不动结构节点”这条线。