如何从变量中匹配OK、Fail、error词汇并添加对应颜色样式类？

嘿，这个需求太常见了！我来给你几种实用的实现方案，不管你是处理字符串变量还是直接操作DOM里的状态文本都能搞定👇

如果你的状态结果是存放在字符串变量里（比如后端返回的状态文本），可以用正则表达式结合字符串替换，给目标关键词包裹上带样式类的HTML标签：

步骤1：定义状态与样式的映射关系 #

// 把状态词和对应的样式类一一对应起来，方便后续维护
const statusClassMap = {
  'OK': 'green',
  'Fail': 'yellow',
  'error': 'red'
};

步骤2：处理目标字符串变量 #

// 假设这是你的结果变量
let resultText = "任务执行情况：用户登录OK | 数据同步Fail | 文件读取error";

// 生成匹配所有状态词的正则表达式（g修饰符表示全局匹配）
const statusRegex = new RegExp(Object.keys(statusClassMap).join('|'), 'g');

// 替换匹配到的状态词，包裹成带样式类的span标签
resultText = resultText.replace(statusRegex, match => {
  return `<span class="${statusClassMap[match]}">${match}</span>`;
});

// 最后把处理后的内容插入到页面中
document.getElementById('status-container').innerHTML = resultText;

步骤3：添加对应的CSS样式 #

/* 你可以根据需求调整样式，比如颜色、加粗、背景色等 */
.green { 
  color: #27ae60; 
  font-weight: 600;
}
.yellow { 
  color: #f39c12; 
  font-weight: 600;
}
.red { 
  color: #e74c3c; 
  font-weight: 600;
}

如果这些状态词已经存在页面的DOM元素里（比如某个<div>或<p>标签内），可以通过遍历文本节点的方式，精准匹配并包裹样式：

const statusClassMap = {
  'OK': 'green',
  'Fail': 'yellow',
  'error': 'red'
};
const statusRegex = new RegExp(Object.keys(statusClassMap).join('|'), 'g');
// 目标DOM元素
const targetElement = document.getElementById('status-content');

// 递归处理所有文本节点，避免破坏原有DOM结构
function wrapStatusWords(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    const text = node.textContent;
    // 拆分文本和匹配到的状态词
    const parts = text.split(statusRegex);
    const matches = text.match(statusRegex) || [];
    const fragment = document.createDocumentFragment();

    parts.forEach((part, index) => {
      // 添加普通文本部分
      if (part) fragment.appendChild(document.createTextNode(part));
      // 添加带样式的状态词部分
      if (matches[index]) {
        const span = document.createElement('span');
        span.className = statusClassMap[matches[index]];
        span.textContent = matches[index];
        fragment.appendChild(span);
      }
    });

    node.parentNode.replaceChild(fragment, node);
  } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== 'SPAN') {
    // 跳过已经包裹好的span，避免重复处理
    node.childNodes.forEach(child => wrapStatusWords(child));
  }
}

// 执行处理
wrapStatusWords(targetElement);

同样需要搭配方案1里的CSS样式来生效。

• 如果状态词存在大小写不一致的情况（比如ok、ERROR），可以给正则加上i修饰符（new RegExp(..., 'gi')），同时调整映射逻辑来兼容大小写。
• 如果你用React/Vue这类框架，可以把上述逻辑改成框架适配的写法：比如React里用数组拼接JSX元素，Vue里用计算属性或自定义过滤器处理文本。

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