小程序中手机号识别的示例


Posted in Javascript onDecember 14, 2020

最近做的一个页面里面包含手机号,点击可以拨打电话,本计划着让后端把各个字段查出来就行了,结果接口方面给直接拼好了。

小程序中手机号识别的示例

接口返回的字符串:

"【王海】师傅已接单,联系电话:18839687266。稍后与您联系。师傅签到码为【1234】,师傅上门输入签到码后才可开始服务。"

这让我们绑定打电话的事件就不那么方便了,问题聚焦到解析字符串,找出手机号。

split大法,通过split得到包含手机号的数组,然后遍历这个数组,给手机号的元素打上标签。

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
    }
  })
}

小程序中手机号识别的示例 

通过parseStr函数得到合适的格式后,循环渲染给手机号绑定事件就可以了,代码大概如下:

<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>

挺简单的一个实现,就是一开始没想到用split。另外一个要注意的点是这个正则regPhone,仔细看,里面加了有括号,如果separator是包含捕获括号的正则表达式(),则匹配结果包含在数组中。

小程序中手机号识别的示例 

如果不加括号,相当于是把匹配到的手机号给丢掉了,加上括号,最终数组中才会包括我们匹配到的手机号。

到此这篇关于小程序中手机号识别的示例的文章就介绍到这了,更多相关小程序 手机号识别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
ie focus bug 解决方法
Sep 03 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 #Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 #Vue.js
vue3.0实现插件封装
Dec 14 #Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 #Vue.js
浅谈JSON5解决了JSON的两大痛点
Dec 14 #Javascript
Vue实现点击当前行变色
Dec 14 #Vue.js
如何在JavaScript中等分数组的实现
Dec 13 #Javascript
You might like
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
js实现拖拽功能
2017/03/01 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
用python 制作图片转pdf工具
2015/01/30 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python实现动态创建类的方法分析
2019/06/25 Python
python tkinter canvas使用实例
2019/11/04 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
中学生爱国演讲稿
2013/12/31 职场文书
工作说明书范文
2014/05/07 职场文书
销售员自我评价
2015/03/11 职场文书
企业安全生产规章制度
2015/08/06 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server