javascript - 使用 JavaScript 将段落中的电话号码和电子邮件更改为可点击的链接

Question

我有一段包含一些地址数据，现在我想用正则表达式电子邮件和电话号码替换为可点击链接。

<div class="container">
  <p id="contactInfo">
    Address 27, Tokio 679 01<br>
    Tel: [phone]<br>
    E-mail: [e-mail]
  </p>
</div>

<script>
var contact_info = document.getElementById('contactInfo');
    var html = contact_info.innerHTML;
    if (html) {
        var regex = /([a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4})/ig;
        contact_info.innerHTML = html.replace(regex, '<a href="mailto:$1">$1</a>');
    }
</script>

现在电子邮件将更改为可点击的链接，但我怎样才能将电话号码也更改为可点击的链接？

我试过这个：但它从来没有工作过：

<script>
    var contact_info = document.getElementById('contactInfo');
    var html = contact_info.innerHTML;
    if (html) {
        var pattern = /^\s*(?:\+?(\d{1,3}))?[\W\D\s]*(\d[\W\D\s]*?\d[\D\W\s]*?\d)[\W\D\s]*(\d[\W\D\s]*?\d[\D\W\s]*?\d)[\W\D\s]*(\d[\W\D\s]*?\d[\D\W\s]*?\d[\W\D\s]*?\d)(?: *x(\d+))?\s*$/g;
        contact_info.innerHTML = html.replace(pattern, '<a href="tel:$1$2$3$4$5">$1$2$3$4$5</a>');
    }
</script>

这是 codepen 示例：在此处输入链接描述

标签： javascripthtml

Answer 1

您可以对移动和电子邮件使用不同的正则表达式，然后相应地替换它。

const contact_info = document.getElementById('contactInfo');
const html = contact_info.innerHTML;
if (html) {
  const emailRegex = /([a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4})/ig;
  const mobileregex = /Tel:\s+((\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4})/g;
  contact_info.innerHTML = html.replace(emailRegex, '<a href="mailto:$1">$1</a>').replace(mobileregex, 'Tel: <a href="tel:$1">$1</a>');
}

<div class="container">
  <p id="contactInfo">
    Address 27, Tokio 679 01<br> Tel: [phone]<br> E-mail: [e-mail]
  </p>
</div>