vue日記②之相容各種情況的可跳轉連結

Micah666發表於2021-08-10
Vue

相容各種情況的可跳轉連結

需求

因為聊天氣泡顏色原因,傳送出去的連結通常模糊不清,而且不能直接跳轉,所以我打算已a連結的顯示直接抓取所有的網頁連結,同時還要相容富文字框的直接輸入圖片

  • 這是執行效果

實現思路

  1. 在每次傳送訊息的同時,攔截訊息,同時通過正規表示式擷取網址,校驗這是要傳送的連結還是圖片,又或者是檔案等等等形式

  2. 然後通過批量替換,插入a標籤實現連結高亮和可跳轉

步驟:

  1. 在傳送這裡進行攔截

    這其中的getUrlByLink方法就是首先執行的批量替換,插入a標籤實現連結高亮和可跳轉的方法

  2. 這個方法的實現方式是這樣的

getUrlByLink(cont) {  
  var ptn = /"*https*:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?"*/g //全域性正則,獲取連結  
 var ptn2 = /"*https*:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?"*/ //非全域性正則  
 let pattern1 = /\{\(待替換\).*?\}/; //臨時替換文字正則  
 let content = cont.match(ptn) //獲得所有的連結陣列  
 var str =cont //臨時儲存待傳送的訊息  
 if (content) { //如果連結陣列不為空  
 for (let i = 0; i < content.length; i++) { //fori迴圈陣列  
 if (content[i].indexOf('"')!=-1||content[i].indexOf(`'`)!=-1)continue //如果本連結帶有單引號或雙引號,則跳過本次迴圈  
 str = str.replace(ptn2, '{(待替換)}'); //替換本連結為待替換文字  
 str = str.replace(pattern1, `<a target="_blank" href="${content[i]}">${content[i]}</a>`); //最後替換為帶有a連結的形式  
 }  
  }  
  return str; //返回已替換的內容  
},

註釋已寫

  1. 經過這種相容法式出來的連結,就可以直接點選,同時也支援同步傳送拖動圖片

難點分析

  • 要有清晰的思路分析提取各種訊息的先後順序,我就是先批量替換連結,然後是截圖,再然後是網路圖片(可拖動圖片),最後是表情包和檔案
  • 熟練的運用正規表示式 像本文的
    /"*https*:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?"*/g
    就是查詢所有http或https開頭亦或帶有"符號,已各種符號或空格結尾的連結,這種表示式查出來的陣列是比較好處理的

相關文章