4

This a similar question to this old one that never got answered: Wrap <a> tag around phone number using jquery

I am making a simple jQuery mobile site out of an existing site that uses a custom CMS. In the CMS there are entries that contain code and text like

<div id="departments">
   <ul>
     <li> Department 1 - (555) 123-1234</li>
     <li> Department 2 - (555) 123-4321</li>
     <li> Department 3 - (555) 123-6789</li>
   </ul>
</div>

I know that most mobile phone browsers will automatically convert the phone numbers to clickable links that launch the dialer with the phone number ready to go. However, not all do and I'd like to be able to use jQuery to turn the above into:

<div id="departments">
       <ul>
         <li> Department 1 - <a href="tel:5551231234">(555) 123-1234</a></li>
         <li> Department 2 - <a href="tel:5551234321">(555) 123-4321</a></li>
         <li> Department 3 - <a href="tel:5551236789">(555) 123-6789</a></li>
       </ul>
</div>

I understand the steps to produce this involve using RegEx to match a phone number pattern.

Any ideas? I feel like this would be a helpful plugin to write for lot of people.

UPDATE

Here is what I've tried using the answer and comments below:

var regex = ((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4};

var text = $("body:first").html();

text = text.replace(regex, "<a href=\"tel:$1\">$1</a>");

$("body:first").html(text);

fiddle: http://jsfiddle.net/PShYy/

I can tell that the pattern should work by using: http://gskinner.com/RegExr/?35o5p

I believe it is now a matter of how to correctly do a find and replace in jQuery with regex. I'll continue to research but if anyone wants to chime in. I'd appreciate it.

Community
  • 1
  • 1
Erik Berger
  • 599
  • 1
  • 10
  • 24

2 Answers2

7

Using John's answer as a base I got it to work with:

var regex = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/g; 

var text = $("body:first").html();

text = text.replace(regex, "<a href=\"tel:$&\">$&</a>");

$("body:first").html(text);

Demo: http://jsfiddle.net/PShYy/2/

Erik Berger
  • 599
  • 1
  • 10
  • 24
  • Although it is a old question, just want to update one thing. The above regex will also hyperlink years like 2`015-2016` into tel numbers. – TheGodWings Jun 18 '16 at 10:31
0

You can replace all instances of your phone number with regex

js

    var text = $("body:first").html();

    text = text.replace(/(phone\-number)/g, "<a href=\"tel:$1\">$1</a>");

    $("body:first").html(text);

html

        <div id="departments">
           <ul>
             <li> Department 1 - phone-number</li>
             <li> Department 2 - phone-number</li>
             <li> Department 3 - phone-number</li>
           </ul>
        </div>
John
  • 5,942
  • 3
  • 42
  • 79
  • 3
    That's an interesting way to answer only half the question. I'm pretty sure the OP would like to see that RegEx, as well. – DevlshOne Jul 27 '13 at 19:10
  • 2
    @DevlshOne Instead of being snarky, you could spend a few minutes writing the regex to match every possible phone number in existence. – John Jul 27 '13 at 19:12
  • The phone numbers have a very specific pattern `(DDD) DDD - DDDD`. RegEx is not for matching EXACT strings, it's for pattern-matching. In this case, it's only one pattern so "every possible phone number in the world" makes no sense. The reason I didn't answer this question myself is because the OP made no attempt to solve the problem on their own nor did they do a very good job of searching the site for similar questions. – DevlshOne Jul 27 '13 at 19:15
  • Thanks guys, I'm working on posting some fiddles of my failed attempts. I did do a lot of research to find an answer on SO or other sites before I asked my question. – Erik Berger Jul 27 '13 at 19:16
  • @DevlshOne If you had taken the time to see the question he linked to. You would see that it has regex to match not only that format, but most common formats even though it failed to do so. So instead of including that broken regex pattern for matching multiple formats in my answer. I quickly gave an example for replacing the phone numbers with links as requested. – John Jul 27 '13 at 19:17
  • I updated my original post with an example of what I've tried. – Erik Berger Jul 27 '13 at 20:22
  • @ErikBerger that isn't how you format regex. Also you're forgetting the attribute I added to the end of my regex – John Jul 27 '13 at 20:32
  • ok, I think I got it. It still has the parenthesis and dashes in the href but I think it should work. http://jsfiddle.net/PShYy/2/ – Erik Berger Jul 27 '13 at 21:35
  • @ErikBerger looks like it – John Jul 27 '13 at 21:56