在网页交互里，有时需要把一段文字中的某一个字变成红色，或者加上下划线，而其他字保持不变。这种需求看起来简单，但原生DOM并不会提供直接改“第N个字符”样式的方法，因为样式只能挂在元素上，不能挂在纯文本上。要解决这个问题，核心思路是先定位字符所在的文本节点，再把目标字符单独包进一个带样式的元素里。
使用splitText拆分文本节点实现单字符样式修改
每个HTML元素里的文字，在DOM中通常以文本节点的形式存在。文本节点没有style属性，所以我们无法只给“第3个字”上色。浏览器提供了splitText方法，它能在指定偏移位置把一个文本节点切成两个相邻的文本节点。配合document.createElement创建span元素，就能把切出来的那一段字符移入span并设样式。
具体步骤是：先拿到包含文字的父元素，取它的第一个子节点（文本节点），调用splitText(index)得到后半段，再对原节点调用splitText(index+1)切出单个字符。此时中间那段就是我们要的字符，用span包裹即可。下面代码演示把“你好世界”的“世”字变红：
// 假设页面有 <p id="tip">你好世界</p>
var p = document.getElementById('tip');
var textNode = p.firstChild;
// 先切出“你好”
textNode.splitText(2);
// 此时 textNode 是“你好”，后面是新节点“世界”
var rest = textNode.nextSibling;
// 再从“世界”里切出“世”
rest.splitText(1);
// 现在 rest 是“世”，rest.nextSibling 是“界”
var span = document.createElement('span');
span.style.color = 'red';
rest.parentNode.insertBefore(span, rest);
span.appendChild(rest);
这种方式的优点是只改动必要结构，原文本其余部分不受影响，也不会破坏事件绑定。缺点是当文本来自复杂子元素时需先遍历找到准确文本节点。对于单纯文字容器，它是最直观可靠的方案。
利用Range对象与surroundContents精准包裹字符
另一种更现代的做法是使用Range API。Range可以描述文档里的任意连续片段，包括跨节点的字符范围。通过设定起始和结束偏移，能直接选中单个字符，再用surroundContents把它包进span。相比手动splitText，Range在处理混合节点时更灵活。
以下示例同样把“你好世界”的“世”字标红。注意Range的偏移是相对于特定节点的，若文字就在单一文本节点内，设置起止偏移即可：
var p = document.getElementById('tip');
var node = p.firstChild;
var range = document.createRange();
range.setStart(node, 2);
range.setEnd(node, 3);
var span = document.createElement('span');
span.style.color = 'red';
try {
range.surroundContents(span);
} catch (e) {
// 如果范围跨元素会抛错，这里单节点内不会
console.log('包裹失败', e);
}
surroundContents在范围完全处于一个文本节点内时非常好用，代码也更短。但如果目标字符恰好位于两个不同子元素交界处，直接调用会抛出异常，此时仍需先拆分节点。实际项目中，若文字结构固定，优先用Range；若结构动态，splitText更稳。
通过正则替换innerHTML的取舍与风险
还有人习惯用正则把特定字换成带span的字符串，再写回innerHTML。例如el.innerHTML = el.innerHTML.replace('世', '<span style="color:red">世</span>')。这种做法写起来快，但会销毁原DOM树上所有子元素与事件监听，导致内存泄漏或交互失效。
我们对比三种方案：splitText不破坏其他节点，适合有事件的元素；Range简洁但受限跨节点；正则最简单但副作用大。若页面只是静态展示文本，正则可接受；若容器内按钮、输入框较多，绝不能用innerHTML重刷。下面给出一段对比表格帮助理解：
| 方案 | 是否保留原事件 | 跨节点能力 | 代码复杂度 |
|---|---|---|---|
| splitText | 是 | 需手动处理 | 中 |
| Range | 是 | 同节点内强 | 低 |
| 正则innerHTML | 否 | 强但粗暴 | 低 |
综合来看，动态修改单字符样式应优先采用节点拆分或Range方案，并封装成可复用函数。比如接收元素、索引、样式对象三个参数，内部自动判断用哪种方式，既安全又方便后续维护。这样在搜索高亮、打字机效果等场景都能直接调用，不影响页面其他功能。
JavaScriptHTML_text_stylingDOM_manipulation修改时间：2026-08-14 04:33:25