如何在单个p元素内设置不同文本颜色，将monke文本设红其余为浅蓝色

方案1：手动修改HTML结构+CSS实现（推荐，性能最优） #

只需要两步即可实现需求：

1. 先编写样式，给p元素设置全局浅蓝色，同时定义monke文本的红色高亮样式：

.desc-title {
  color: #87CEEB; /* 浅蓝色，可自行调整色值 */
}
.desc-title .monke-highlight {
  color: #ff0000; /* 红色 */
}

2. 把p标签内所有的monke文本用<span class="monke-highlight">包裹，修改后的HTML代码如下：

<p class="desc-title">
            command activate;<br>
               <span class="monke-highlight">monke</span> brain: insert code.<br>
               <span class="monke-highlight">monke</span> html: evolve level 1.<br>
               <span class="monke-highlight">monke</span> css: evolve level 2.<br>
               <span class="monke-highlight">monke</span> javascript: evolve level 3.<br>
               <span class="monke-highlight">monke</span>: web basics complete.<br>
</p>

方案2：JS动态匹配替换（不想手动改HTML时使用） #

如果不愿意修改原HTML结构，可以用JS自动匹配所有monke文本替换为带样式的span，代码如下：

const descP = document.querySelector('.desc-title');
// 全局匹配所有monke文本替换为带高亮样式的span
descP.innerHTML = descP.innerHTML.replace(/monke/g, '<span class="monke-highlight">monke</span>');

配合方案1中的CSS样式即可生效，你当前的p元素内只有纯文本和br标签，该方案完全适用。

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