从富文本数组中提取第一个图片src并创建新数组

本文介绍如何利用正则表达式，从后端返回的富文本数组中提取每个元素的第一个图片src属性值，并将其组成一个新的数组。

问题描述： 如何高效地处理一个富文本数组，从中提取每个富文本内容中第一个图片的src属性，并最终生成一个包含所有这些src值的数组？

示例富文本：

"<html>
<body>
<p style="text-align:center"><img src="https://img.php.cn/" alt="如何用正则表达式提取富文本数组中每个元素的第一个图片src并组成新数组？" /></p>
<p style="text-align:center"> </p>
...
</body>
</html>
"

解决方案：

使用正则表达式匹配第一个图片的src属性。以下代码提供了一种更精确的匹配方法，避免了不必要的匹配：

const regex = /<img [^ alt="如何用正则表达式提取富文本数组中每个元素的第一个图片src并组成新数组？" >]*src\s*=\s*['"]([^'"]+)['"][^>]*>/i;

代码示例：

const richTextArray = res.data; // 假设res.data包含富文本数组
const srcArray = [];

richTextArray.forEach(item => {
  const match = item.content.match(regex); // 使用更精确的正则表达式
  if (match && match[1]) {
    srcArray.push(match[1]);
  }
});

console.log(srcArray); // 输出包含所有第一个图片src的数组

输出结果：

[
  '/upload/bcontent/20231222160711title.bmp',
  // ...其他图片src
]

此方法使用更精准的正则表达式，只匹配<img alt="如何用正则表达式提取富文本数组中每个元素的第一个图片src并组成新数组？" >标签，并提取src属性的值，避免了之前方法中可能出现的错误匹配。 i标志使得正则表达式不区分大小写。 代码也更简洁易懂，提高了可读性。