什么正则表达式匹配所有出现的CSS网址？

Question

我有一个带有一堆背景图片网址的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等。另外，背景中的参数将始终相同。因此，为什么我只想提取网址部分。

Answer 1

使用像Regexper这样的工具，我们可以看到正则表达式匹配的内容：

正如您所看到的，这有一些问题：

1. 这假定“url（”位于该行的开头。
2. 这假设内容以“g）”结尾，而所有示例都以“g”结尾。“
3. 这假定在“g）”之后是该行的结尾。

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

/url\(.*?\)/ig



请注意，如果图片类型为.gif或任何其他非jpg，jpeg或png，我已删除了以“g”结尾的网址要求。

---

修改：正如Seçkin M评论如下：如果我们不想要任何其他网址，该怎么办？比如有.ttf或.eot的字体？定义允许的扩展组的最简单方法是什么？

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

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

Answer 2

尝试：

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

您的错误是在正则表达式中包含^和$，它将其锚定到输入字符串的开头和结尾。而你忘记了引用。

Answer 3

使用以下正则表达式：

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

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

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

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

Answer 4

/^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/

Answer 5

我从谷歌那里得到了这个问题。旧的，但答案都没有讨论数据：image / * 网址。以下是我在另一个谷歌搜索结果中找到的仅与http或相对网址匹配的内容。

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

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

Answer 6

你只是没有考虑收尾报价

 url\(.*g\'\)

和锚定