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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值