我們的需求是這樣的》 客戶留了一段備註信息,裏面可能會有手機號(可能是多個號碼),怎麼才能識別出手機號,並且手機號要能高亮顯示,當用戶看到手機號的時候,直接點擊手機號就可以撥打電話了,這樣的功能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>