Friendly Phone Format

5205552381 is hard to read

I’ve been building a new version of my employer’s Intranet. One of the new features I added is an Employee Directory (Goodbye ridiculous Excel file w/ 5 tabs and the headache it was to maintain it!). Unfortunately, in demoing it to a few folks, the common complaint was that the phone numbers were displayed in a format that was difficult to read — especially when looking at row after row of them.

I really wasn’t looking forward to touching each record in the db to correct the phone number format. I wondered if I could fake it w/ some javascript after the page loaded.

jQuery("table.gf_directory td[title*='Direct']").each(function() {
    var phoneString = jQuery(this).text();
    jQuery(this).text(nicePhone(phoneString));
});

With jQuery, I search for table cells w/ the title attribute containing “Direct”… and for each one, I filter the text of the cell through a new nicePhone() function.

function nicePhone(direct) {
    if (direct != "" && direct != null) {
        return direct.replace(
            /(d{3})(d{3})(d{4})/,
            "($1) $2-$3"
        );
    }
}

It works!

Sweet! 5205552381 gets turned into (520) 555-2381.

formatter.js

Then, of course, I run across this today: formatter.js

Figures.