几个 URL 的正则表达式失败

Question

我的正则表达式为 /url\s*$(?!['("]?(?:data):)['"]?([^')"$]*)['"]?([\)]|$)/gi 我们使用它来解析样式标签以获得 URL(ex.backgroundImage)。 URL 失败，例如

1] background-image: url(f contentf damf dxfusf enf error-pagesf 404-1440x612_edge2.jpgfjcr%3acontentfrenditionsf cq5dam.tablet_1400.1400.595.jpg); background-position: 50% 50%;

应该是 => url(f contentf damf dxfusf enf error-pagesf 404-1440x612_edge2.jpgfjcr%3acontentfrenditionsf cq5dam.tablet_1400.1400.595.jpg)

2] 背景图像：url("https://www.investopedia.com/thmb/m3EwtlYfbUhlr9e34AofFj9wok8=/1300x0/filters:contrast(10):brightness(-10):no_upscale()/TopTerms-2bdc464d466944deb41fc07379407600.jpeg")

应该是 => url("https://www.investopedia.com/thmb/m3EwtlYfbUhlr9e34AofFj9wok8=/1300x0/filters:contrast(10):brightness(-10):no_upscale()/TopTerms-2bdc464d466944deb41fc07379407600.jpeg")

它在 contrast(10) 处失败：因为它将 contrast(10) 右括号视为 URL 的结尾。

3]background-image:url('https://cdn.comcast.com/-/media/Images/www_xfinity_com/TV/X1/09072021 Refresh/10X1HeroDesktop.png?rev=d04c61c0-3658-457d-8260-74ef6694c0ed&mw=1280&mh=600&hash=6A1C4FEC8499EE38864BA31D24B9E42220D8C7EB')" background-size: cover;

应该是 => url('https://cdn.comcast.com/-/media/Images/www_xfinity_com/TV/X1/09072021 Refresh/10X1HeroDesktop.png?rev=d04c61c0-3658-457d-8260-74ef6694c0ed&mw=1280&mh=600&hash=6A1C4FEC8499EE38864BA31D24B9E42220D8C7EB')

4]style="position:absolute; background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=) repeat 0 0"

应该是 => url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=)

Answer 1

您可以使用交替 | 来获得不同的格式。

url\s*\((?:data:image\S+|(['"]).*?|[^()]*)\)

在部分中，模式匹配：

url\s*\( 匹配 url，可选的空格字符 (
(?: 交替的非捕获组
- data:image\S+ 匹配 data:image 和 1+ 个非空白字符
- | 或
- (['"]).*? 从开盘价到收盘价匹配
- | 或
- [^()]* 匹配除括号外的任何字符 0 次以上
)关闭非捕获组
\) 匹配 )

Regex demo

几个 URL 的正则表达式失败

Regex is failing for few URLs

javascript

regex

url

parsing