用于将对象进行数据脱敏的繁难小帮手
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <title>Document</title> <style> textarea { width: 100%; height: 300px; } </style></head><body> <div id="box"> <div> <span>须要替换的字段:</span> <button v-on:click="add">+</button> <button v-on:click="del">-</button> <span>eg:[a,3],{a:1}=>{a:3}</span> <div v-for="item in fieldNames" :key="item.id"> <input v-model="item.fieldName" /> : <input style="margin-top:5px" v-model="item.value" /> </div> </div> <div> <div> <span>脱敏前:</span> <textarea v-model="sourceData"></textarea> </div> <div> <span>脱敏后:</span> <textarea v-model="targetData"></textarea> </div> <div> <button v-on:click="handleData">脱敏</button> </div> </div> </div></body><script> function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }; var vue = new Vue({ el: "#box", data: { fieldNames: [], sourceData: ``, targetData: `` }, methods: { add: function () { let obj = { id: guid(), fieldName: "", value: "", }; this.fieldNames.push(obj); }, del: function () { this.fieldNames.pop(); }, handleData: function () { let temp = this.sourceData; this.fieldNames.forEach(item => { const { fieldName, value } = item; if (fieldName != "" && fieldName != null) { let regx = eval('/(' + fieldName + ':[^,]*)(,|})/g'); temp = temp.replace(regx, `${fieldName}:${value}$2`) } }) this.targetData = temp; } } })</script></html>操作方法:
作者：点墨
版权：本文版权归作者所有
转载：欢送转载，但未经作者批准，必须保留此段申明；必须在文章中给出原文连贯；否则必究法律责任