h5小技巧积累-如何从一段话中得到电话，触摸直接打电话？

前言

从一堆文字中拿到电话在手机端实现电话区分展示，触摸可以吊起手机电话键盘。

实现

首先后端接口直接扔了一堆文字给我，里面包含电话和时间（有可能有固定电话或者手机），我们需要在界面显示如下界面，并且点击电话可以吊起手机电话键盘，直接拨打电话

第一步获取电话

首先我们需要从一堆文字中拿到我们想要的电话，这里直接贴上代码，只要用正则实现

 checkTel (text) {
      var isPhone = /^0[0-9]{2,3}-?[0-9]{8}$/;//固话
      var isMob = /^(((\+?86)|(\(\+86\)))?([1][3,4,5,7,8][0-9]{9}))$/;//手机 
      let val = text.replace("-", "")
      var num = val.split(/[^0-9/-/+]/); // 分割取出连续数字
      var s = num.toString();  //转化成字符串  测试数据  
      var arr = s.split(",");
      var tel = [];
      var sol = [];
      for (var i = 0; i < arr.length; i++) {
        if (isPhone.test(arr[i])) {
          sol += arr[i]
        }
        else if (isMob.test(arr[i])) {
          tel += arr[i]
        }
      }
      this.telPhone = tel
      this.solPhone = sol
      console.log(this.telPhone,this.solPhone)
  },

我们向checkTel传入那一堆文字，获取到的telPhone就是手机号码，solPhone就是固话

渲染到界面，并且实现不同样式和触摸打电话功能

触摸吊起打电话功能，直接使用a标签

<a href="tel:${this.telPhone}" style="color:#008afc">${this.telPhone}</a>

实现思路是，我们把那一堆文字中的电话号码，用a标签替代，然后渲染出来就可以了，这里我们先建一个显示div空间

 <div
  class="tips"
  id="tipsPay"
>
</div>

然后得到div元素，创建一个span元素，然后将a标签赛进span元素中，再将创建的span元素塞到div元素下进行显示，到此搞定。

checkTel (text) {
      var isPhone = /^0[0-9]{2,3}-?[0-9]{8}$/;//固话
      var isMob = /^(((\+?86)|(\(\+86\)))?([1][3,4,5,7,8][0-9]{9}))$/;//手机 
      let val = text.replace("-", "")
      var num = val.split(/[^0-9/-/+]/); // 分割取出连续数字
      var s = num.toString();  //转化成字符串  测试数据  
      var arr = s.split(",");
      var tel = [];
      var sol = [];
      for (var i = 0; i < arr.length; i++) {
        if (isPhone.test(arr[i])) {
          sol += arr[i]
        }
        else if (isMob.test(arr[i])) {
          tel += arr[i]
        }
      }
      this.telPhone = tel
      this.solPhone = sol
      if (this.telPhone.length > 0) {
        let aHtmlOne = `<a href="tel:${this.telPhone}" style="color:#008afc">${this.telPhone}</a>`
        val = val.replace(this.telPhone, aHtmlOne)
      }
      if (this.solPhone.length > 0) {
        let aHtmlTwo = `<a href="tel:${this.solPhone}" style="color:#008afc">${this.solPhone}</a>`
        val = val.replace(this.solPhone, aHtmlTwo)
      }
      var dom = document.createElement('span')
      dom.innerHTML = val
      let tipEle = document.getElementById("tipsPay")
      tipEle.appendChild(dom)
    },