如何用正则表达式提取富文本数组中每个元素的第一个图片src并组成新数组？-js教程-PHP中文网

如何用正则表达式提取富文本数组中每个元素的第一个图片src并组成新数组？

碧海醫心

发布： 2025-02-23 20:06:01

原创

566人浏览过

如何用正则表达式提取富文本数组中每个元素的第一个图片src并组成新数组？

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

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

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

示例富文本：

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

登录后复制

解决方案：

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

查看详情

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

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

登录后复制

代码示例：

<code class="javascript">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的数组</code>

登录后复制

输出结果：

<code class="javascript">[
  '/upload/bcontent/20231222160711title.bmp',
  // ...其他图片src
]</code>

登录后复制

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

以上就是如何用正则表达式提取富文本数组中每个元素的第一个图片src并组成新数组？的详细内容，更多请关注php中文网其它相关文章！