先上效果圖：
一.HTML部分：
? ? ? ? ? <div class="card-num">
? ? ? ? ? ? ? ? ? ? <input type="text" id="idNum" value="12345678901234567" readonly="readonly">
? ? ? ? ? ?</div>
實現(xiàn)功能：
1.在未知銀行卡位數(shù)的情況下要顯示出銀行卡的實際位數(shù)讨跟，其中后四位數(shù)字顯示，其他位數(shù)以星號代替
js實現(xiàn)：
? ? ? ? ? ?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.不管銀行卡號多長惜论，只需顯示前后四位许赃，中間位數(shù)只顯示8位*，并且要求四位為一空格馆类。
js實現(xiàn)：
? ? ? ? ? ?var reg = /^(\d{4})\d+(\d{4})$/;
? ? ? ? ? ? str = idNum.replace(reg,"$1 **** **** $2");
效果如圖：
3. 同2混聊，要是想將銀行卡號只顯示后四位，又想固定顯示長度，只需將以上正則里面的$1 換成****即可句喜。
后記：隨筆只是平時的一些功能點總結(jié)预愤，不足之處請多多指教哦！
2019.06.03?更新：
============在vue項目中需要實現(xiàn)這種效果又該怎么處理呢============
這時候咳胃，我直接使用了vue的computed計算屬性
html寫法：?
模擬的后端接口數(shù)據(jù)：
對后端接口數(shù)據(jù)進行處理：
最終的效果圖：
在以上效果圖中植康，細(xì)心的童鞋應(yīng)該已經(jīng)發(fā)現(xiàn)了，根據(jù)不同的銀行展懈，可以顯示不同的背景圖和銀行的小icon.具體做法是先在文件中傳入圖片销睁，再根據(jù)后臺傳過來的code區(qū)分應(yīng)該顯示哪個銀行的背景色和小圖標(biāo)。
1.先在項目的image文件中傳入圖片
2.html寫法：
3.computed?寫法
