Json格式美化

fdpg 10年前發布 | 5K 次閱讀 JavaScript JSON 

 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>JSON格式美化</title>
  <script type="text/javascript">
  <!--
    function repeat(s, count) {
        return new Array(count + 1).join(s);
    }



function formatJson() {

    var json=  document.form1.sourcejson.value;

    var i           = 0,
        len          = 0,
        tab         = "    ",
        targetJson     = "",
        indentLevel = 0,
        inString    = false,
        currentChar = null;


    for (i = 0, len = json.length; i < len; i += 1) { 
        currentChar = json.charAt(i);

        switch (currentChar) {
        case '{': 
        case '[': 
            if (!inString) { 
                targetJson += currentChar + "\\n" + repeat(tab, indentLevel + 1);
                indentLevel += 1; 
            } else { 
                targetJson += currentChar; 
            }
            break; 
        case '}': 
        case ']': 
            if (!inString) { 
                indentLevel -= 1; 
                targetJson += "\\n" + repeat(tab, indentLevel) + currentChar; 
            } else { 
                targetJson += currentChar; 
            } 
            break; 
        case ',': 
            if (!inString) { 
                targetJson += ",\\n" + repeat(tab, indentLevel); 
            } else { 
                targetJson += currentChar; 
            } 
            break; 
        case ':': 
            if (!inString) { 
                targetJson += ": "; 
            } else { 
                targetJson += currentChar; 
            } 
            break; 
        case ' ':
        case "\\n":
        case "\\t":
            if (inString) {
                targetJson += currentChar;
            }
            break;
        case '"': 
            if (i > 0 && json.charAt(i - 1) !== '\\\\') {
                inString = !inString; 
            }
            targetJson += currentChar; 
            break;
        default: 
            targetJson += currentChar; 
            break;                    
        } 
    } 
    document.form1.targetjson.value=targetJson;
    return;
}



//-->
  </script>
 </head>
 <body>
 <form id="form1" name="form1">
        <textarea name="sourcejson" id="sourcejson" cols="80" rows="30"></textarea>

        <input type="button" onclick="formatJson();" value="美化"/>
        <textarea name="targetjson" id="targetjson" cols="80" rows="30">  </textarea>
        </form>
 </body>
</html>


</pre>
 本文由用戶 fdpg 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！