mask phone number, show full phone number on mouse over
<p>I'm building a little application that displays a bunch of phone numbers.</p>

<p>The javascript object looks something like this:</p>

<pre><code>myObject.phoneNumber = model.phoneNumber;
</code></pre>

<p>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!</p>

<p>I was thinking of doing something like this...</p>

<pre><code>myObject.phoneNumber = model.phoneNumber;
myObject.maskedNumber = model.phoneNumber.replaceFirst6WithX's //psuedoCode
</code></pre>

<p>Then on mouse over, </p>

<pre><code>    $(".phoneNumber")
        .mouseOver(function (e) {
            $(".phoneNumber").hide();
            $(".maskedNumber").show()
        });
</code></pre>

<p>and on mouse out do the opposite.</p>

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