最近做的一個(gè)頁面里面包含手機(jī)號(hào)，點(diǎn)擊可以撥打電話，本計(jì)劃著讓后端把各個(gè)字段查出來就行了，結(jié)果接口方面給直接拼好了。

接口返回的字符串：

"【王海】師傅已接單，聯(lián)系電話：18839687266。稍后與您聯(lián)系。師傅簽到碼為【1234】，師傅上門輸入簽到碼后才可開始服務(wù)。"
復(fù)制代碼

這讓我們綁定打電話的事件就不那么方便了，問題聚焦到解析字符串，找出手機(jī)號(hào)。

split大法，通過split得到包含手機(jī)號(hào)的數(shù)組，然后遍歷這個(gè)數(shù)組，給手機(jī)號(hào)的元素打上標(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
        }
    })
}
復(fù)制代碼

通過parseStr函數(shù)得到合適的格式后，循環(huán)渲染給手機(jī)號(hào)綁定事件就可以了,代碼大概如下：

<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>
復(fù)制代碼

挺簡單的一個(gè)實(shí)現(xiàn)，就是一開始沒想到用split。另外一個(gè)要注意的點(diǎn)是這個(gè)正則regPhone，仔細(xì)看，里面加了有括號(hào)，如果separator是包含捕獲括號(hào)的正則表達(dá)式()，則匹配結(jié)果包含在數(shù)組中。

如果不加括號(hào)，相當(dāng)于是把匹配到的手機(jī)號(hào)給丟掉了，加上括號(hào)，最終數(shù)組中才會(huì)包括我們匹配到的手機(jī)號(hào)。