問(wèn)題背景

說(shuō)明：

前端接收到來(lái)自后端的一個(gè)長(zhǎng)字符串，要求把里面的圖片替換成為超鏈接，并且要通過(guò)請(qǐng)求一個(gè)接口進(jìn)行圖片下載。

舉例說(shuō)明

就是下列這樣的一個(gè)字符串：vaddssss[圖片](image_p0_f0.png)dsatewafdsaa[圖片](image_p1_f0.png)ddsagegegedsss[圖片](image_p0_f2.png)ddsdagege。需要把這個(gè)字符串中的image_p0_f0.png、image_p0_f1.png、image_p2_f0.png替換為超鏈接，并且在點(diǎn)擊圖片名稱(chēng)時(shí)，請(qǐng)求另外一個(gè)接口下載圖片

實(shí)現(xiàn)方法

這其實(shí)是一個(gè)簡(jiǎn)單的需求，但我們換了三個(gè)方案才最終實(shí)現(xiàn)：

方案一

1. 通過(guò)正則表達(dá)式，從字符串中匹配圖片格式，并將圖片替換為超鏈接
2. 在匹配到圖片名稱(chēng)，調(diào)用接口下載到圖片，并將下載地址寫(xiě)到超鏈接中

具體實(shí)現(xiàn)為：

html：

<div v-html="getImgResult(str, id)"></div>

JavaScript:

const getImgResult = async (str?:any, id?:any) => {let c_reg = /\(.*?\)/g // 匹配所有包含在括號(hào)內(nèi)的內(nèi)容let c1 = /\[圖片]\(.*?.png\)/g // 匹配這種格式：[圖片](image_p0_f0.png)，[圖片] + ( + .png + )let img_arr = str.match(c1) // 匹配到所有的圖片// 遍歷匹配結(jié)果，替換for(let i in img_arr) {const img = img_arr[i].match(c_reg)[0]let img_name = img.replace(/^\(|\)$/g,'') // 替換首尾括號(hào)// 獲取圖片地址，`getImageLink`其實(shí)是一個(gè)fetchconst img_href = await getImageLink(img_name)let text_pattern = new RegExp(img_name, 'g')// 將引文中的圖片名稱(chēng)替換為超鏈接str = str.replace(text_pattern, `<a href="${img_href}" target="_blank">${img_name}</a>`)}return str
}

在這個(gè)方法中：

• 由于獲取圖片地址必須異步，所以使用了async/await
• v-html直接使用該async方法，得到的是一個(gè)promise的object，所以該方案放棄

方案二

基于上一個(gè)方案的問(wèn)題，我們決定不使用async/await方法，改為在圖片的超鏈接上添加@click方法，在點(diǎn)擊時(shí)請(qǐng)求獲取圖片的接口。js方法修改為下：

const getImgResult = async (str?:any, id?:any) => {let c_reg = /\(.*?\)/g // 匹配所有包含在括號(hào)內(nèi)的內(nèi)容let c1 = /\[圖片]\(.*?.png\)/g // 匹配這種格式：[圖片](image_p0_f0.png)，[圖片] + ( + .png + )let img_arr = str.match(c1) // 匹配到所有的圖片// 遍歷匹配結(jié)果，替換for(let i in img_arr) {const img = img_arr[i].match(c_reg)[0]let img_name = img.replace(/^\(|\)$/g,'') // 替換首尾括號(hào)let text_pattern = new RegExp(img_name, 'g')// 修改主要在這里str = str.replace(text_pattern, `<a @click="handleImgClick(${params})">${img_name}</a>`)}return str
}

上述方法的主要修改位置為：str = str.replace(text_pattern, `<a @click="handleImageClick(${params})">${img_name}</a>`)，添加了click方法。

但是，在點(diǎn)擊時(shí)，執(zhí)行該方法卻報(bào)如下錯(cuò)誤：

此方法也行不通。

方案三

通過(guò)父級(jí)元素命中的方法：

1. 在html中添加@click事件

<div v-html="getImgResult(str, id)" @click="handleImgClick($event)"></div>

2. v-html中，將圖片的唯一值設(shè)為<a>標(biāo)簽的id，其它相關(guān)參數(shù)設(shè)為html

const getImgResult = async (str?:any, id?:any) => {// do anythingfor(let i in img_arr) {/*** 修改主要在這里*/str = str.replace(text_pattern, `<a id='img-${id}' style="color: #5eadfc; text-decoration: underline; text-underline-offset: 6px;">${img_name}</a>`)}return str
}

3. handleImgClick方法

// 點(diǎn)擊獲取圖片
const handleImgClick = async (e) => {const target_id = e.target.id// 判斷是否點(diǎn)擊圖片if(target_id.includes('img-')) { const img_name = e.target.innerHTMLlet id = target_id.replace(/^img-/g, '')let url = await getImageLink({ img_name, id })window.open(img_herf, '_blank')}
}

這樣，就實(shí)現(xiàn)了在v-html中的點(diǎn)擊事件。