html美化/格式化json字符串并显示

chen_xionxion

已于 2022-09-26 10:54:11 修改

阅读量1.1k

点赞数

文章标签： json html javascript

于 2022-09-20 11:10:58 首次发布

本文链接：https://blog.csdn.net/Adobe_java/article/details/126949442

版权

      /**
       * 美化json
       */
      function pretifyJson(json) {
         if (typeof json !== 'string') {
            json = JSON.stringify(json, undefined, 4);
         }
         let jsonStr = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
                 function (match) {
                    let cls = "<span>";
                    if (/^"/.test(match)) {
                       if (/:$/.test(match)) {
                          cls = "<span class='key'>";
                       } else {
                          cls = "<span class='string'>";
                       }
                    } else if (/true|false/.test(match)) {
                       cls = "<span class='boolean'>";
                    } else if (/null/.test(match)) {
                       cls = "<span class='null'>";
                    }
                    return cls + match + "</span>";
                 }
         );
         
         let line = '<br/>&nbsp;&nbsp;&nbsp;&nbsp;';
         // 换行方式1 （低版本浏览器会出现死循环）
         jsonStr = jsonStr.replaceAll('</span>,', '</span>,' + line)
         .replaceAll('{<span', '{' + line + '<span')
         .replaceAll('</span>}', '</span>' + line + '}')

         // 换行方式2 （建议使用）
         jsonStr = jsonStr.split('</span>,').join('</span>,' + line)
                 .split('{<span').join('{' + line + '<span')
                 .split('</span>}').join('</span>' + line + '}');

         return jsonStr;
      }

      #data_info{
         width: 100%;
         font-size: 16px;
         white-space: pre-wrap;
         word-wrap: break-word;
         border:0px;
      }
      .string { color: green; }
      .number { color: darkorange; }
      .boolean { color: blue; }
      .null { color: magenta; }
      .key { color: red; }