富文本查询关键字高亮显示！

最新推荐文章于 2024-02-26 10:08:17 发布

weixin_59642881

最新推荐文章于 2024-02-26 10:08:17 发布

阅读量343

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_59642881/article/details/129045461

版权

富文本内容缩略展示：

把 img 标签替换成【图片】iframe标签替换成【视频】

        //正则替换img标签
      let infoDetail = val.replace(/<s?img[^>]*>/gi, "【图片】");
        //正则替换iframe标签
      infoDetail = infoDetail.replace(/<s?iframe[^>]*>/gi, "");
      infoDetail = infoDetail.replace(/<[ ]{0,}\/?[ ]{0,}(iframe)[ ]{0,}>/gi, "【视频】");
        //处理完的字符串调用highlight()高亮方法
      infoDetail = this.highlight(infoDetail);
      return infoDetail;

         // 高亮
    highlight(rep) {
        //this.searchInput为关键字
      let regexp = new RegExp(this.searchInput, "g");
        //第一步过滤掉富文本所有标签然后回调
      return rep.replace(/(?<=>)[^>]+(?=<[/]?\w+.*>)/g, (v) => {
        //通过正则把把过滤掉标签的数据关键字套个标签加上写好高亮样式的类名
        return v.replace(regexp, "<span class='highlight'>" + this.searchInput + "</span>")
      });
    },