识别富文本中的邮箱地址和电话号码

最新推荐文章于 2025-10-09 10:52:00 发布

原创最新推荐文章于 2025-10-09 10:52:00 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

代码片段

3 篇文章

订阅专栏

本文介绍了一种在富文本中自动检测并格式化邮箱地址和电话号码的方法，使用JavaScript实现，将检测到的邮箱和电话号码包裹在a标签内，以便用户能够直接点击进行邮件发送或拨打电话。

检测字符串中的邮箱地址和数字，并用a标签包裹起来，使之能响应跳转邮箱和打电话的功能。

HTML部分：

<body>
  <div id="pageContent"></div><!--用于显示富文本--->
</body>

JS部分：

var str='发送<img src="dsfwer@qq.com"/>到发文<a href="11dfwerrer">15487878</a>幅度为让<div>aaa21399999@qq.com 21456699cc<b>aade</b></div><h2>dfwer3434@qq.com<span>是的服务而</span></h2>水电费无人<div>sdfsdf<p>fw323@jianq.com er<a href="11122222@qq.com 44">wer@qq.com</a></p></a>';//用于测试的一段富文本字符串
  formatMailNumber(str)
  function formatMailNumber(str){
    //格式化邮箱地址和电话号码
    var _content=document.getElementById('pageContent');
    //先把原字符串插入页面
    _content.innerHTML=str;
    //获取插入后的所有元素
    let _children=_content.getElementsByTagName("*")
    //遍历元素
    for(let i=_children.length-1;i>=0;i--){
      let _item=_children[i]
      //如果元素本身是 链接、图片或引用外部链接的窗口 则不处理
      if(_item.tagName=='A'||_item.tagName=='IMG'||_item.tagName=='FRAME') continue
      //通过正则表达式匹配邮箱地址
      let newStr=_item.innerHTML.replace(/([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)/img,function(a,b,c,d,e,f){
        
        if(canFormat(e,f)){
          return '<a href="mailto:'+a+'">'+a+'</a>'
        }else{
          return a
        }
      })
      _item.innerHTML=newStr
      //通过正则表达式匹配电话号码
      let newStr2=_item.innerHTML.replace(/(\d{6,11})/img,function(a,b,c,d){
        if(canFormat(c,d)){
          return '<a href="tel:'+a+'">'+a+'</a>'
        }else{
          return a
        }
      })
      _item.innerHTML=newStr2
    }
  }
  function canFormat(_index,_html){
    //检测需要替换的字符串是否在'A'、'IMG'、'FRAME'里面，或者在元素的属性值里面
    let _body=document.getElementsByTagName('body')[0]
    let _div=document.createElement('div')
    _div.innerHTML=_html.slice(0, _index) + '<i id="detectItem"></i>' + _html.slice(_index);
    _body.appendChild(_div)
    if(!document.getElementById('detectItem')) {
      //需要替换的字符串在元素的属性值里面
      _div.remove()
      return false
    }
    let _tagName=document.getElementById('detectItem').parentNode.tagName
    _div.remove()
    if(_tagName=='A'||_tagName=='IMG'||_tagName=='FRAME'){
      //需要替换的字符串在'A'、'IMG'、'FRAME'里面 
      return false
    }else{
      return true
    }
  }

运行效果：

格式化前：