vue 格式化展示json(含彩色样式)

实现原理

 通过函数 syntaxHighlight 使用html标签包装 json数据，并添加样式

完整范例代码

<template>
    <div style="width: 300px;">
        <pre v-html="formattedJSON"></pre>
    </div>
</template>
<script>
    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }

    export default {
        mounted() {
            this.formattedJSON = syntaxHighlight(this.tabConfig)
        },
        data() {
            return {
                tabConfig: {
                    "defaultTab": "基础信息",
                    "tabList": [
                        {
                            "label": "基础信息",
                            "show": true
                        },
                        {
                            "label": "职业规划",
                            "age": 30,
                        },
                        {
                            "label": "相关要件",
                        }
                    ]
                },
                formattedJSON: ''
            }
        },
    }
</script>
<style scoped>
    /deep/ pre {
        outline: 1px solid #ccc;
        padding: 5px;
        margin: 5px;
    }

    /deep/ .string {
        color: green;
    }

    /deep/ .number {
        color: darkorange;
    }

    /deep/ .boolean {
        color: blue;
    }

    /deep/ .null {
        color: magenta;
    }

    /deep/ .key {
        color: red;
    }
</style>