用正则给银行卡号部分加*号显示。。vue中根据不同的值，渲染相应的内容。。

先上效果图：

一.HTML部分：

         

                   

           

实现功能：

1.在未知银行卡位数的情况下要显示出银行卡的实际位数，其中后四位数字显示，其他位数以星号代替

js实现：

           var idNum = document.getElementById("idNum").value;

            var lastFour = idNum.slice(-4);

            var newArr = new Array(idNum.length-3).join("*")+lastFour;

           newArr = newArr.replace(/\s/g,'').replace(/(.{4})/g,"$1 ");

效果如图：

2.不管银行卡号多长，只需显示前后四位，中间位数只显示8位*，并且要求四位为一空格。

js实现：

           var reg = /^(\d{4})\d+(\d{4})$/;

            str = idNum.replace(reg,"$1 **** **** $2");

效果如图：

3. 同2，要是想将银行卡号只显示后四位，又想固定显示长度，只需将以上正则里面的$1 换成****即可。

后记：随笔只是平时的一些功能点总结，不足之处请多多指教哦！

2019.06.03 更新：

============在vue项目中需要实现这种效果又该怎么处理呢============

这时候，我直接使用了vue的computed计算属性

html写法： 

html

模拟的后端接口数据：

对后端接口数据进行处理：

最终的效果图：

效果图

在以上效果图中，细心的童鞋应该已经发现了，根据不同的银行，可以显示不同的背景图和银行的小icon.具体做法是先在文件中传入图片，再根据后台传过来的code区分应该显示哪个银行的背景色和小图标。

1.先在项目的image文件中传入图片

2.html写法：

3.computed 写法