基于vue的H5页面物流信息拨打电话功能

最近开发了一个H5展现物流信息的需求，对api提供的接口数据进行展现，可是要求物流信息中的电话号要实现点击拨打电话的功能，最终实现的效果是这样的

而咱们接口提供的数据格式是这样的：

虽然移动端有些webkit内核的webview能够识别连续的数字为电话号，可是显然不是合理的实现方案。

H5想要实现拨打电话功能，是要采用 <a href="tel: 1688888888">拨打电话</a> 的形式，来调起手机的拨号键盘的，因此想要实现拨打电话功能，就要将代码改形成这种形式。

考虑过让后端把电话号做为单独的字段返回，可是电话号出现的位置也是不固定的，处理起来仍旧棘手。最后采用了一个我认为是标准的解决思路：

1. 先对数据进行处理，遍历context,利用正则识别到数据中的电话号
2. 对电话号进行替换，替换为<a href="tel: 1688888888">1688888888</a>
3. 将文本做为html渲染到页面上，这一点能够利用vue的 v-html指令

接下来，show you the code

html

js

固然，我对正则掌握的不多，在数据处理方面确定有更好的方式，这个须要接下来花时间系统的学习一下强大的正则表达式，这篇文章主要是记录一下我本身的实现过程，固然若是能帮到别人就更好了。