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


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判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
微信小程序云开发详细教程
May 16 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
微信小程序实现点击页面出现文字
Sep 21 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Python装饰器语法糖
2019/01/02 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
基于python实现对文件进行切分行
2020/04/26 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
英文自荐信
2013/12/19 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
代理协议书
2014/04/22 职场文书
优秀学生评语大全
2014/04/25 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
教师党员整改措施
2014/10/24 职场文书
升职自荐书
2019/05/09 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android