工作问题汇总---正则匹配获取富文本中的第一个图片（1）

最新推荐文章于 2024-05-21 14:15:14 发布

liminla!

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量142

点赞数

文章标签： javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/m0_45857808/article/details/131234246

版权

需求是后端传入一个富文本，需要拿到富文本里面的第一张图片展示

    //js正则表达式匹配到所有img图片和src
    getImgUrl(content) {
      let matchReg = /<img.*?(?:>|\/>)/gi; // 匹配图片中的img标签
      let arr2 = content.match(matchReg); //拿到标签中所有的img
      let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配图片中的src
      let imgUrl = "";
      if (arr2 != null) {
        let src = arr2[0].match(srcReg);
        imgUrl = src[1];
      }
      return imgUrl;
    },

修改富文本的样式

通过deep来修改富文本里面可能会出现的标签的样式

 <div class="my-style" v-html="item.content"></div>

.my-style {
  font-size: 10px;
  /deep/ p {
    font-size: 10px;
  }
  /deep/ span {
    font-size: 10px !important;
  }
  /deep/ strong {
    font-size: 10px;
    font-weight: inherit;
  }
  /deep/ video {
    display: none;
  }
}