从字符串中提取图像src

时间:2013-02-18 15:04:47

标签: javascript regex node.js

我正在尝试将所有图像元素匹配为字符串,

这是我的正则表达式:

html.match(/<img[^>]+src="http([^">]+)/g);

这样可行,但我想提取所有图像的src。所以当我在这个String上执行正则表达式时:

<img src="http://static2.ccn.com/ccs/2013/02/img_example.jpg />

它返回:

"http://static2.ccn.com/ccs/2013/02/img_example.jpg"

5 个答案:

答案 0 :(得分:22)

您需要使用捕获组()来提取网址,如果您想要全局匹配g,即不止一次,则在使用捕获组时,您需要使用{循环中的{1}}(exec在全局匹配时忽略捕获组)。

例如

match

答案 1 :(得分:5)

var myRegex = /<img[^>]+src="(http:\/\/[^">]+)"/g;
var test = '<img src="http://static2.ccn.com/ccs/2013/02/CC_1935770_challenge_accepted_pack_x3_indivisible.jpg" />';
myRegex.exec(test);

答案 2 :(得分:3)

正如Mathletics在评论中提到的,还有其他更简单的方法可以从<img>标签中检索 src 属性,例如通过id,name检索对DOM节点的引用,等等,然后只使用您的引用来提取您需要的信息。如果您需要为所有<img>元素执行此操作,则可以执行以下操作:

var imageTags = document.getElementsByTagName("img"); // Returns array of <img> DOM nodes
var sources = [];
for (var i in imageTags) {
   var src = imageTags[i].src;
   sources.push(src);
}

但是,如果你有一些限制迫使你使用正则表达式,那么提供的其他答案将正常工作。

答案 3 :(得分:2)

也许这就是你要找的东西:

我所做的是稍微修改了你的正则表达式然后使用exec函数来获取匹配字符串的数组。如果您有超过1个匹配项,则其他匹配项将位于results[2]results[3] ...

var html = '<img src="http://static2.ccn.com/ccs/2013/02/CC_1935770_challenge_accepted_pack_x3_indivisible.jpg" />';

var re = /<img[^>]+src="http:\/\/([^">]+)/g
var results = re.exec(html);

var source = results[1];
alert(source);

答案 4 :(得分:0)

您可以使用群组

访问src
                                                   |->captured in group 1
                                   ----------------------------------                
var yourRegex=/<img[^>]+src\s*=\s*"(http://static2.ccn.com/ccs[^">]+)/g;
var match = yourRegex.exec(yourString);
alert(match[1]);//src value