如何获取innerHTML嵌套标签中的img元素src属性值？

方法一：直接从DOM元素获取（推荐） #

没必要先获取innerHTML再解析，直接定位到目标img元素读取src属性，更高效可靠：

// 定位.ad-area下的img标签并获取src
var imgSrc = document.querySelector('.ad-area img').src;

// 如果需要指定img的class，可更精确
var imgSrc = document.querySelector('.ad-area img.block-banner').src;

方法二：解析已获取的innerHTML字符串 #

如果已经拿到了x对应的HTML字符串，可通过以下两种方式提取src：

1. 用DOMParser解析为DOM后获取（推荐，解析HTML更规范）

var x = document.getElementsByClassName('ad-area')[0].innerHTML;
var parser = new DOMParser();
var doc = parser.parseFromString(x, 'text/html');
var imgSrc = doc.querySelector('img').src;

2. 用正则表达式匹配（仅应急使用，HTML结构变化时容易失效）

var x = document.getElementsByClassName('ad-area')[0].innerHTML;
var srcMatch = x.match(/src="([^"]+)"/);
var imgSrc = srcMatch ? srcMatch[1] : ''; // 匹配到则取对应值，否则为空字符串

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