优雅的显示JSON文本

2017-10-30 0phpcom 经典文章

---

在后台管理中经常需要保存管理员的操作信息，通常我们都试用JSON来保存数据

但是显示是个比较麻烦的问题，通常UTF-8的数据会转换成UNICODE那这个时候后台管理员对这些非人的数据无法看懂，那么就有了几种解决方案

1.如果你的php是5.4版本,直接加上JSON_UNESCAPED_UNICODE参数即可

1. $unicode = json_encode("测试", JSON_UNESCAPED_UNICODE);

其他JS 的方法可以参考：

http://www.thinkphp.cn/topic/7857.html

中文的方式解决了那就是显示的问题了

<script type="text/javascript">

    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';
            }
            match = match;
            if(cls=='string'){
                return '<span class="' + cls + '">' + match + '<br></span>';
            }else{
                return '<span class="' + cls + '">' + match + '</span>';
            }

        });

    }

</script>

CSS：

<style>
    pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
    .string { color: green; }
    .number { color: darkorange; }
    .boolean { color: blue; }
    .null { color: magenta; }
    .key { color: red; }
</style>

再来个弹窗

                <td><a href="###" onclick='return layer.alert(syntaxHighlight($(this).next().html()), -1, !1);'>查看</a>
                    <pre id="result" style="display: none">{{$item.post}}</pre>
                </td>

看下效果：