如何用原生JavaScript按索引高亮HTML article元素内的指定字符

核心思路是对原文本按指定索引切割，包裹样式标签后重新替换DOM内容，完整实现代码如下：

<script>
// 获取article DOM元素
const articleEl = document.querySelector('article')
// 获取元素内完整文本内容
const text = articleEl.textContent
// 按要求打印索引8对应的字符
console.log(text[8])

// 按指定索引拆分文本
const beforeText = text.slice(0, 8)
const targetChar = text[8]
const afterText = text.slice(9)

// 拼接带样式标签的内容，更新DOM渲染
articleEl.innerHTML = `${beforeText}<span class="highlighted">${targetChar}</span>${afterText}`
</script>

实现说明 #

• 需要先获取完整的article DOM对象，不能仅保留文本内容，否则无法更新页面DOM
• slice(0,8)遵循左闭右开规则，会提取索引0到索引7的所有字符，刚好是目标字符之前的全部内容
• slice(9)会提取从索引9到文本末尾的所有内容，刚好是目标字符之后的全部内容
• 给元素的innerHTML属性赋值拼接后的字符串，浏览器会自动解析标签并应用对应样式

边界处理建议 #

如果实际使用场景中文本是动态生成的，建议先判断文本长度是否大于等于9，避免索引越界报错：

if (text.length >= 9) {
  // 执行上述拆分替换逻辑
}

内容的提问来源于stack exchange，提问作者Lord Reptilia