小程序中識別字符串中的手機號高亮顯示並且撥打

我們的需求是這樣的》 客戶留了一段備註信息,裏面可能會有手機號(可能是多個號碼),怎麼才能識別出手機號,並且手機號要能高亮顯示,當用戶看到手機號的時候,直接點擊手機號就可以撥打電話了,這樣的功能App裏面很好實現,但是小程序怎麼實現呢。
參考參考
下面的方法可以分割出要用到的字符串數組,這裏的正則是手機號和座機號

/**分割出字符串中的手機號*/
const mobilePhoneArray = (strContent)=>{
  if (strContent=='') {
    return
  }
  var mobileReg = /[1][3,4,5,7,6,8,9][0-9]{9}|\d{3,4}-\d{7,8}/g
  var telephoneReg 
  var phoneList = strContent.match(mobileReg)
  var textList = strContent.split(/[1][3,4,5,7,6,8,9][0-9]{9}|\d{3,4}-\d{7,8}/), list = []

  for (var i in textList) {
    if (textList[i] == '') {
      i == 0 && list.push({ type: 'phone', val: phoneList[0] })
    } else {
      list.push({ type: 'text', val: textList[i] })
      list.push({ type: 'phone', val: phoneList[i] })
    }
  }
  return list
} 

分割出數組以後,在循環渲染到頁面中,在裏面處理點擊事件或者樣式就可以了

  <scroll-view class="item-audio-content" scroll-y>
        <text style="color:{{item.type=='phone'?'#12b7f5':'#333'}}" wx:for="{{data.remarkList}}" wx:key bindtap="{{item.type=='phone'?'remarkMakePhoneCall':''}}" data-phone="{{item.type=='phone'?item.val:''}}">{{item.val}}</text>
      </scroll-view>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章