如何不使用jQuery为HTML中的特定代码关键词指定CSS样式？

纯CSS无法实现你想要的效果——CSS没有能直接选中特定文本内容的选择器，你尝试的"if","else"{color: blue;}写法不符合CSS语法，浏览器不会解析这种规则。

不过用原生JavaScript可以轻松做到，不用依赖jQuery，也不需要手动给关键词加标签或类，具体实现如下：

核心思路 #

1. 定位页面中的代码块（比如<pre><code>容器）
2. 提取代码文本，用正则匹配目标关键词
3. 把匹配到的关键词替换为带样式的<span>标签，再塞回代码块中

示例代码 #

<!-- 你的代码块 -->
<pre><code>
if (x === 10) {
  for (let i = 0; i < 5; i++) {
    console.log(i);
  } else {
    console.log("Not 10");
  }
}
</code></pre>

<!-- 原生JS高亮脚本 -->
<script>
// 获取页面中的代码块元素
const codeBlock = document.querySelector('pre code');
if (codeBlock) {
  // 定义需要高亮的关键词列表
  const highlightKeywords = ['if', 'else', 'for', 'let', 'const', 'function', 'return'];
  // 生成正则：匹配完整单词（避免误匹配包含关键词的其他词汇）
  const keywordRegex = new RegExp(`\\b(${highlightKeywords.join('|')})\\b`, 'g');
  // 替换文本，给关键词添加蓝色样式
  codeBlock.innerHTML = codeBlock.textContent.replace(keywordRegex, '<span style="color: #0000ff;">$1</span>');
}
</script>

补充说明 #

• 正则中的\b是单词边界，确保只会匹配独立的关键词（比如不会把elsewhere里的else误高亮）
• 你可以根据需求扩展highlightKeywords数组，添加更多需要高亮的关键词
• 如果需要更精细的语法高亮（比如字符串、注释、数字区分颜色），可以扩展正则规则，比如：

  // 匹配双引号包裹的字符串
  const stringRegex = /"([^"]*)"/g;
  codeBlock.innerHTML = codeBlock.innerHTML.replace(stringRegex, '<span style="color: #008000;">"$1"</span>');
  // 匹配单行注释
  const commentRegex = /\/\/(.*)$/gm;
  codeBlock.innerHTML = codeBlock.innerHTML.replace(commentRegex, '<span style="color: #808080;">//$1</span>');
  

内容的提问来源于stack exchange，提问作者Manohar A N