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


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 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
Angular中sweetalert弹框的基本使用教程
Jul 22 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里得到前天和昨天的日期的代码
2007/08/16 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
python的else子句使用指南
2016/02/27 Python
简述Python2与Python3的不同点
2018/01/21 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
Python如何实现单例模式
2016/06/03 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
团组织关系介绍信
2014/01/12 职场文书
县级文明单位申报材料
2014/05/23 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
通知格式
2015/04/27 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle