最近做的一個頁面里面包含手機(jī)號，點擊可以撥打電話，原想著讓后端把各個字段查出來就行了来破，結(jié)果接口方面給直接拼好了。
image
接口返回的字符串：
"【王和牛】師傅已接單徘禁，聯(lián)系電話：18839687266。稍后與您聯(lián)系髓堪。師傅簽到碼為【1234】送朱，師傅上門輸入簽到碼后才可開始服務(wù)。"
這讓我們綁定打電話的事件就不那么方便了干旁，問題聚焦到解析字符串驶沼，找出手機(jī)號。
split大法争群，通過split得到包含手機(jī)號的數(shù)組回怜，然后遍歷這個數(shù)組，給手機(jī)號的元素打上標(biāo)簽换薄。
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
}
})
}
image
通過parseStr函數(shù)得到合適的格式后鹉戚，循環(huán)渲染給手機(jī)號綁定事件就可以了,代碼大概如下：
<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>
挺簡單的一個實現(xiàn)，就是一開始沒想到用split专控。另外一個要注意的點是這個正則regPhone，仔細(xì)看遏餐，里面加了有括號伦腐，如果separator是包含捕獲括號的正則表達(dá)式()，則匹配結(jié)果包含在數(shù)組中失都。
image
如果不加括號柏蘑，相當(dāng)于是把匹配到的手機(jī)號給丟掉了，加上括號粹庞，最終數(shù)組中才會包括我們匹配到的手機(jī)號咳焚。
