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

Question

我有一个带有一堆背景图片 url 的 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。

所以最初我会得到:

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

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

我对最后一点没意见，但我的正则表达式技能有点生疏。

我最近的尝试是这样的:/^url\(.*?g\)$/ig

有什么帮助吗？

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

提前致谢!

此外，请注意，我无法保证文件始终为 jpg，也可能为 jpeg、png 等。此外，背景参数始终相同。因此，为什么我只想提取 url 部分。

Answer 1

使用类似 Regexper 的工具我们可以看到您的正则表达式匹配了什么:

如您所见，这有一些问题:

1. 这假设“url(”在行的开头。
2. 假设内容以“g)”结尾，而您所有的示例都以“g')”结尾。
3. 假设“g)”之后是行尾。

我们需要做的只是匹配 "url("[any character] ")"。我们可以使用:

/url\(.*?\)/ig

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

---

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

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

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