Question

I’m building a little application that displays a bunch of phone numbers.

The javascript object looks something like this:

myObject.phoneNumber = model.phoneNumber;

Then i display myObject.phoneNumber on the screen. However, I’d like to mask it so look something like XXX-XXX-1234. Then, whenever you mouse over the phone number, you see the whole phone number!

I was thinking of doing something like this…

myObject.phoneNumber = model.phoneNumber;
myObject.maskedNumber = model.phoneNumber.replaceFirst6WithX's //psuedoCode

Then on mouse over,

    $(".phoneNumber")
        .mouseOver(function (e) {
            $(".phoneNumber").hide();
            $(".maskedNumber").show()
        });

and on mouse out do the opposite.

So my question is: how do i mask (or hide the first 6) numbers of the phone number to accomplish this?

Answer 1

This is a simplistic example, yet functional.

Fiddle