วิธีการแสดงข้อมูล JSON ใน HTML

บางครั้งเราจำเป็นต้องแสดงข้อมูล JSON โดยตรงบนหน้า . ต้องจัดรูปแบบ

ในความเป็นจริง JSON.Stringify สามารถจัดรูปแบบ JSON ได้

 json.stringify (res, null, 2);

หากเอฟเฟกต์ดีขึ้นให้เพิ่มรหัสและสไตล์ที่จัดรูปแบบ:

 ฟังก์ชั่น syntaxhighlight (json) {ถ้า (typeof json! = 'string') {json = json.stringify (json, undefined, 2);} json = json.replace (/&/g, '&') /</g, '<<') [^u] | [^//])*(/s*:)? ee] [+/-]?/d +)?)/g, ฟังก์ชั่น (จับคู่) {var cls = 'number'; ) {cls = 'key';} else {class = 'string';}} ​​อื่นถ้า (/true | false/.test (จับคู่)) {cls = 'boolean';) {cls = 'null' ;} return '<span class =' ​​+ class + '>' + match + '</span>';});};}

รหัสสไตล์:

 <style> pre {โครงร่าง: 1px solid #ccc; Magenta;} .key {color: red;} </style>

รหัส HTML:

 <pre id = ผลลัพธ์> </pre>

รหัส:

 $ ('#Result')

ผล:

ข้างต้นเป็นวิธีการแสดงข้อมูล JSON เพื่อแสดงข้อมูล JSON ใน HTML ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!