> 웹 프론트엔드 > HTML 튜토리얼 > HTML로 JSON 데이터의 형식을 지정하고 출력하는 방법

HTML로 JSON 데이터의 형식을 지정하고 출력하는 방법

php中世界最好的语言
풀어 주다: 2018-01-16 09:46:34
원래의
3754명이 탐색했습니다.

这次给大家带来html怎样格式化输出JSON数据,html格式化输出JSON数据的注意事项有哪些,下面就是实战案例,一起来看一下。

将 json 数据以美观的缩进格式显示出来,借助最简单的 JSON.stringify 函数就可以了,因为此函数还有不常用的后面2个参数。

<html>
    <head>
        <meta charset="utf-8" />
        <title>hello</title>
        <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>
        <script type="text/javascript">
        function syntaxHighlight(json) {
            if (typeof json != &#39;string&#39;) {
                json = JSON.stringify(json, undefined, 2);
            }
            json = json.replace(/&/g, &#39;&&#39;).replace(/</g, &#39;<&#39;).replace(/>/g, &#39;>&#39;);
            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 = &#39;number&#39;;
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = &#39;key&#39;;
                    } else {
                     cls = &#39;string&#39;;
                    }
                } else if (/true|false/.test(match)) {
                    cls = &#39;boolean&#39;;
                } else if (/null/.test(match)) {
                    cls = &#39;null&#39;; 
                }
                return &#39;<span class="&#39; + cls + &#39;">&#39; + match + &#39;</span>&#39;;
            });
        }
    </script>
    </head>
    <body>
    <pre id="result"> 
    
로그인 후 복사

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

H5里图片中有缝隙应该如何解决

H5的地理定位怎样使用

h5的移动端适配怎样实现

위 내용은 HTML로 JSON 데이터의 형식을 지정하고 출력하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿