如何用JavaScript为文本中指定单词的每个字母设置不同颜色？

要替换元素内原有的"rainbow"单词为彩色字母版本，核心思路是匹配文本中的目标单词并替换为格式化后的HTML，而非追加新内容。以下是修改后的实现代码：

<div id="here">Mr Blue has a blue house and a blue car and a rainbow dog</div>

<style>
/* 定义颜色类对应的样式 */
.red { color: red; }
.orange { color: orange; }
.purple { color: purple; }
</style>

<script>
const placeHere = document.getElementById("here");
const colors = ["red", "orange", "purple"];

// 生成单个单词的彩色HTML字符串
const getRainbowWordHtml = (word) => {
  return word.split("").map((letter, index) => 
    `<span class="${colors[index % colors.length]}">${letter}</span>`
  ).join("");
};

// 替换原文本中的目标单词
const targetWord = "rainbow";
// 使用正则匹配独立单词（避免误匹配包含该词的其他字符串）
const regex = new RegExp(`\\b${targetWord}\\b`, "g");
// 获取原文本并执行替换
const originalText = placeHere.textContent;
const newHtml = originalText.replace(regex, getRainbowWordHtml);

// 更新元素的HTML内容
placeHere.innerHTML = newHtml;
</script>

关键说明： #

• 精准匹配单词：用\b（单词边界）确保只匹配独立的"rainbow"，不会触发类似"rainbowish"这类包含该词的字符串；g修饰符实现全局匹配所有出现的目标单词。
• 循环应用颜色：通过index % colors.length让颜色数组循环作用于每个字母，避免因单词长度超过颜色数量导致报错。
• 保留原文本结构：先通过textContent获取纯文本内容，替换完成后再用innerHTML赋值回元素，既完成了目标单词的着色，又保留了原文本的其他内容和结构。

额外优化点： #

• 如果需要支持大小写不敏感匹配（比如匹配"Rainbow"或"RAINBOW"），可给正则添加i修饰符：new RegExp(\b${targetWord}\b, "gi")。
• 若目标单词包含正则特殊字符（如.、*），需先对单词进行转义，避免正则语法错误：

  const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  const regex = new RegExp(`\\b${escapeRegExp(targetWord)}\\b`, "g");
  

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