屏蔽电话号码，鼠标悬停时显示完整的电话号码答案

【问题标题】：mask phone number, show full phone number on mouse over屏蔽电话号码，鼠标悬停时显示完整的电话号码
【发布时间】：2012-09-30 01:01:59
【问题描述】：

我正在构建一个显示一堆电话号码的小应用程序。

javascript 对象看起来像这样：

myObject.phoneNumber = model.phoneNumber;

然后我在屏幕上显示 myObject.phoneNumber。但是，我想掩盖它，使其看起来像 XXX-XXX-1234。然后，只要将鼠标悬停在电话号码上，您就会看到整个电话号码！

我正在考虑做这样的事情......

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

然后鼠标悬停，

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

鼠标移开则相反。

所以我的问题是：我如何屏蔽（或隐藏前 6 个）电话号码来完成此操作？

【问题讨论】：

它需要安全吗？即如果有人可以从 HTML 源中读取完整的电话号码，可以吗？
不，它不需要是安全的。电话号码可以在源代码中读取。这只是为了减少混淆，而不是向用户隐藏任何敏感信息。

标签： javascript jquery

【解决方案1】：

这是一个简单的例子，但很实用。

Fiddle

【讨论】：

【解决方案2】：

试试这个

var phone = "1234567890";
phone.replace(phone.substring(0,6), 'XXXXXX');

【讨论】：

【解决方案3】：

myObject.maskedNumber = "XXX-XXX" + myObject.phoneNumber.substring(7);

【讨论】：

【解决方案4】：

您可以有一个函数将前 6 位数字/字符的字符串返回为“x”：

function mark(phone) {
    var str='';
    var count=0;
    for(i=0; i<phone.length; i++) {
        if(phone.charAt(i)!="-" && count<6) {
            str+='x';
            count++;
        }
        else
            str+=phone.charAt(i);
    }
    return str;
}

当鼠标悬停在元素上时，您可以将元素的内容更改为返回的字符串。这说明了数字中的“-”。您还可以更改它以检测不是数字的任何内容。

【讨论】：