最近遇到一个新的需求，页面展示物流信息中需要自动抓取字符串里的电话号码，添加高亮样式并点击调用拨打电话，下面对这个功能的实现做下整理，希望能帮到需要这个功能的小伙伴们
实现功能前大概是这个样子
现在要做的是抓取这段文本里的所有手机号码并添加样式
本次项目的环境是基于vue，不过对于其他框架的项目依然适用，接下来附代码：

   selectPhoneNumber(str) {
      var regx = /(1[3|4|5|7|8][\d]{9}|0[\d]{2,3}-[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})/g;
      var phoneNums = str.match(regx);
      if (phoneNums) {
        for (var i = 0; i < phoneNums.length; i++) {
          var temp = phoneNums[i]
          str = str.replace(phoneNums[i], '<a href="tel:' + temp + '"  class="copy phone-num" style=" text-decoration: underline;color: #2878FF;">' + temp + '</a>');
        }
      }
      return str;
    },

基本的逻辑就是用正则抓取出文本中的电话号码，由a标签的href调起拨打电话的功能，添加html元素包裹和样式后返回，然后页面进行渲染
抓取后效果

因为涉及代码中拼接html元素，在vue项目中不会渲染，依然会作为字符串输出到页面上，vue官方提供了一个v-html指令可以解决这个问题，但也有说法这个指令会有些问题，如果有更好的实现方案希望留言告知一下
另外还遇到v-html中html元素上的事件不能用，这个问题将在另一篇文章中提供解决方案

       <div v-html="item.name" @click="copyPhone">
      </div>