简单的替换json对象里的值

用于将对象进行数据替换的简易小帮手

<!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>

操作方法:

简单的替换json对象里的值

点墨

引用和评论

QT 弹出框设置宽高0不生效

前端开发工具

Jerry和您聊聊Chrome开发者工具

面向企业级前端应用的开发框架 UI5 的发展简史介绍

html如何实现跳转到锚点

这些年

一个用JavaScript生成思维导图(mindmap)的github repo