如何在HTML文本中动态修改单个字符的样式？

在网页制作里，我们经常会遇到这样的需求：一段普通文本中，只有某一个或几个字符需要变成红色、加大或者加下划线。直接改整个标签的样式显然不行，那么要怎么在HTML文本中动态地修改单个字符的样式呢？下面介绍具体的实现方式。

使用JavaScript拆分文本节点

最简单的办法是把包含文字的元素内容取出来，按字符拆开，然后重新拼装HTML。我们把要改样式的字符用<span>包起来，再写对应的CSS。

<p id="text">今天天气真好</p>
<style>
  .highlight { color: red; font-weight: bold; }
</style>
<script>
  // 获取段落元素
  var p = document.getElementById('text');
  // 得到纯文本
  var str = p.textContent;
  // 假设要把索引为2的字符（天）高亮
  var index = 2;
  // 拆分成前、中、后三部分
  var before = str.slice(0, index);
  var target = str.slice(index, index + 1);
  var after = str.slice(index + 1);
  // 重新写入带span的内容
  p.innerHTML = before + '<span class="highlight">' + target + '</span>' + after;
</script>

这种方法直观易懂，适合字符位置固定的场景。如果文本会变化，记得每次先取最新的textContent。

利用Range对象精准选中字符

当文本结构比较复杂，不想破坏原有节点时，可以用Range来框住某个字符范围，然后给它包裹新元素。

function highlightChar(container, charIndex) {
  var range = document.createRange();
  // 选中container文本节点的第charIndex个字符
  range.setStart(container.firstChild, charIndex);
  range.setEnd(container.firstChild, charIndex + 1);
  var span = document.createElement('span');
  span.className = 'highlight';
  // 把选中的内容移入span
  range.surroundContents(span);
}

var p = document.getElementById('text');
highlightChar(p, 1);

注意这种方式要求container的直接子文本节点连续，否则setStart会报错。

通过CSS类动态切换

如果高亮规则统一，我们可以提前写好类，用脚本控制span的增删，而不是反复写innerHTML。

实际项目中，根据文本是否绑定了事件来选方案即可。掌握这些，你就能轻松应对HTML里单个字符样式的动态修改了。

HTMLJavaScriptDOM操作字符样式textContent修改时间：2026-07-25 14:12:16