如何用JavaScript正则提取div外文本与img的src属性值

我有如下格式的字符串：

'fdffddf<div><br> <div><img style="max-width: 7rem;" src="folder/myimg.jpg"><div> <br></div></div><div><div> <br></div></div></div>'

我希望编写正则表达式，提取div标签外的文本以及img标签的src内容，组成数组。比如这个场景下预期结果为：

[ 'fdffddf', 'folder/myimg.jpg' ]

我尝试了以下方法：

let str = 'fdffddf<div><br> <div><img style="max-width: 7rem;" src="folder/myimg.jpg"><div> <br></div></div><div><div> <br></div></div></div>'
console.log('only content without div tag and src image only without img tag : ',str.match(/<img [^>]*src="[^"]*"[^>]*>/gm)[0]) 

但这个方法无效，只能获取到img标签本身，请问该如何实现需求？

可以通过两次匹配或者一个正则匹配两种目标内容来实现，以下是两种可行方案：

方案一：分别提取后合并数组 #

1. 提取div标签外的文本：匹配<div>之前的所有非标签文本
2. 提取img的src属性值：通过捕获组精准提取src引号内的内容

代码示例：

const str = 'fdffddf<div><br> <div><img style="max-width: 7rem;" src="folder/myimg.jpg"><div> <br></div></div><div><div> <br></div></div></div>';

// 提取div外的前置文本
const outsideText = str.match(/^[^<]+/)?.[0] || '';

// 提取img的src值，捕获组获取引号内内容
const imgSrc = str.match(/<img[^>]+src="([^"]+)"/)?.[1] || '';

// 组装结果数组并过滤空值
const result = [outsideText, imgSrc].filter(item => item);
console.log(result); // 输出: [ 'fdffddf', 'folder/myimg.jpg' ]

方案二：单正则匹配两种目标内容 #

使用正则的交替模式，同时匹配div外的前置文本和img的src值：

const str = 'fdffddf<div><br> <div><img style="max-width: 7rem;" src="folder/myimg.jpg"><div> <br></div></div><div><div> <br></div></div></div>';

// 正则同时匹配两种情况：^[^<]+ 是div前的文本；(?<=src=")[^"]+ 是src引号内的内容
const matches = str.match(/^[^<]+|(?<=src=")[^"]+/g) || [];
console.log(matches); // 输出: [ 'fdffddf', 'folder/myimg.jpg' ]

正则说明： #

• ^[^<]+：匹配字符串开头到第一个<的内容，即div标签外的前置文本
• (?<=src=")[^"]+：正向零宽断言，匹配src="之后到下一个"之间的内容，精准提取src属性值

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