I need some help me with a peice of JavaScript that will convert telephone numbers to tel: links?

Few things I need this code to do: 1) Only find numbers in text, do not find numbers that are located in tag attributes. 2) Once the number is found wrap it in a tel: anchor. 3) Clean up the number for the href attribute (remove anything that is not a number). 4) Hopefully work pretty fast :)

Using jQuery is fine, but I'm not sure if that is the best way.

So the JavaScript will change all instances on the page of something like this:

<div data-something-that-looks-like-phone-number="(111) 222-3333"></div> 
(000) 000-0000

To this:

<div data-something-that-looks-like-phone-number="(111) 222-3333"></div>
<a href="tel:0000000000"> (000) 000-0000</a>

You will notice the data-something-that-looks-like-phone-number attribute did not change.

I have a regex that seems to work well for searching for phone numbers

[01]?[- .]?[\(\. ]?[2-9]\d{2}[\)\. ]?[- .]?\d{3}[- .]\d{4}

Any code to get me started would be very much appreciated. Thanks!

Also, there was a similar question earlier and the solution was "do not worry about it because phones do that automatically." That solution does not work for us, we need the tel links even on devices that do not do it automatically. Thanks again...

I need some help me with a peice of JavaScript that will convert telephone numbers to tel: links?

Few things I need this code to do: 1) Only find numbers in text, do not find numbers that are located in tag attributes. 2) Once the number is found wrap it in a tel: anchor. 3) Clean up the number for the href attribute (remove anything that is not a number). 4) Hopefully work pretty fast :)

Using jQuery is fine, but I'm not sure if that is the best way.

So the JavaScript will change all instances on the page of something like this:

<div data-something-that-looks-like-phone-number="(111) 222-3333"></div> 
(000) 000-0000

To this:

<div data-something-that-looks-like-phone-number="(111) 222-3333"></div>
<a href="tel:0000000000"> (000) 000-0000</a>

You will notice the data-something-that-looks-like-phone-number attribute did not change.

I have a regex that seems to work well for searching for phone numbers

[01]?[- .]?[\(\. ]?[2-9]\d{2}[\)\. ]?[- .]?\d{3}[- .]\d{4}

Any code to get me started would be very much appreciated. Thanks!

Also, there was a similar question earlier and the solution was "do not worry about it because phones do that automatically." That solution does not work for us, we need the tel links even on devices that do not do it automatically. Thanks again...

• javascript
• jquery
• regex

Share Improve this question Follow edited Feb 24, 2012 at 0:24 animuson♦ 54.8k2828 gold badges142142 silver badges150150 bronze badges asked Jan 26, 2012 at 16:44 MCMMCM 47711 gold badge77 silver badges1818 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Pretty old but I encounter this today and couldn't find any valid solution so I wrote this regex and added it as a bookmark button. It messes up the page (css / images) but allow you to click on the number to dial.

javascript:document.body.innerHTML = document.body.innerHTML.replace(/((\d[\d\-.]*){9,})/g, '<a href="tel://$1">$1</a>');

It will match at least 9 chars with a digit, . or -

---

I must clarify that its just suppose to help you click on a number to dial its not a perfect solution.

****** Update ******

OK, couldn't sleep so I created something much better. Now you just need to click on the number it will be turn to tel link and then just click on it as you would normally do.

javascript:document.addEventListener('click', function(e) { e = e || window.event; var target = e.target || e.srcElement; target.innerHTML = target.innerHTML.replace(/(([\d|\(][\d\-.\)\s]*){9,})/g, '<a _was_replaced="true" href="tel://$1">$1</a>'); if (!target.getAttribute("_was_replaced")) { e.preventDefault(); } }, true);

I don't see why you need a regex if you have the data attribute:

$("div[data-number]").each(function() {
    var $a = $("<a />").attr("href", "tel:" + $(this).data("number"));
    $a.html($(this).html());
    $(this).html($a);
});

Demo.

I think you are looking for something like this.

var phoneRegEX = /([01]?[- .]?[\(\. ]?[2-9]\d{2}[\)\. ]?[- .]?\d{3}[- .]\d{4})/;

$("div[data-number]").html(function(i, text) {
   text = text.replace(phoneRegEX, "<a href='tel://$1'>$1</a>");
   return text;
});

However your regex seems a bit limited

Here's some code that actually works without totally messing up the CSS and images, although it still breaks CSS rules that depend on specific hierarchy because it inserts SPAN elements, so I don't remend this for general use but it may help in certain cases.

I'm still searching for the perfect solution to this:

// Define a function to check if an element is a text node
function isTextNode(node) {
  return node.nodeType === Node.TEXT_NODE;
}

// Find all elements on the page
const elements = document.getElementsByTagName('*');

// Loop through each element and search for phone numbers in text nodes
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  const childNodes = element.childNodes;

  // Loop through the child nodes of the element
  for (let j = 0; j < childNodes.length; j++) {
    const node = childNodes[j];

    // Check if the child node is a text node
    if (isTextNode(node)) {
      const html = node.textContent;

      // Replace phone numbers with links
      const phoneRegex = /([\d|\(][\d\-.\)\s]*){9,}/g;
      const linkTemplate = '<a href="tel:$&">$&</a>';
      const linkedHtml = html.replace(phoneRegex, linkTemplate);

      // Update the text content of the text node if necessary
      if (linkedHtml !== html) {
        const newNode = document.createElement('span');
        newNode.innerHTML = linkedHtml;
        element.replaceChild(newNode, node);
      }
    }
  }
}