JavaScript正则表达式解析URL数组

Question

字符串

url(image1.png), url('image2.png'), url("image3.png")

请注意'和"分隔符。处理它们也会很好，但如果第一个表格被捕获，我会很高兴。

结果

var results = 'image1.png', 'image2.png', 'image3.png';

如何？

我想在javascript中使用正则表达式来解析一个字符串，该字符串用作具有多个背景的元素的CSS属性。目的是使用CSS获取放置在元素背景中的图像的URL。

查看更多：http://www.css3.info/preview/multiple-backgrounds/

的jsfiddle

http://jsfiddle.net/fcx9x59r/1/

Answer 1

对于这个特定字符串[^'"()]+(?=['")])似乎工作正常：

css = "url(image1.png), url('image2.png'), url(\"image3.png\")";

m = css.match(/[^'"()]+(?=['")])/g)
document.write(m)

在一般情况下，你必须求助于一个循环，因为JS没有提供从一次调用中返回所有匹配组的方法：

css = "url(image1.png), something else, url('image2.png'), url(\"image3.png\")";

urls = []
css.replace(/url\(['"]*([^'")]+)/g, function(_, $1) { urls.push($1) });

document.write(urls)

Answer 2

试试这个：

var results = str.match(/url\(['"]?[^\s'")]+['"]?\)/g)
.map(function(s) {
    return s.match(/url\(['"]?([^\s'")]+)['"]?\)/)[1];
});

Demo

Answer 3

您也可以尝试以下代码。

> var s = 'url(image1.png), url(\'image2.png\'), url("image3.png")';
undefined
> var re = /url\((["'])?((?:(?!\1).|[^'"])*?)\1\)/g;
undefined
> var matches = [];
undefined
> var m;
undefined
> while ((m = re.exec(s)) != null) {
......... matches.push(m[2]);
......... }
3
> console.log(matches)
[ 'image1.png', 'image2.png', 'image3.png' ]

DEMO

Answer 4

/url\(([^"']+?)\)|'([^'"]+?)'\)|"([^'"]+?)"\)/g

试试这个。抓住捕获。参见演示。

http://regex101.com/r/qQ3kG7/1