如何使用正则表达式仅移除SVG字符串中path元素的fill属性

原有正则失效原因 #

你之前使用的正则/(?:<path)*fill=["|'](.*?)["|']\s*/g存在逻辑错误：(?:<path)*表示匹配0次或多次<path字符串，并没有真正将fill属性的匹配范围限定在<path>标签内部，因此会匹配到所有元素上的fill属性，造成误删。

方案1：正则替换（适用于结构简单的SVG字符串） #

使用约束匹配范围的正则，仅匹配<path>开标签内部的fill属性，不会跨标签匹配其他元素的属性，代码如下：

const processedSvg = svgString.replace(
  /<path\b([^>]*?)\s+fill=(["']).*?\2([^>]*?)>/g,
  '<path$1$3>'
)

正则逻辑说明：

• 以<path\b作为匹配起始，通过单词边界\b避免匹配到名称以path开头的其他自定义标签
• [^>]*?做非贪婪匹配，且排除标签闭合符>，保证匹配范围始终在单个path开标签内部，不会跨到其他标签
• (["']).*?\2兼容单引号、双引号包裹的fill属性值，通过反向引用保证前后引号类型一致
• 替换时仅保留path标签内除fill属性外的其他内容，不会修改g等其他标签的任何属性

用你提供的示例SVG测试，输出结果完全符合预期，<g>标签的fill属性会完整保留。

方案2：DOM解析（适用于结构复杂的SVG，稳定性更高） #

正则处理类HTML/XML字符串存在天然的边缘case风险，如果你的SVG存在属性换行、特殊转义字符、嵌套结构等复杂情况，推荐用原生DOM解析API处理，完全遵循SVG语法规则，不会出现误匹配：

// 将SVG字符串解析为DOM文档对象
const parser = new DOMParser()
const svgDom = parser.parseFromString(svgString, 'image/svg+xml')

// 选中所有path元素，移除fill属性
svgDom.querySelectorAll('path').forEach(pathEl => {
  pathEl.removeAttribute('fill')
})

// 将处理后的DOM序列化为SVG字符串
const processedSvg = new XMLSerializer().serializeToString(svgDom.documentElement)

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