js获取富文本中的第一张图片(正则表达式)

获取富文本中的第一张图片是前端开发中常用的一个功能，下面是关于如何使用正则表达式来实现该功能的攻略：

步骤一：获取富文本中的图片列表

首先，我们需要使用正则表达式来匹配富文本中所有的图片标签。例如，我们可以使用如下的正则表达式来匹配所有的img标签：

const reg = /<img.*?(?:>|\/>)/gi;
const imgList = html.match(reg);

该正则表达式可以匹配所有的标签，包括其中的属性和内容。

步骤二：从图片列表中获取第一张图片

接下来，我们需要从上一步得到的图片列表中获取第一张图片。我们可以使用以下的代码：

const firstImg = imgList && imgList.length > 0 ? imgList[0] : "";

如果imgList为空或者长度为0，则返回空字符串。否则，返回第一个元素（第一张图片）。

示例一：在React中使用正则表达式获取第一张图片

下面是如何在React中使用正则表达式获取第一张图片的示例代码：

import React from "react";

class RichText extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      html: props.html
    };
  }

  getFirstImage(html) {
    const reg = /<img.*?(?:>|\/>)/gi;
    const imgList = html.match(reg);
    const firstImg = imgList && imgList.length > 0 ? imgList[0] : "";
    return firstImg;
  }

  render() {
    const { html } = this.state;
    const firstImg = this.getFirstImage(html);
    return (
      <div>
        <div dangerouslySetInnerHTML={{ __html: html }} />
        {firstImg && <img src={firstImg} alt="first image" />}
      </div>
    );
  }
}

在上面的代码中，我们定义了一个RichText组件，并且在组件中定义了一个getFirstImage方法来获取第一张图片，然后在render方法中使用dangerouslySetInnerHTML属性来渲染富文本内容，并且使用条件渲染的方式来渲染第一张图片。

示例二：在Vue中使用正则表达式获取第一张图片

下面是如何在Vue中使用正则表达式获取第一张图片的示例代码：

<template>
  <div>
    <div v-html="html"></div>
    <img v-if="firstImg" v-bind:src="firstImg" alt="first image" />
  </div>
</template>

<script>
export default {
  props: {
    html: { type: String }
  },
  methods: {
    getFirstImage(html) {
      const reg = /<img.*?(?:>|\/>)/gi;
      const imgList = html.match(reg);
      const firstImg = imgList && imgList.length > 0 ? imgList[0] : "";
      return firstImg;
    }
  },
  computed: {
    firstImg() {
      return this.getFirstImage(this.html);
    }
  }
};
</script>

在上面的代码中，我们定义了一个名为RichText的组件，然后在组件中定义了一个getFirstImage方法来获取第一张图片，然后在computed中使用该方法来获取第一张图片，并且使用v-if指令来条件渲染第一张图片。