Question

我有一句话：谷歌，我正在将每个角色更改为特定的颜色，但我无法弄清楚如何使字母变成“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

<script type="text/javascript">


$(document).ready(() => {
    let oldStr = $("#typed-strings").html();
    let newStr = '';

    for(let i = 0; i < oldStr.length; i++) {
        if (oldStr[i] === 'g') {
            newStr += '<span class="blue">g</span>'
        } else if (oldStr[i] === 'o') {
            newStr += '<span class="yellow">o</span>'
        }
        // Add other letters here
    }

    $("#typed-strings").html(newStr);
});


</script>

Answer 2

你可以创建一个函数来返回字母的颜色，并使用replace方法和回调函数，如下所示：

var colors = {
    g: 'blue',
    o: 'yellow',
    l: 'green',
    e: 'red'
};
function wrapTheLetter(letter) {
    var colorClass = colors[letter];
    if (letter == 'o') {
        // update it's color for the future
        colors.o = 'grey';
    }
    return '<span class="' + colorClass + '">'+letter+'</span>';
}
var text = $("#typed-strings").html().replace(/\w/g, wrapTheLetter);
$("#typed-strings").html(text);

Javascript .replace（）相同的字符不同的结果

2 个答案: