正则表达式提取 img src javascript

Question

我正在尝试从长 html 字符串中提取 img 和 src。

我知道有很多关于如何做到这一点的问题，但我已经尝试过并得到了错误的结果。我的问题只是关于矛盾的结果。

我在用：

var url = "<img height=\"100\" src=\"data:image/png;base64,testurlhere\" width=\"200\"></img>";
var regexp = /<img[^>]+src\s*=\s*['"]([^'"]+)['"][^>]*>/g;
var src = url.match(regexp);

但这会导致 src 没有被正确提取。我不断得到 src =<img height="100" src="data:image/png;base64,testurlhere" width="200"></img>而不是data:image/png;base64,testurlhere

但是，当我在 regex101 的 regex 测试器上尝试此操作时，它会正确提取 src。我究竟做错了什么？是否使用match()了错误的函数>

Answer 1

如果由于某种原因需要获取整个 img 标签：

const imgTags = html.match(/<img [^>]*src="[^"]*"[^>]*>/gm);

然后你可以像这样提取数组中每个 img 标签的源链接：

const sources = html.match(/<img [^>]*src="[^"]*"[^>]*>/gm)
                          .map(x => x.replace(/.*src="([^"]*)".*/, '$1'));

Answer 2

不太喜欢使用正则表达式来解析 html 内容，所以这里有更长的方法

var url = "<img height=\"100\" src=\"data:image/png;base64,testurlhere\" width=\"200\"></img>";
var tmp = document.createElement('div');
tmp.innerHTML = url;
var src = tmp.querySelector('img').getAttribute('src');
snippet.log(src)

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>