場景:
在后臺配置wangEditor富文本,可以文字配置鏈接,圖片配置鏈接,產生的json格式為:
例子:
?<h1><a href="https://uniapp.dcloud.net.cn/" target="_blank"><span style="background-color: rgb(255, 122, 69);"><strong>文字配鏈接uni</strong></span></a></h1><h1><a href="https://ditu.amap.com/?amapexchange=%2F" target="_blank"><span style="color: rgb(56, 158, 13);">鏈接2</span></a></h1><p><a href="https://uniapp.dcloud.net.cn/api/system/clipboard.html#setclipboarddata" target="_blank">阿打算打</a></p><h1><span style="color: rgb(216, 68, 147);">圖片配鏈接</span></h1><h1><img src="https://puree-test.oss-cn-shenzhen.aliyuncs.com/editor/2024/12/17/f2a8c01e4c194f28beb7d5b0b0925e02.jpg" alt="" data-href="https://www.baidu.com/" style=""/></h1><p><br></p><p><img src="https://puree-test.oss-cn-shenzhen.aliyuncs.com/editor/2024/12/17/1bb8ba4d5285487a9bec147e823edd45.gif" alt="" data-href="" style=""/></p><p><br></p><p><br></p><p> <a href="https://uniapp.dcloud.net.cn/" target="_blank">https://uniapp.dcloud.net.cn/</a> </p><p><br></p><p><br></p><p><img src="https://puree-test.oss-cn-shenzhen.aliyuncs.com/editor/2024/12/17/9d1056565a9a4c1d8e3ba8c26d76624c.jpg" alt="" data-href="https://v1.uviewui.com/components/tabs.html" style=""/>
小程序使用的組件u-parse
解決思路:
1.原來小程序的復制鏈接,改成跳轉webview,傳入外部鏈接
2.圖片配置鏈接的,在組件處理html將原本data-href的鏈接通過正則找到新增href接收,后續獲取href , 跳轉webview,傳入外部鏈接
感謝我的中國好組長寫的正則:
// 定義正則表達式模式let pattern = /<img.*?src="(.*?)".*?alt="(.*?)".*?data-href="(.*?)".*?>/g;// 使用replace進行替換操作處理img標簽,將data-href的鏈接賦值給href,下方的new Parser格式化DOM會把data-href去掉,所以增加一個href屬性接收,在點擊圖片事件里需判斷href的值是否是鏈接在做跳轉html = html.replace(pattern, (match, p1, p2, p3) => {return `<img src="${p1}" alt="${p2}" href="${p3}" data-href="${p3}">`;});