Question

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

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个）电话号码才能完成此任务？

Answer 1

试试这个

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

Answer 2

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

Answer 3

这是一个简单的例子，但功能齐全。

Fiddle

Answer 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;
}

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

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

4 个答案: