JavaScript中如何使用正则获取并替换url()内的路径字符串

现有一段包含CSS规则的字符串，需要提取url()括号内的资源路径，原写法使用split搭配错误的正则表达式未得到预期结果，同时需要支持路径替换的场景。
示例待处理字符串：

.listView a.toggle::after { content: " "; background: url("/test/images/up_small.svg") center center no-repeat; }

目标提取结果：

/test/images/up_small.svg

你之前写的正则[^(url)\(\".*\")]属于字符集匹配逻辑，方括号内的规则只会匹配单个不在指定集合内的字符，完全无法匹配url("路径")的完整结构，同时搭配split方法做定向内容提取本身就不是合适的实现思路。

通过带捕获组的正则表达式匹配url()结构，可以兼容路径带单引号、双引号、无引号，以及括号前后存在空白字符的常见CSS写法，同时支持提取和替换两种需求。

提取单个URL路径 #

const cssContent = `.listView a.toggle::after { content: " "; background: url("/test/images/up_small.svg") center center no-repeat; }`
// 正则匹配url结构，捕获组1就是目标路径
const urlMatch = cssContent.match(/url\(\s*['"]?([^'")]+)['"]?\s*\)/i)
const targetPath = urlMatch ? urlMatch[1] : ''
// 输出结果：/test/images/up_small.svg

正则各部分说明：

• url\(：匹配固定的url(起始片段，括号为特殊字符需要转义
• \s*：匹配括号后可能存在的任意空白字符
• ['"]?：匹配路径前后可能存在的单引号、双引号（支持无引号写法）
• ([^'")]+)：捕获组，匹配所有不属于引号、右括号的连续字符，即需要的路径内容
• \s*\)：匹配右括号前的空白字符与右括号本身
• 修饰符i：不区分大小写，兼容URL()这类大小写变体写法

提取字符串内所有URL路径 #

如果待处理的CSS片段中存在多个url()声明，添加全局匹配修饰符g循环提取即可：

const globalUrlReg = /url\(\s*['"]?([^'")]+)['"]?\s*\)/gi
const allPaths = []
let currentMatch
while ((currentMatch = globalUrlReg.exec(cssContent)) !== null) {
  allPaths.push(currentMatch[1])
}

替换URL路径 #

直接使用字符串的replace方法即可完成替换，替换单个路径去掉g修饰符，替换所有路径保留g修饰符：

// 将原有路径替换为新路径
const newCssContent = cssContent.replace(
  /url\(\s*['"]?[^'")]+['"]?\s*\)/gi,
  'url("/new/asset/path.svg")'
)

注：如果需要处理包含data URI、转义引号等特殊复杂场景的CSS，可以根据实际业务规则对上述正则做微调，常规静态资源路径场景下上述代码可以直接使用。

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