如何使用正则表达式匹配带color样式的HTML标签并提取色值完成替换

核心正则逻辑 #

使用正则捕获三个核心部分：原标签名（用于精准匹配对应闭合标签，避免跨标签匹配错误）、style属性内的color色值、标签包裹的实际内容，匹配规则兼容单/双引号包裹的style属性，支持十六进制、rgb/rgba、命名颜色等各类color值格式。

正则表达式（JS环境可用）：

/<([a-zA-Z0-9]+)\b[^>]*?style\s*=\s*["'][^"']*?color\s*:\s*([^;"']+)[^"']*["'][^>]*>([\s\S]*?)<\/\1>/gi

替换模板：

<color=$2>$3</color>

捕获组说明：

• $1：原HTML标签名，用于和闭合标签配对，避免匹配错乱
• $2：提取到的color属性值
• $3：原标签内部包裹的所有内容

可运行示例代码 #

// 原始待处理文本
const rawHtml = `
<p style="color:#ffffff;">content</p>
<span style="font-size:16px;color:#ff0000;">带其他样式的内容</span>
<i style="color:rgb(0,0,255);font-weight:bold;">rgb格式颜色内容</i>
`
// 执行替换
const colorTagReg = /<([a-zA-Z0-9]+)\b[^>]*?style\s*=\s*["'][^"']*?color\s*:\s*([^;"']+)[^"']*["'][^>]*>([\s\S]*?)<\/\1>/gi
const result = rawHtml.replace(colorTagReg, '<color=$2>$3</color>')

// 输出结果验证
console.log(result)
/*
输出内容：
<color=#ffffff>content</color>
<color=#ff0000>带其他样式的内容</color>
<color=rgb(0,0,255)>rgb格式颜色内容</color>
*/

边界说明 #

• 该正则适用于常规HTML写法：style属性使用单/双引号包裹、标签属性内无嵌套尖括号
• 如果存在多层同名标签嵌套的复杂结构，优先使用DOM解析方式处理，正则处理HTML存在天然的场景边界，无法覆盖100%极端HTML写法

内容的提问来源于stack exchange，提问作者D.M