Javascript .replace() 相同的字符不同的结果

Question

我有一个词:google，我正在将每个字符更改为特定的颜色，但我不知道如何让字母“o”有不同的颜色

这是我的 JS:

var text = $("#typed-strings").html().replace(/e/g, '<span class="red">e</span>').replace(/g/g, '<span class="blue">g</span>').replace(/l/g, '<span class="green">l</span>').replace(/o/g, '<span class="yellow">o</span>');
$("#typed-strings").html(text);

.red {
  color: rgb(219, 50, 54);
}
.blue {
  color: rgb(72, 133, 237);
}
.green {
  color: rgb(60, 186, 84);
}
.yellow {
  color: rgb(244, 194, 13);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="typed-strings">google</div>

也许有人有想法？

谢谢!

编辑:

感谢大家如此丰富的回复，我的问题是由版主编辑的，也许这就是为什么你看到了一些变化。 我在 heroku 上上传了这个试用版，让事情变得更简单，但是，是的，我有这么长的文本，每次出现字母“o”我都希望它是红色或黄色，html 并不重要，因为这纯粹是为了可视化，但我从对话中学到了很多东西 - 谢谢! 那是应用程序: https://googlefonts.herokuapp.com

编辑 2: 还在页面中添加了非工作版本

Answer 1

正如其他人所指出的，您的问题是您要更换 g和 <span class="...">g</span> 然后替换最后一个替换类中 l 的字符串中的所有 l。

另一种解决方法是使用函数进行替换。使用函数时，每个匹配项都会依次替换，您所做的任何替换都将被忽略。

除此之外，您还可以使用单独的键和 bool 值来跟踪您是否已经替换了第一个 o。我将此添加到我的示例中，使用 bool 值作为字母 o 的替换键的一部分简化事情。

var replacements = {
  g: '<span class="blue">g</span>',
  o0: '<span class="red">o</span>',
  o1: '<span class="yellow">o</span>',
  l: '<span class="green">l</span>',
  e: '<span class="red">e</span>'
};

var ele = $("#typed-strings");
var text = ele.html();

var firstODone = false;
text = text.replace(/[gogle]/g, function (letter) {
  var key = letter;
  if (key === 'o') {
    key = key + (+firstODone); //Convert the boolean to an integer, 0 or 1
    firstODone = true;
  }
 
  return replacements[key];
})
  
 ele.html(text);

.red {
  color: rgb(219, 50, 54);
}
.blue {
  color: rgb(72, 133, 237);
}
.green {
  color: rgb(60, 186, 84);
}
.yellow {
  color: rgb(244, 194, 13);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="typed-strings">google</div>

如果您只为此需要 jQuery，您也可以轻松摆脱它。您可以使用 var ele = document.getElementById("typed-strings"); 得到你的元素和 ele.innerHTML 获取元素的 html 并将其设置为元素。 例如:ele.innerHTML = text