请写一个正则获取html源码中所有img标签的src地址

319 阅读1分钟

"```markdown

正则获取HTML源码中所有img标签的src地址

正则表达式是一种强大的工具,可以用于在文本中查找和匹配特定的模式。在HTML源码中,我们经常需要获取所有img标签的src地址,以便进行进一步的处理或展示。下面是使用正则表达式获取HTML源码中所有img标签的src地址的方法。

const html = `
<html>
  <body>
    <h1>Example HTML</h1>
    <img src=\"image1.jpg\" alt=\"Image 1\">
    <img src=\"image2.jpg\" alt=\"Image 2\">
    <img src=\"image3.jpg\" alt=\"Image 3\">
  </body>
</html>
`;

const regex = /<img[^>]+src=\"?([^\"\\s]+)\"?[^>]*>/g;
const matches = html.match(regex);
const srcList = matches.map((match) => {
  const srcRegex = /src=\"([^\"]+)\"/;
  const srcMatch = match.match(srcRegex);
  return srcMatch[1];
});

console.log(srcList);

在上述代码中,我们首先定义了一个包含HTML源码的字符串变量html。然后,我们使用正则表达式/<img[^>]+src=\"?([^\"\\s]+)\"?[^>]*>/g来匹配所有的img标签,并将匹配结果存储在matches数组中。

接下来,我们使用map方法遍历matches数组,对每个匹配到的img标签进行进一步处理。我们使用另一个正则表达式/src=\"([^\"]+)\"/来提取出每个img标签的src地址,并将提取结果存储在srcMatch数组中。

最后,我们将所有的src地址存储在srcList数组中,并通过console.log输出。

运行上述代码,我们可以得到如下输出:

[ 'image1.jpg', 'image2.jpg', 'image3.jpg' ]

这就是使用正则表达式获取HTML源码中所有img标签的src地址的方法。我们可以根据需要进行进一步的处理,比如下载这些图片或者展示在页面上。

希望这篇文章能对你有所帮助!

"