javascript - 正则表达式对少数 URL 失败

Question

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

1]background-image: url(\2f content\2f dam\2f dx\2fus\2f en\2f error-pages\2f 404-1440x612_edge2.jpg\2fjcr%3acontent\2frenditions\2f cq5dam.tablet_1400.1400.595.jpg); background-position: 50% 50%;

应该是 =>url(\2f content\2f dam\2f dx\2fus\2f en\2f error-pages\2f 404-1440x612_edge2.jpg\2fjcr%3acontent\2frenditions\2f 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=)

标签： javascriptregexparsingurl

Answer 1

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

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

在部分情况下，模式匹配：

• url\s*\(匹配 url，可选空格字符(
• (?:轮换的非捕获组
  • data:image\S+匹配数据：图像和 1+ 个非空白字符
  • |或者
  • (['"]).*?\1从开始报价到结束报价匹配
  • |或者
  • [^()]*匹配除括号外的任何字符 0+ 次
• )关闭非捕获组
• \)匹配)

正则表达式演示