Wrap <a> tag around phone number using jquery

Question

I'm loading a page with AJAX and would like to use Jquery to search for phone numbers (whose format is 555.555.5555) on the loaded page and wrap them with tel links:

<a href="tel:phone-number-here"> </a>

I know the parts I need to accomplish this (I think): Regex and .wrap(). I'm just not sure how to piece them together with the code I've got. I'm also not sure how to get Jquery to retain found numbers and insert them inside the tel links. Would I have to use each and $(this) with variables?

Here's the regex I found for identifying 7 - 10 digit numbers. I want to leave it open to various delimiters in case our site stops using periods in the future:

^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$

And here's the code I'm using to load each page:

 $(".services").click(function(){  
    var loadUrl = "http://www.example.com";      
    $("#content").html(ajax_load).load(loadUrl + " #content");  
 });

Any help would be appreciated.

Answer 1

This question will show you how to get all the elements on a page with a certain string. You could probably use a regex as well. Then you could do string replacement using your regex on all the found elements.