js 写一个电话号码马赛克效果

Question

如图，怎么用js让电话号码中间的几个数字不可见 然后点击就可见 再次点击又不可见 前端白痴 求大神支招！！！ 想要看上去就很优雅的代码！！

Answer 1

用正则呗！大概如下：

<span data-value="13418080097" class="phoneNum"></span>

$('.btn').toggle(function(){
    $('.phoneNum').html($(this).attr('data-value').replace(/(\d{3})\d+(\d{5})/,'$1*****$2'));
},function(){
    $('.phoneNum').html($(this).attr('data-value'));
});

Answer 2

你是想要保护用户隐私呢还是干嘛？保护隐私就不能在前端看到代码。就没有点击切换状态这样的效果必要了。
要点击切换状态的话，也就是这个电话号码不用保护隐私了。除非点击还异步去请求后端返回电话号码数据。

<span class='tel'>123<span class="asterisk">***</span><span class="number">2333</span>5578</span>
//先把.number给display：none掉
$('.tel').click(function(){
    $('.asterisk').toggle('slow');
    $('.number').toggle('slow');
});

这样就可以了。用原生的方法也是依靠display去写。
还有，继续巩固下基础show hide - 一起学习

Answer 3

想办法把原来的号码保存起来，可以保存在属性中，也可以用建个映射表来保存，也可以有其它方式

再把号码中间替换成星号，用正则，截取+合并等方式都可以处理

再处理 <span> 的点击事件，根据当前的状态来显示/隐藏号码（替换 span 的 innerText）