思路解析

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);
    }
  }
}