小程序中识别字符串中的手机号高亮显示并且拨打

最新推荐文章于 2023-05-05 17:35:51 发布

爱谁谁12138

最新推荐文章于 2023-05-05 17:35:51 发布

阅读量1.1k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/wangqiuwei07/article/details/102902114

版权

微信小程序专栏收录该内容

12 篇文章

订阅专栏

我们的需求是这样的》客户留了一段备注信息，里面可能会有手机号（可能是多个号码），怎么才能识别出手机号，并且手机号要能高亮显示，当用户看到手机号的时候，直接点击手机号就可以拨打电话了，这样的功能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>