3

Is there a javascript library the can recognize phone numbers in a web page? Just like what skype did on their firefox plugin.

Or do you know a way on how to do it? Websites or any tutorial that do the same would be very helpful.

Your reply is greatly appreciated.

Best,

mr.b
  • 2,708
  • 8
  • 39
  • 64
  • A regular expression could be used to find phone numbers. A very basic one would be something like `/\d\d\d-\d\d\d-\d\d\d\d/`. But what do you want to do with the numbers you find? – user113716 May 10 '10 at 23:33
  • I wanted to convert all the phone numbers in a page into a link. Then I will hook it up into my application. Probably a pop-up will show when the link is clicked. – mr.b May 10 '10 at 23:44
  • You can always just look at how Skype did it. Download the FF extension (the .xpi file) and then unzip it (.xpi's are just .zip's with a different name) and start looking around. I haven't done this myself so I have no idea if it will be easy to find, but it's worth a try. Let us know what you find out! – Tyler Jun 18 '10 at 20:35

3 Answers3

3
var makePhoneLinks = function()
{
    var tNodes = [];
    getTextNodes(document.body,false,tNodes,/(((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4})/ig);                              
    var l = tNodes.length;
    while(l--)
    {
        wrapNode(tNodes[l],/(((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4})/ig,"<a target='#'>$1</a>");
    }  
}
function getTextNodes(node, includeWhitespaceNodes,textNodes,match) {

    if (node.nodeType == 3) {
        if (includeWhitespaceNodes || !/^\s*$/.test(node.nodeValue)) {
            if(match){
                if(match.test(node.nodeValue))
                    textNodes.push(node);
            }
            else {
                textNodes.push(node);
            }
        }
    } else {
        for (var i = 0, len = node.childNodes.length; i < len; ++i) {
            getTextNodes(node.childNodes[i],includeWhitespaceNodes,textNodes,match);
        }
    }

}
function wrapNode(n,match,m) {

    var temp = document.createElement('div');
    if(n.data)
        temp.innerHTML = n.data.replace(match, m);
    else{
        //whatever
    }
    while (temp.firstChild) {
        n.parentNode.insertBefore(temp.firstChild,n);

    }
    n.parentNode.removeChild(n);

}
jw56578
  • 400
  • 1
  • 13
2

To find matches within a string, you'll want to use a regular expression. This one (although somewhat lengthy) works pretty well:

^(1\s*[-\/\.]?)?(\((\d{3})\)|(\d{3}))\s*[-\/\.]?\s*(\d{3})\s*[-\/\.]?\s*(\d{4})\s*(([xX]|[eE][xX][tT])\.?\s*(\d+))*$

(found here)

This will match "2405525009", "1(240) 652-5009", and "240/752-5009 ext.55", but not "(2405525009" or "2 (240) 652-5009".

To find all matches, you may want to repeatedly apply the exec() method in a while loop, as seen here.

Community
  • 1
  • 1
Adam
  • 1,744
  • 1
  • 14
  • 34
  • Thank your for your reply. Yes, regular expression is pretty much the tool but I don't want any input box on my page. I just want to crawl to the page and recognize those phone numbers then convert it to link. – mr.b May 10 '10 at 23:47
2

Someone else may have a better way of doing this, but this seems to give you a link around each phone number.

I just used my simple regular expression, so you may want to substitute the one that Adam provided.

$(document).ready(function () {

    $('*','body').each(function() {
        $(this).html( $(this).html().replace(/(\d\d\d-\d\d\d-\d\d\d\d)/g,'<a href="#">$1</a>') );
    });

});

Hope it helps.

EDIT:

It may work as well, or better, with this version.

$(document).ready(function () {
    $('body').html( $('body').html().replace(/(\d\d\d-\d\d\d-\d\d\d\d)/g,'<a href="#">$1</a>') );
});

I don't know if there are any pitfalls, but seems to work with a fairly simple page.

user113716
  • 318,772
  • 63
  • 451
  • 440