正则表达式提取JavaScript中的img标签src属性

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的正则表达式测试器上尝试时，它可以正确提取src。我做错了什么？是使用match()函数错误吗？

- llams48

---

https://dev59.com/unRB5IYBdhLWcg3wiHz7 - epascarello

Answer 1

如果由于某种原因需要获取所有的img标签：

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

那么您可以像这样从数组中提取每个img标签的源链接:

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

- Vi0nik

---

谢谢，正是我所需要的 :D - nbsp

很高兴能帮到有需要的人！ :) - Vi0nik

这正是我正在寻找的！干杯。 - coderpc

完美！你只是在最后一行忘记了一个闭括号。 - Philipp Mochine

非常感谢你，兄弟。在React Native中运行良好。 - Vinicius Petrachin

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>

- Arun P Johny

---

OP，我已经给你了直接回答你问题的答案；但是这里是你应该做的建议。 - Amadan

Answer 3

const src = url.slice(url.indexOf("src")).split('"')[1]

正则表达式让我头疼。哎呀。

在HTML字符串中查找src的索引（问题中命名为var url）， 然后从那里切片， 最后从“'s”处分割数组。 数组中的第二个项目是您的src链接。

- Magic Realism

---

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Aaron Meese

Answer 4

试试这个：

var match = regexp.exec(url);
var src = match[1];

- Amadan

---

谢谢，这个也可以。只是想知道，为什么match[0]返回原始字符串而match[1]返回我们实际寻找的子字符串？结果数组中的第二个元素总是所需的结果吗？ - llams48

@llams48：match[1]是第一个捕获组，match[2]是第二个...而match[0]则是完整匹配。 - Amadan