前端脱敏展示

### 前端数据脱敏展示的实现方法 在前端实现数据脱敏展示时，通常会采用字符串处理的方式对敏感数据进行部分隐藏。以下是具体的实现方式： #### 方法一：基于正则表达式的字符串替换 可以利用 JavaScript 的 `String.prototype.replace` 函数结合正则表达式来完成数据脱敏操作。例如对于手机号码、身份证号等常见场景，可以通过匹配特定模式并将其部分内容替换成掩码字符。 ```javascript function maskPhone(phoneNumber) { const regex = /^(\d{3})\d*(\d{4})$/; return phoneNumber.replace(regex, "$1****$2"); } console.log(maskPhone("13800138000")); // 输出: 138****0000 ``` 上述代码实现了对手机号中间四位数的屏蔽功能[^1]。 #### 方法二：自定义函数逻辑控制前缀后缀保留长度以及掩码符号 如果需要更灵活地设置前缀不遮挡位数、后缀不遮挡位数及使用的掩码符号，则可通过编写通用化程度更高的函数满足需求。 ```javascript function customMask(value, prefixLength = 1, suffixLength = 1, maskSymbol = '*') { if (!value || typeof value !== 'string' || value.length <= (prefixLength + suffixLength)) { return value; } let maskedPart = ''; for(let i=0;i<value.length-prefixLength-suffixLength;i++) { maskedPart +=maskSymbol ; } return `${value.substring(0,prefixLength)}${maskedPart}${value.substring(value.length -suffixLength,value.length )}`; } // 测试案例 console.log(customMask('ABCDEFG', 2, 2)); // AB***FG console.log(customMask('1234567890', 3, 3)); // 123*****789 console.log(customMask('abcdefghij', 1, 1, '#')); // a########j ``` 此段脚本允许开发者指定哪些部分应该保持可见状态，并且可以选择任意字符作为替代符用于掩盖其余区域的内容[^2]。 #### 结合后端返回的数据结构自动应用脱敏规则 当从服务器获取JSON对象列表形式的结果集时，可能希望遍历这些记录并对其中某些字段执行相应的脱敏措施。下面是一个例子展示了如何递归访问嵌套属性并将它们映射至新的经过修改后的版本当中去。 ```javascript const dataToProcess = [ {name:"John Doe", ssn:"123-45-6789"}, {company:{address:"Street Address"},email:"[email protected]"} ]; function processObject(obj,mappingRules){ Object.keys(mappingRules).forEach(key=>{ if(typeof obj[key]==='object'){ processObject(obj[key],mappingRules[key]); }else{ obj[key]=customMask(obj[key],...mappingRules[key].args); } }); } let mapping={ name:[{prefixLength:1,suffixLength:1}], email:[{prefixLength:2,suffixLength:3}] }; processObject(dataToProcess[0],mapping); console.log(JSON.stringify(dataToProcess,null,' ')); /* Output: [ {"name":"J******e","ssn":"123-45-6789"}, {"company":{"address":"Street Address"},"email":"exa*******ple.com"} ] */ ``` 在这个实例里我们创建了一个名为`processObject()`的新辅助工具用来迭代传入的对象树形图并且按照预设好的映射表调用之前提到过的`customMask()`来进行逐项处理[^2]。 ---