JSON Stringify

by Yaroslav Samardak

HTML

<h1>Expanding JSON Stringify</h1>
<h3>Output clear string:</h3>
<div class="card" id="out1"></div>
<h3>Output human readable string:</h3>
<div class="card" id="out2"></div>
<h3>Output human readable and highlighted HTML:</h3>
<div class="card" id="out3"></div>
<h3>Output highlighted HTML:</h3>
<div class="card" id="out4"></div>

SCSS

body {
    background: #fafafa;
    font-size: 120%;
}

h1, h3 {
    text-align: center;
    font-size: 17pt;
    color: #444;
    margin: 2em .5em;
    font-weight: bold;
}

h3 {
    font-size: 15pt;
    text-align: left;
    margin: 0 .5em .5em 1em;
}

.card {
    display: block;
    margin: 0 1em 1em;
    border-radius: .1em;
    font-size: 15pt;
    color: #000;
    background: #fff;
    padding: 1.5em;
    box-shadow: 0 1px 2px rgba(black, .3);
    word-wrap: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.json {
    color: #555;
    -o-tab-size: 4;
    -moz-tab-size: 4;
    tab-size: 4;
    
    .property {
        font-weight: bold;
        color: black;
    }
    
    .number {
        color: blue;
    }
    
    .tab {
        margin-left: 2em;
    }
    
    .string {
        color: green;
        
        a {
            color: green;
            text-decoration: underline;
            transition: .218s all;
            
            &:hover, &:focus {
                color: lighten(green, 10);
            }
                
            &:active {
                color: darken(green, 10);
            }
        }
    }
    
    .bool {
        color: firebrick;
    }
    
    .null {
        color: gray;
    }
}

CoffeeScript

JSON.stringify = (obj, human = false, highlight = false, level = 0) ->
    _hl = (val, cls, tag = 'span') ->
        val = '<' + tag + ' class="' + cls + '">' + val + '</' + tag + '>' if highlight
        val
    
    _str = (val) ->
        regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
        if (human || highlight) && regexp.test val
            val = '<a href="' + val + '" target="_blank">' + val + '</a>'
    
        _hl '"' + val + '"', 'string'
        
    _tab = (open = true)->
        return '' if !human
    
        count = level
        if open
            count = level
        else
            count = level - 1
    
        out = ''
        if count >= 0
            for i in [0..count]
                if highlight
                    out += '<span class="tab"></span>'
                else
                    out += '\t'

        out
        
    _line = ->
        return '' if !human
        '\n'
        
    _out = (val, isArray) ->
        if level == 0
            val = _hl val, 'json', 'pre'
            
        val
        
    _key = (key, val, isArray) ->
        return _line() + _tab() + val if isArray
        
        if human
            sep = ': '
        else
            sep = ':'
            key = '"' + key + '"' 
        
        _line() + _tab() + _hl(key, 'property') + sep + val
        
    _fix = (val) ->
        if val == null
            return _hl 'null', 'null'
    
        type = typeof val
        switch type
            when 'boolean'
                if val 
                    x = 'true'
                else
                    x = 'false'
                out = _hl x, 'bool'
                
            when 'number' then out = _hl val, 'number'
            else out = _str val
                
        if level == 0
            out = _hl out, 'json'

        out
    
    if typeof obj != 'object' || !obj
        return  _out _fix obj
    
    json = []
    isArray = obj &&...