预览富文本中所有的图片

思路解析

1. 通过接口获取富文本内容,判断有无内容
2. 设定几个初始值 random:记录img的序号,imgUrls 记录所有的img的数组

3. 匹配img标签,放到match中
4. match中再次匹配src标签,获取img的链接,并拼接 random 序号,值为random,可作为页码值

5. 最后输出数组,包含俩个参数 html, imgUrls

方法 utils 文件

/**
 * 从富文本中给图片链接添加 random 并且返回图片数组
 * @example let [html, imgUrls] = addRandomAndGetPreviewImageUrlsFromRichText(html)
 * @param {string} html
 */
const addRandomAndGetPreviewImageUrlsFromRichText = html => {
    // 如果没有值的话，直接返回
    if (!html) {
        return html;
    }

    let randomIndex = 0;
    let imgUrls = [];
    // 先匹配到 img 标签，放到 match 里
    html = html.replace(/<img[^>]*>/gim, function(match) {
        randomIndex++;
        match = match
            .replace(/src="[^"]+"/gim, function(match) {
                // 再匹配到 src 标签 '"'
                let src = match.replace('src=', '').replace(/"/g, '') + '?random=' + randomIndex; // 取到 src 里面的 url
                imgUrls.push(src);
                return 'src="' + src + '"';
            })
            .replace(/src='[^']+'/gim, function(match) {
                console.log(match);
                // 再匹配到 src 标签 "'"
                let src = match.replace('src=', '').replace(/'/g, '') + '?random=' + randomIndex;
                imgUrls.push(src);
                return "src='" + src + "'";
            });
        return match;
    });
    return [html, imgUrls];
};

module.exports = {
    addRandomAndGetPreviewImageUrlsFromRichText: addRandomAndGetPreviewImageUrlsFromRichText,
};

使用

<template>
  <!-- 内容主体 -->
    <div class="article" v-html="articleInfo.contentHtml" @click="previewImage($event)"></div>
</template>
<script>
// 方法
import util from '@/utils/utils.js';
</script>
export default {
    data() {
        return {
      articleInfo: {},
      richImages: [],
    }
  },
    mounted() {
    this.getNewsContent();
    },
  methods: {
        // 图片预览
        previewImage(e) {
            console.log(e, 'e');
            if (e.target.tagName == 'IMG') {
                this.$ImagePreview({
                    images: this.richImages,
                    closeable: true,
                    startPosition: e.target.src.split('random=')[1] - 1,
                    closeOnPopstate: true, //页面回退关闭预览
                });
            }
        },
        // 获取富文本内容
        getNewsContent() {
      ....
      // 返回值等于内容 this.articleInfo.contentHtml
      [this.articleInfo.contentHtml, this.richImages] = util.addRandomAndGetPreviewImageUrlsFromRichText(this.articleInfo.contentHtml);
    }
  }
}