快捷導(dǎo)航

小程序中手機(jī)號(hào)識(shí)別的示例

更新時(shí)間：2020年12月14日 10:53:19 作者：唐_銀

這篇文章主要介紹了小程序中手機(jī)號(hào)識(shí)別的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

接口返回的字符串：

"【王?！繋煾狄呀訂危?lián)系電話：18839687266。稍后與您聯(lián)系。師傅簽到碼為【1234】，師傅上門輸入簽到碼后才可開始服務(wù)。"

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

split大法，通過(guò)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
    }
  })
}

通過(guò)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>

挺簡(jiǎn)單的一個(gè)實(shí)現(xiàn)，就是一開始沒(méi)想到用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)。

到此這篇關(guān)于小程序中手機(jī)號(hào)識(shí)別的示例的文章就介紹到這了,更多相關(guān)小程序手機(jī)號(hào)識(shí)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

axios概念介紹和基本使用
axios是一個(gè)基于Promise用于瀏覽器和nodejs的HTTP客戶端,下面這篇文章主要給大家介紹了關(guān)于axios概念介紹和基本使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
JavaScript相等運(yùn)算符的九條規(guī)則示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript相等運(yùn)算符的九條規(guī)則，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性
這篇文章主要介紹了JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性的相關(guān)資料,需要的朋友可以參考下
2017-07-07
html+js實(shí)現(xiàn)動(dòng)態(tài)顯示本地時(shí)間
顯示本地時(shí)間的方法有很多，在本文將為大家介紹下如何使用html+js實(shí)現(xiàn)動(dòng)態(tài)顯示本地時(shí)間，感興趣的朋友可以了解下
2013-09-09
JavaScript 實(shí)現(xiàn)的 zip 壓縮和解壓縮工具包Zip.js使用詳解
今天給大家介紹的文章是js實(shí)現(xiàn)的解壓縮插件zip.js，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2015-12-12
淺析hasOwnProperty方法的應(yīng)用
這篇文章主要是對(duì)hasOwnProperty方法的應(yīng)用進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
uniapp中使用vuex并持久化的方法示例
vuex是基于vuex.js的狀態(tài)管理工具,可以把它理解為一個(gè)倉(cāng)庫(kù),下面這篇文章主要給大家介紹了關(guān)于uniapp中如何使用vuex并持久化的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
js數(shù)據(jù)類型以及其判斷方法實(shí)例
這篇文章主要給大家介紹了關(guān)于js數(shù)據(jù)類型以及其判斷方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
記錄一次開發(fā)微信網(wǎng)頁(yè)分享的步驟
這篇文章主要介紹了記錄一次開發(fā)微信網(wǎng)頁(yè)分享的步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
解決JS無(wú)法調(diào)用Controller問(wèn)題的方法
這篇文章主要介紹了解決JS無(wú)法調(diào)用Controller問(wèn)題的方法,需要的朋友可以參考下
2015-12-12