最近做的一個頁面裡面包含手機號，點選可以撥打電話，本計劃著讓後端把各個欄位查出來就行了，結果介面方面給直接拼好了。

介面返回的字串：

"【王海】師傅已接單，聯絡電話：18839687266。稍後與您聯絡。師傅簽到碼為【1234】，師傅上門輸入簽到碼後才可開始服務。"

這讓我們繫結打電話的事件就不那麼方便了，問題聚焦到解析字串，找出手機號。

split大法，通過split得到包含手機號的陣列，然後遍歷這個陣列，給手機號的元素打上標籤。

parseStr (str){
  const regPhone = /(1\d{10})/ 
  const list = str.split(regPhone)
  const result = []
  return list.map(c => {
    let tag
    regPhone.test(c) ? tag = 'phone' : tag = 'text'
    return {
      type: tag,text: c
    }
  })
}

通過parseStr函式得到合適的格式後，迴圈渲染給手機號繫結事件就可以了,程式碼大概如下：

<view>
  <block wx:for="{{data}}" wx:for-item="i" wx:key="*this">
   <text wx:if="{{i.type === 'text'}}">{{i.text}}</text>
   <text wx:else bindtap="call(i.text)">{{i.text}}</text>
  </block>
</view>

挺簡單的一個實現，就是一開始沒想到用split。另外一個要注意的點是這個正則regPhone，仔細看，裡面加了有括號，如果separator是包含捕獲括號的正則表示式()，則匹配結果包含在陣列中。

如果不加括號，相當於是把匹配到的手機號給丟掉了，加上括號，最終陣列中才會包括我們匹配到的手機號。

到此這篇關於小程式中手機號識別的示例的文章就介紹到這了,更多相關小程式 手機號識別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！