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


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 相关文章推荐
jquery实现图片按比例缩放示例
Jul 01 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 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中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
打包发布Python模块的方法详解
2016/09/18 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python之文字转图片方法
2018/05/10 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python列表返回重复数据的下标
2020/02/10 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
什么是会话Bean
2015/05/14 面试题
升职自荐信范文
2013/10/05 职场文书
总监职责范文
2013/11/09 职场文书
百度吧主申请感言
2014/01/12 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
MySQL 服务和数据库管理
2021/11/11 MySQL
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python