什么正则表达式匹配所有出现的css url？答案

【问题标题】：What regex to match all occurrences of css urls?什么正则表达式匹配所有出现的css url？
【发布时间】：2013-10-31 08:04:06
【问题描述】：

我有一个带有一堆背景图片网址的 css 文件：

.alert-01 {
  background: url('img/alert-01.jpg') center no-repeat;
}
.alert-02 {
  background: url('img/alert-02.jpg') center no-repeat;
}
.alert-03 {
  background: url('img/alert-03.jpg') center no-repeat;
}
.alert-04 {
  background: url('img/alert-04.jpg') center no-repeat;
}

我想写一个正则表达式来去除网址。

所以最初我会得到：

url('img/alert-01.jpg')
url('img/alert-02.jpg')
url('img/alert-03.jpg')
url('img/alert-04.jpg')

然后我可以替换位以将它们变成 html <img> 块。

最后一点我很好，但我的正则表达式技能有点生疏。

我最近的尝试是这样的：/^url$.*?g$$/ig

有什么帮助吗？

顺便说一句，我都是用 javascript 做的，但是语言不应该真正影响正则表达式。

提前致谢！

另外，请注意，我不能保证文件将始终为 jpg 并且可能是 jpeg、png 等。此外，背景中的参数将始终相同。因此，为什么我只想提取 url 部分。

【问题讨论】：

标签： javascript css regex

【解决方案1】：

使用Regexper 之类的工具，我们可以看到您的正则表达式匹配的是什么：

如您所见，这样做存在一些问题：

假设“url(”位于行首。
假设内容以“g)”结尾，而您的所有示例都以“g')”结尾。
这假定“g)”之后是行尾。

我们需要做的只是匹配"url(" [any character] ")"。我们可以这样做：

/url\(.*?\)/ig

请注意，如果图像类型是 .gif 或任何其他非 jpg、jpeg 或 png，我已经删除了 URL 以“g”结尾的要求。

编辑：正如Seçkin M 在下面评论的那样：如果我们不想要任何其他网址怎么办；例如具有 .ttf 或 .eot 的字体？定义允许的扩展组的最简单方法是什么？

为此，我们可以通过将扩展放在括号中来预先定义我们正在寻找的扩展，用| 分隔。例如，如果我们只想匹配 gif、png、jpg 或 jpeg，我们可以使用：

/url\(.*?(gif|png|jpg|jpeg)\'\)/ig

【讨论】：

很好的答案！但是如果我们不想要任何其他网址怎么办？例如具有 .ttf 或 .eot 扩展名的字体？定义允许的扩展组的最简单方法是什么？
@SeçkinM。好问题！我已经修改了我的答案以包括如何处理它。 :)

【解决方案2】：

试试：

/url\(.*?g'\)/ig

您的错误是在正则表达式中包含^ 和$，这会将其锚定到输入字符串的开头和结尾。而且你忘了允许报价。

【讨论】：

【解决方案3】：

/^url\((['"]?)(.*)\1\)$/

使用 jQuery：

var bg = $('.my_element').css('background-image'); // or pure js like element.style.backgroundImage
    bg = /^url\((['"]?)(.*)\1\)$/.exec(bg);
    bg = bg ? bg[2] : false;
if(bg) {
// Do something
}

与 Chrome / Firefox 交叉

http://jsfiddle.net/KFWWv/

【讨论】：

【解决方案4】：

我是从谷歌来的这个问题。旧的，但没有一个答案是关于 data:image/* 网址的讨论。这是我在另一个仅匹配 http 或相对 url 的 google 结果中发现的。

/url\((?!['"]?(?:data):)['"]?([^'"\)]*)['"]?\)/g

我希望这会帮助其他来自搜索引擎的人。

【讨论】：

【解决方案5】：

使用以下正则表达式：

/\burl\([^)]+\)/gi

没有必要使用锚点（^ 和 $），因为它们会限制整个字符串输入的匹配，因此会失败。要单独捕获图像路径，以便在构造 <img> 标记时可以轻松使用它（并避免使用子字符串），请使用：

/\burl\('([^']+)'\)/gi

这会在第一组中捕获img/alert-xx.jpg。

【讨论】：

【解决方案6】：

你只是没有考虑收盘价

网址$.*g\'$

锚定

【讨论】：