如何修改HTML pre标签下code元素内指定关键词的颜色？

首先得说，你之前的代码问题出在几个地方：比如把DOM元素直接拼进字符串里（keyword[0]是元素对象，不是文本内容），而且replace默认只替换第一个匹配项，也没处理多个关键词的情况。咱们一步步来解决这个问题，同时保证高效性。

核心思路 #

要高效处理10-15个关键词的统一高亮，关键是：

• 用正则表达式的全局匹配一次性命中所有关键词，避免多次遍历DOM
• 把关键词存在数组里，动态生成正则，方便后续维护
• 一次性更新DOM内容，减少重绘开销

完整代码实现 #

修正后的HTML结构 #

先把你原来HTML里的错误（多余的</div>）修正，保证结构合法：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre class="language-sas1">
<code class="language-sas">
<span class="token keyword">data</span> keep_vars <span class="token punctuation">;</span>
<span class="t">set</span> sashelp<span class="token punctuation">.</span>citimon<span class="token punctuation">;</span>
SET test_data;
</code>
</pre>
</body>
</html>

JavaScript实现 #

// 1. 获取目标code元素
const codeElement = document.querySelector('.language-sas');
if (!codeElement) return; // 避免元素不存在报错

// 2. 定义需要高亮的关键词数组
const keywords = ['set', 'data', 'other-keyword1', 'other-keyword2']; // 这里添加你的10-15个关键词

// 3. 生成正则表达式：全局匹配+忽略大小写（如果不需要区分大小写就去掉i）
// 注意：如果关键词包含正则特殊字符（如.、+），需要先转义
const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const keywordRegex = new RegExp(keywords.map(escapeRegExp).join('|'), 'gi');

// 4. 一次性替换所有匹配项
codeElement.innerHTML = codeElement.innerHTML.replace(keywordRegex, (match) => {
  return `<span style="color: red;">${match}</span>`;
});

代码关键点解释 #

• 正则转义：如果你的关键词里有.、*这类正则特殊字符，escapeRegExp函数会把它们转义成普通字符，避免正则匹配出错
• 全局匹配：正则的g标志会替换所有匹配到的关键词，而不是只替换第一个
• 忽略大小写：i标志会同时匹配set、SET、Set，如果需要严格区分大小写，去掉i即可
• 一次性DOM更新：只修改一次innerHTML，比多次修改更高效，减少浏览器的重排重绘

为什么你之前的代码失效？ #

你原来的代码里，var externalHtml = '<span style="color:red">'+keyword[0]+'</span>'这里的keyword[0]是DOM元素对象，不是文本内容，所以拼接后会变成[object HTMLElement]，导致显示错误。而且replace('set', ...)只会替换第一个set，没法处理多个匹配和其他关键词。

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