先上效果图：
一.HTML部分：
<div class="card-num">
<input type="text" id="idNum" value="12345678901234567" readonly="readonly">
</div>
实现功能：
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 写法
