用于将对象进行数据替换的简易小帮手
<!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>操作方法:
