如何用正则表达式提取富文本中第一个img标签的src属性？-js教程-PHP中文网

如何用正则表达式提取富文本中第一个img标签的src属性？

碧海醫心

发布： 2025-02-23 20:22:22

原创

321人浏览过

如何用正则表达式提取富文本中第一个img标签的src属性？

提取富文本中第一个img标签src属性的正则表达式方法

本文介绍如何使用正则表达式从富文本内容中提取第一个img标签的src属性值。假设您已从后台获取到一个包含富文本内容的对象数组res.data，每个对象的content属性存储富文本数据。

解决方案：

我们可以利用正则表达式匹配并提取目标src属性。以下正则表达式能够有效地完成此任务：

<code class="javascript">/<img src="https://img.php.cn/" alt="如何用正则表达式提取富文本中第一个img标签的src属性？" />

登录后复制

这个正则表达式匹配<img alt="如何用正则表达式提取富文本中第一个img标签的src属性？" >标签，并捕获src属性的值。[^>]*匹配标签内的任意字符（除了>），确保匹配到完整的标签。src="([^"]*)" 捕获src属性的值，([^"]*) 捕获引号之间的内容。

代码示例：

<code class="javascript">const res = {
  data: [
    { content: '<p>这是一个段落。<img src="https://img.php.cn/upload/article/001/246/273/174031334511428.jpg" alt="如何用正则表达式提取富文本中第一个img标签的src属性？" /></p>' },
    { content: '<p>另一个段落。<img src="https://img.php.cn/upload/article/001/246/273/174031334582000.png" alt="如何用正则表达式提取富文本中第一个img标签的src属性？" /><img src="https://img.php.cn/upload/article/001/246/273/174031334698608.gif" alt="如何用正则表达式提取富文本中第一个img标签的src属性？" /></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2179">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680176330664.png" alt="慧中标AI标书">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2179">慧中标AI标书</a>
                            <p>慧中标AI标书是一款AI智能辅助写标书工具。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="慧中标AI标书">
                                <span>120</span>
                            </div>
                        </div>
                        <a href="/ai/2179" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="慧中标AI标书">
                        </a>
                    </div>
                ' },
    { content: '<p>没有图片的段落。</p>' }
  ]
};

const imageList = [];
res.data.forEach((item) => {
  const match = item.content.match(/<img [^ alt="如何用正则表达式提取富文本中第一个img标签的src属性？" >]*src="([^"]*)"[^>]*>/);
  if (match) {
    imageList.push(match[1]);
  } else {
    imageList.push(null); // 或其他默认值
  }
});

console.log(imageList); // 输出: ['image1.jpg', 'image2.png', null]</code>

登录后复制

这段代码遍历res.data数组，对每个对象的content属性应用正则表达式进行匹配。如果匹配成功，则将捕获的src属性值添加到imageList数组中；如果匹配失败（即没有img标签），则添加null值。最终，imageList数组将包含所有富文本中第一个img标签的src属性值。

改进：

为了提高代码的健壮性，可以考虑使用更严格的正则表达式，例如：

<code class="javascript">/<img\s+src="([^"]*)"\s[^>]*>/i</code>

登录后复制

这个正则表达式添加了\s+来匹配一个或多个空格，并添加了i标志使其不区分大小写。

通过以上方法，您可以高效地从富文本中提取第一个img标签的src属性值。记住根据实际情况调整正则表达式和处理逻辑。

以上就是如何用正则表达式提取富文本中第一个img标签的src属性？的详细内容，更多请关注php中文网其它相关文章！