隨手記:小程序兼容后臺的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}">`;});

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/63743.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/63743.shtml
英文地址,請注明出處:http://en.pswp.cn/web/63743.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

6.8 Newman自動化運行Postman測試集

歡迎大家訂閱【軟件測試】 專欄&#xff0c;開啟你的軟件測試學習之旅&#xff01; 文章目錄 1 安裝Node.js2 安裝Newman3 使用Newman運行Postman測試集3.1 導出Postman集合3.2 使用Newman運行集合3.3 Newman常用參數3.4 Newman報告格式 4 使用定時任務自動化執行腳本4.1 編寫B…

工具環境 | 工具準備

搭建一套驗證環境需要的工具如下&#xff1a; 虛擬機&#xff1a;推薦virtualbox ubuntu VM好用&#xff0c;但是免費的好像木有了&#xff0c;ubuntu界面版更加容易上手。 網上找安裝教程即可&#xff0c;注意實現文件共享、復制粘貼等功能。 EDA&#xff1a;VCS Veridi 工…

計算機網絡之王道考研讀書筆記-2

第 2 章 物理層 2.1 通信基礎 2.1.1 基本概念 1.數據、信號與碼元 通信的目的是傳輸信息。數據是指傳送信息的實體。信號則是數據的電氣或電磁表現&#xff0c;是數據在傳輸過程中的存在形式。碼元是數字通信中數字信號的計量單位&#xff0c;這個時長內的信號稱為 k 進制碼…

ROS2學習配套C++知識

第3章 訂閱和發布——話題通信探索 3.3.1 發布速度控制海龜畫圓 std::bind cstd::bind綁定成員函數時&#xff0c;需要加上作用域以及取址符號 因為不會將成員函數隱式的轉換成指針&#xff0c;因此需要加&符號&#xff1b; 后面的第一個參數必須跟具體對象&#xff0c;c…

法規標準-C-NCAP評測標準解析(2024版)

文章目錄 什么是C-NCAP&#xff1f;C-NCAP 評測標準C-NCAP評測維度三大維度的評測場景及對應分數評星標準 自動駕駛相關評測場景評測方法及評測標準AEB VRU——評測內容(測什么&#xff1f;)AEB VRU——評測方法(怎么測&#xff1f;)車輛直行與前方縱向行走的行人測試場景&…

第十七屆山東省職業院校技能大賽 中職組“網絡安全”賽項任務書正式賽題

第十七屆山東省職業院校技能大賽 中職組“網絡安全”賽項任務書-A 目錄 一、競賽階段 二、競賽任務書內容 &#xff08;一&#xff09;拓撲圖 &#xff08;二&#xff09;模塊A 基礎設施設置與安全加固(200分) &#xff08;三&#xff09;B模塊安全事件響應/網絡安全數據取證/…

mlr3機器學習AUC的置信區間提取

如果你在mlr3拿到機器學習的預測數據 ROC 過程原理探索 假設數據 df <- data.frame(Airis$Sepal.Length, groupsample(x c(0,1),size 150,replace T)) 分組為 0,1 # 變量A為連續性變量 library(pROC) roc_obj <- roc(df g r o u p , d f group, df group,dfA, le…

Halcon例程代碼解讀:安全環檢測(附源碼|圖像下載鏈接)

安全環檢測核心思路與代碼詳解 項目目標 本項目的目標是檢測圖像中的安全環位置和方向。通過形狀匹配技術&#xff0c;從一張模型圖像中提取安全環的特征&#xff0c;并在后續圖像中識別多個實例&#xff0c;完成檢測和方向標定。 實現思路 安全環檢測分為以下核心步驟&…

Java——多線程進階知識

目錄 一、常見的鎖策略 樂觀鎖VS悲觀鎖 讀寫鎖 重量級鎖VS輕量級鎖 總結&#xff1a; 自旋鎖&#xff08;Spin Lock&#xff09; 公平鎖VS非公平鎖 可重入鎖VS不可重入鎖 二、CAS 何為CAS CAS有哪些應用 1&#xff09;實現原子類 2&#xff09;實現自旋鎖 CAS的ABA…

ubuntu18.04升級到ubuntu20.04

為了使用qt6&#xff0c;在ubuntu18.04上各種折騰失敗&#xff0c;無奈只能升級到ubuntu20.04, 按照網上的教程沒成功。自己摸索了 lsb_release -a df -h sudo apt update sudo apt upgrade -y sudo apt dist-upgrade -y sudo apt autoremove -y sudo apt clean sudo apt inst…

【Blender】【源碼詳解】BLI_mesh_boolean 實現詳解

1. 背景&#xff1a; 最近因為項目需要&#xff0c;需要閱讀 Blender 中關于 mesh boolean 的源碼&#xff1b;因此&#xff0c;對 blender 中的 mesh boolean 源碼進行解讀&#xff1b; Github 上源碼下載很慢&#xff0c;一般使用 Gitee: gitee Blender 源碼 2. Mesh Boole…

qcow2鏡像大小壓縮

本文擬對qcow2進行壓縮進行簡單介紹 背景 qcow2鏡像在使用一段時間后&#xff0c;總是會不斷膨脹變大&#xff0c;所以在導出分享時一般都需要進行壓縮以縮減占用空間。 清除空洞 qcow2方式也有稀疏的問題&#xff0c;在磁盤級別上看&#xff0c;鏡像會有大量連續的相同空洞…

達夢 本地編碼:PG_GBK, 導入文件編碼:PG_UTF8錯誤

問題 達夢 本地編碼&#xff1a;PG_GBK, 導入文件編碼&#xff1a;PG_UTF8錯誤 解決 右鍵管理服務器 查看配置 新建一個數據庫實例&#xff0c;配置跟之前的保持一致 新建一個用戶&#xff0c;跟以前的用戶名一樣 在用戶上&#xff0c;右鍵導入&#xff0c;選擇dmp的位置 導…

深度學習卷積神經網絡CNN之MobileNet模型網絡模型詳解說明(超詳細理論篇)

1.MobileNet背景 2.MobileNet V1論文 3. MobileNett改進史 4. MobileNet模型結構 5. 特點&#xff08;超詳細創新、優缺點及新知識點&#xff09; 一、MobileNet背景 隨著移動設備的普及&#xff0c;深度學習模型的應用場景逐漸擴展至移動端和嵌入式設備。然而&#xff0c;傳統…

垂起固定翼無人機大面積森林草原巡檢技術詳解

垂起固定翼無人機大面積森林草原巡檢技術是一種高效、精準的監測手段&#xff0c;以下是對該技術的詳細解析&#xff1a; 一、垂起固定翼無人機技術特點 垂起固定翼無人機結合了多旋翼和固定翼無人機的優點&#xff0c;具備垂直起降、飛行距離長、速度快、高度高等特點。這種無…

kubernates實戰

使用k8s來部署tomcat 1、創建一個部署&#xff0c;并指定鏡像地址 kubectl create deployment tomcat6 --imagetomcat:6.0.53-jre82、查看部署pod狀態 kubectl get pods # 獲取default名稱空間下的pods kubectl get pods --all-namespaces # 獲取所有名稱空間下的pods kubect…

數據挖掘之認識數據

在數據挖掘過程中&#xff0c;數據的認識是非常重要的一步&#xff0c;它為后續的數據分析、建模、特征選擇等工作奠定基礎。以鳶尾花數據集&#xff08;Iris Dataset&#xff09;數據集之鳶尾花數據集&#xff08;Iris Dataset&#xff09;-CSDN博客為例&#xff0c;下面將介紹…

Java 優化springboot jar 內存 年輕代和老年代的比例 減少垃圾清理耗時 如調整 -XX:NewRatio

-XX:NewRatio 是 Java Virtual Machine (JVM) 的一個選項&#xff0c;用于調整 年輕代&#xff08;Young Generation&#xff09;和 老年代&#xff08;Old Generation&#xff09;之間的內存比例。 1. 含義 XX:NewRatioN 用于指定 老年代 與 年輕代 的內存比例。 N 的含義&…

統信UOS 1071 AI客戶端接入本地大模型配置手冊

文章來源&#xff1a;統信UOS 1071本地大模型配置手冊 | 統信軟件-知識分享平臺 1. OS版本確認 1.1. 版本查看 要求&#xff1a;計算機&#xff0c;屬性&#xff0c;查看版本&#xff08;1070,構建號> 101.100&#xff09; 2. UOS AI版本確認 UOS AI&#xff0c;設置&am…

定時任務——定時任務技術選型

摘要 本文深入探討了定時任務調度系統的核心問題、技術選型&#xff0c;并對Quartz、Elastic-Job、XXL-Job、Spring Task/ScheduledExecutor、Apache Airflow和Kubernetes CronJob等開源定時任務框架進行了比較分析&#xff0c;包括它們的特點、適用場景和技術棧。文章還討論了…