JS實(shí)現(xiàn)手機(jī)號(hào)脫敏、郵箱脫敏、身份證號(hào)脫敏、姓名脫敏等常見(jiàn)脫敏代碼示例

一:為什么要脫敏?
在前端項(xiàng)目開(kāi)發(fā)中,數(shù)據(jù)的展示與渲染是非常關(guān)鍵的一步。通常我們會(huì)從后端接口直接拿到數(shù)據(jù),但是在某些情況下渲染一些隱私信息,比如身份證號(hào),手機(jī)號(hào)等。這些我們就需要進(jìn)行脫敏處理,比如前三后四的格式,又或者其它格式。這樣有利于布局和保密。接下來(lái),就讓我們看一下常見(jiàn)的脫敏種類吧!
二:如何實(shí)現(xiàn)脫敏?
在實(shí)現(xiàn)脫敏上,我們主要使用的是正則表達(dá)式和字符串的 replace 替換這兩個(gè)技術(shù)。字符表達(dá)式是用來(lái)匹配我們要去進(jìn)行替換的數(shù)據(jù)。replace 則是根據(jù)各種不同的需求替換成不同的字符。
1.手機(jī)號(hào)脫敏(前三后四)
// 手機(jī)號(hào)做脫敏處理
function phoneHide(phone) {
let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; // 定義手機(jī)號(hào)正則表達(dá)式
phone = phone.replace(reg, '$1****$2');
return phone; // 185****6696
}2.郵箱脫敏
function emailHide(email) {
var avg;
var splitted;
var email1;
var email2;
splitted = email.split('@');
email1 = splitted[0];
avg = email1.length / 2;
email1 = email1.substring(0, email1.length - avg);
email2 = splitted[1];
return email1 + '***@' + email2; // 輸出為81226***@qq.com
}3.身份證號(hào)脫敏
function cardHide(card) {
const reg = /^(.{6})(?:\d+)(.{4})$/; // 匹配身份證號(hào)前6位和后4位的正則表達(dá)式
const maskedIdCard = card.replace(reg, '$1******$2'); // 身份證號(hào)脫敏,將中間8位替換為“*”
return maskedIdCard; // 輸出:371782******5896
}4.姓名脫敏
function nameHide(name) {
if (name.length == 2) {
name = name.substring(0, 1) + '*'; // 截取name 字符串截取第一個(gè)字符,
return name; // 張三顯示為張*
} else if (name.length == 3) {
name = name.substring(0, 1) + '*' + name.substring(2, 3); // 截取第一個(gè)和第三個(gè)字符
return name; // 李思思顯示為李*思
} else if (name.length > 3) {
name = name.substring(0, 1) + '*' + '*' + name.substring(3, name.length); // 截取第一個(gè)和大于第4個(gè)字符
return name; // 王五哈哈顯示為王**哈
}
}三:結(jié)尾
脫敏處理是信息安全的重要手段,它可以有效保護(hù)敏感信息不被暴露。在JavaScript中,我們可以使用一些基本的脫敏處理方法。以上這些就是比較常見(jiàn)的方法,各位小伙伴可以根據(jù)自己的需求使用哦。當(dāng)然還有各種不同的情景,不過(guò)相信各位小伙伴可以通過(guò)上面的代碼寫(xiě)出更適配你所需要的邏輯。

附前端js讓手機(jī)號(hào)脫敏的其他幾種方法
標(biāo)題手機(jī)號(hào)脫敏方法有幾種
// 方法一:使用substring()方法
let phoneNumberOne='19909091221';
let desensitizationOne=phoneNumberOne.substring(0,3)+' **** '+phoneNumberOne.substring(7);
// 方法二:使用substring()方法
let phoneNumberTwo='19909091221';
let desensitizationTwo=phoneNumberTwo.substr(0,3)+' **** '+phoneNumberTwo.substr(7);
// 方法三:使用正則表達(dá)式方法
let phoneNumberThree='19909091221';
let regular=/(\d{3})\d*(\d{4})/
let desensitizationThree=phoneNumberThree.replace(regular,'$1****$2');
//總結(jié)一下區(qū)別:
// substring第一個(gè)參數(shù)是開(kāi)始下標(biāo),第二個(gè)是結(jié)束下標(biāo)。
// substr第一個(gè)參數(shù)是開(kāi)始下標(biāo),第二個(gè)是截取幾位。
到此這篇關(guān)于JS實(shí)現(xiàn)手機(jī)號(hào)脫敏、郵箱脫敏、身份證號(hào)脫敏、姓名脫敏等常見(jiàn)脫敏的文章就介紹到這了,更多相關(guān)JS常見(jiàn)脫敏手機(jī)號(hào)郵箱等內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
如何使用uniapp開(kāi)發(fā)微信小程序獲取當(dāng)前位置詳解
uni-app小程序項(xiàng)目無(wú)法直接獲取到地理位置,只能通過(guò)獲取到的經(jīng)緯度,調(diào)用第三方地圖Api獲取,下面這篇文章主要給大家介紹了關(guān)于如何使用uniapp開(kāi)發(fā)微信小程序獲取當(dāng)前位置的相關(guān)資料,需要的朋友可以參考下2022-10-10
微信小程序loading組件顯示載入動(dòng)畫(huà)用法示例【附源碼下載】
這篇文章主要介紹了微信小程序loading組件顯示載入動(dòng)畫(huà)用法,結(jié)合實(shí)例形式分析了loading組件顯示載入動(dòng)畫(huà)的相關(guān)事件操作與屬性設(shè)置技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
BootStrap的select2既可以查詢又可以輸入的實(shí)現(xiàn)代碼
這篇文章主要介紹了bootstrap的select2既可以查詢又可以輸入的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
javascript實(shí)現(xiàn)點(diǎn)擊產(chǎn)生隨機(jī)圖形
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊產(chǎn)生隨機(jī)圖形,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01
TypeScript中l(wèi)et和var的區(qū)別介紹
這篇文章主要介紹了TypeScript?let與var的區(qū)別,主要從作用域等這幾個(gè)方面做詳細(xì)介紹,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07
javascript實(shí)現(xiàn)模擬時(shí)鐘的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)模擬時(shí)鐘的方法,涉及javascript操作時(shí)間實(shí)時(shí)顯示的相關(guān)技巧,需要的朋友可以參考下2015-05-05
Javascript匿名函數(shù)的一種應(yīng)用 代碼封裝
說(shuō)實(shí)話,對(duì)于js初學(xué)者的我來(lái)說(shuō)。這個(gè)東西太嚇人了,在這些JS庫(kù)中,這個(gè)函數(shù)基本上把整個(gè)庫(kù)的所有代碼全括起來(lái)了,這種寫(xiě)法完全超越了我的常識(shí)。2010-06-06
基于javascript的無(wú)縫滾動(dòng)動(dòng)畫(huà)實(shí)現(xiàn)2
這篇文章主要介紹了基于javascript的無(wú)縫滾動(dòng)動(dòng)畫(huà)實(shí)現(xiàn)2,文章通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
JavaScript實(shí)現(xiàn)煙花綻放動(dòng)畫(huà)效果
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)煙花綻放動(dòng)畫(huà)效果,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-08-08

