如何用JavaScript将段落中的邮箱和手机号都转为可点击链接

问题原因 #

• 你使用的手机号正则首尾带有^和$定位符，规则要求匹配完整的整段字符串，而手机号只是段落中的一部分内容，因此无法命中匹配
• 原手机号正则的匹配规则冗余度过高，适配了过多非必要的特殊格式场景，反而干扰了普通纯数字手机号的识别

修复后的完整代码 #

<div class="container">
  <p id="contactInfo">
    Address 27, Tokio 679 01<br>
    Tel: 0909000000<br>
    E-mail: exampplet@example.com
  </p>
</div>

<script>
var contact_info = document.getElementById('contactInfo');
var html = contact_info.innerHTML;
if (html) {
    // 替换邮箱为mailto链接
    const emailRegex = /([a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4})/ig;
    html = html.replace(emailRegex, '<a href="mailto:$1">$1</a>');
    // 替换手机号为tel链接，默认适配10-11位纯数字手机号，可根据实际场景调整规则
    const telRegex = /(\+?\d{10,11})/g;
    html = html.replace(telRegex, '<a href="tel:$1">$1</a>');
    // 统一写入DOM
    contact_info.innerHTML = html;
}
</script>

拓展说明 #

如果需要支持带横杠、空格分隔的手机号格式，可以把手机号正则调整为/(\+?[\d\s-]{10,15})/g，可根据实际业务里的手机号格式调整匹配长度和允许的特殊字符范围，避免误匹配地址里的短数字组合。

内容的提问来源于stack exchange，提问作者mask