随手记：小程序兼容后台的wangEditor富文本配置链接

场景：
在后台配置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}">`;});