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

当然，我对正则掌握的很少，在数据处理方面肯定有更好的方式，这个需要接下来花时间系统的学习一下强大的正则表达式，这篇文章主要是记录一下我自己的实现过程，当然如果能帮到别人就更好了。