解析html文本中的图片标签，并获取第一个图片地址将其展示到指定位置

本文链接：https://blog.csdn.net/weixin_60224767/article/details/128972996

这段代码展示了在Vue.js应用中如何遍历数据列表，通过正则表达式匹配并提取第一个图片URL，然后存储到对应的imgUrl字段，以便在界面中展示图片。match()方法用于在字符串中查找匹配正则表达式的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里用的方法是将匹配的第一个图片地址取出来用一个字段存起来（处理方法）

       //循环列表 
       <div class="question-item" v-for="item in listData" :key="item.id" @click="goDetails(item.id)">
          <div class="question-top">
            <p>{{ item.title }}</p>
          </div>
          <div class="question-remark">
            //有图片展示图片，没有图片就展示纯文本
            <img v-if="item.imgUrl" style="width: 249px;height: 140px;" :src="item.imgUrl" alt="">
            <div class="remark" v-html="item.content"></div>
          </div>
        </div>

     this.listData.forEach(item => {
          let imgReg = /<img.*?(?:>|\/>)/gi //匹配图片中的img标签
          let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
          if (item.details.match(imgReg)) {
            this.$set(item, 'imgUrl', item.details.match(srcReg)[1])
          }
        })

补充

定义和用法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回结果数组，而不是字符串的位置。

语法

stringObject.match(searchvalue)

stringObject.match(regexp)

参数	描述
searchvalue	必需。规定要检索的字符串值。
regexp	必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。