10

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

4

6 回答 6

13

使用Regexper 之类的工具，我们可以查看您的正则表达式匹配的内容：

正则表达式图像

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

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

相反，我们需要做的是 match just "url(" [any character] ")"。我们可以这样做：

/url\(.*?\)/ig

固定正则表达式

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

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

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

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

修正修正

于 2013-10-22T12:44:10.483 回答
7

尝试：

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

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

于 2013-10-22T12:40:33.853 回答
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/

于 2013-10-22T12:54:16.947 回答
3

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

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

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

于 2016-08-12T15:49:04.470 回答
2

使用以下正则表达式：

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

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

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

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

于 2013-10-22T12:40:44.937 回答
0

你只是没有考虑收盘价

网址\(.*g\'\)

和锚定

于 2013-10-22T12:40:50.170 回答