html - 寻找一个正则表达式来匹配背景图片url中的所有情况

Question

我正在尝试找到一个正则表达式，它能够处理 html 中的 3 种情况。

例如，

1. 背景图片:url( https://www.aaa.com/xxx/picture.png );背景大小:100%...
2. 背景图片:url("https://www.aaa.com/xxx/picture(1_2)_pic(23).png")
3. 背景图片:url( https://www.aaa.com/xxx/picture )

在这 3 个案例中，我想提取 3 个网址:

1. https://www.aaa.com/xxx/picture.png
2. https://www.aaa.com/xxx/picture(1_2)_pic(23).png
3. https://www.aaa.com/xxx/picture

我创建了一个正则表达式，它只能提取前两个。不幸的是，无法想象正则表达式能够在该正则表达式中获得第三种情况(不带扩展名的 URL 路径)。

到目前为止我想到了什么:

/background(?:-image|):[\s]*url[(][\"']?(https?:\/\/[^’\”]+[.](?:gif|png))[‘\”]?/g

感谢所有帮助。

Answer 1

此正则表达式模式将嵌套括号视为 url() 括号之间的可选重复组。

background-image:\s*url\(['"]?((?:\S*?\(\S*?\))*\S*?)['"]?\)

Javascript 片段:

const text = `background-image: url(https://www.aaa.com/xxx/picture.png); background-size: 100%...
background-image: url("https://www.aaa.com/xxx/picture(1_2)_pic(23).png")
background-image: url(https://www.aaa.com/xxx/picture)
`;
let re = /background-image:\s*url\(['"]?((?:\S*?\(\S*?\))*\S*?)['"]?\)/g;
let arr = [...text.matchAll(re)].map(x=>x[1]);
console.log(arr);