从字符串中提取图像 src答案

【问题标题】：Extract image src from a string从字符串中提取图像 src
【发布时间】：2013-02-03 01:26:57
【问题描述】：

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

这是我的正则表达式：

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

这可行，但我想提取所有图像的src。所以当我在这个字符串上执行正则表达式时：

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

它返回：

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

【问题讨论】：

不要使用正则表达式解析html。
@Tomirammstein，当 Javascript 内置了 DOM 时，为什么还要使用正则表达式？
我使用的是node.js，所以无法解析成HTML树
@Tomirammstein 看看这个：stackoverflow.com/questions/7977945/html-parser-on-nodejs
@Tomirammstein 难道你不认为首先将这个问题标记为node.js会有帮助吗？

标签： javascript regex node.js

【解决方案1】：

你需要使用一个捕获组()来提取url，如果你想全局匹配g，即不止一次，当使用捕获组时，你需要使用exec在一个循环（match 在全局匹配时忽略捕获组）。

例如

var m,
    urls = [], 
    str = '<img src="http://site.org/one.jpg />\n <img src="http://site.org/two.jpg />',
    rex = /<img[^>]+src="?([^"\s]+)"?\s*\/>/g;

while ( m = rex.exec( str ) ) {
    urls.push( m[1] );
}

console.log( urls ); 
// [ "http://site.org/one.jpg", "http://site.org/two.jpg" ]

【讨论】：

改成这个了。否则，它不会拾取所有图像。 /]+src="([^">]+)/g
有时img标签在“src”属性之后可能有高度或其他属性。所以正则表达式应该是rex = /]+src="?([^"\s] +)"?[^>]*\/>/g;
似乎这个正则表达式不适用于所有 img 标签，但这适用于 /]*\/([^">]*?)) ".*?>/g;
这个 regx 不起作用，因为我们将整个 html 作为字符串，我想从中找出图像 url。你能帮我吗？ stackoverflow.com/questions/57883657/…

【解决方案2】：

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);

【讨论】：

感谢您的回答。它帮助了我。我只想添加这个：var src = myRegex.exec(test); console.log('SRC: ' + src[1]);
这个 regx 不起作用，因为我们将整个 html 作为字符串，我想从中找出图像 url。你能帮我吗？ stackoverflow.com/questions/57883657/…

【解决方案3】：

正如 Mathletics 在评论中提到的，还有其他更直接的方法可以从 <img> 标签中检索 src 属性，例如通过 id、name、class 检索对 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);
}

但是，如果您有一些限制迫使您使用正则表达式，那么提供的其他答案也可以正常工作。

【讨论】：

【解决方案4】：

也许这就是你要找的：

我所做的只是稍微修改了您的正则表达式，然后使用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);

【讨论】：

【解决方案5】：

您可以使用 html 解析器并完全避免使用正则表达式。

var parser = require('node-html-parser');

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

parser.parse(html).querySelector('img').getAttribute('src')

=> 'http://static2.ccn.com/ccs/2013/02/CC_1935770_challenge_accepted_pack_x3_indivisible.jpg'

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。

【解决方案6】：

您可以使用 groups

访问 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

【讨论】：