如何从RSS返回的JS HTML变量中提取img的src属性

下面给你几种实用的JavaScript方法，从包含HTML片段的变量a里提取img标签的src属性：

方法一：使用DOMParser（推荐，标准且可靠） #

这是处理HTML片段最稳妥的方式，能正确解析DOM结构，避免正则的各种坑：

// 假设变量a是包含HTML的字符串
const parser = new DOMParser();
const doc = parser.parseFromString(a, 'text/html');
const imgElements = doc.querySelectorAll('img');

// 提取所有src值到数组里
const srcList = Array.from(imgElements).map(img => img.src);
console.log(srcList); // 输出所有img的src集合

如果只需要第一个img的src，直接取imgElements[0]?.src就行。

方法二：使用正则表达式（适合简单场景） #

如果你的HTML结构很简单，没有嵌套或特殊字符干扰，可以用正则快速匹配，但不推荐复杂HTML场景：

const srcRegex = /<img[^>]+src="([^">]+)"/g;
const srcList = [];
let match;
while ((match = srcRegex.exec(a)) !== null) {
  srcList.push(match[1]);
}
console.log(srcList);

注意：正则可能会匹配到非img标签里的src属性（比如script里的字符串），或者处理带单引号、无引号的src时出错，所以只适合简单情况。

方法三：利用临时DOM元素（和DOMParser原理类似） #

创建一个临时的DOM元素，把HTML片段塞进去再提取：

const tempDiv = document.createElement('div');
tempDiv.innerHTML = a;
const imgElements = tempDiv.querySelectorAll('img');
const srcList = Array.from(imgElements).map(img => img.src);
console.log(srcList);

这个方法和DOMParser效果差不多，都是基于DOM解析，兼容性也很好。

内容的提问来源于stack exchange，提问作者hossein ghodrati