JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="https://raw.github.com/vjeux/XSON/master/src/xson.js"></script>

Open your console
<xson></xson>

CSS

xson * { display: block; text-decoration: none; margin-left: 20px; }

xson *[k]:before { content: '"' attr(k) '": '; }
xson *[k]:last-child:after { content: ''; }
xson *[k]:after { content: ','; }

xson t:after, xson t[k]:last-child:after { content: 'true'; }
xson t[k]:after { content: 'true,'; }

xson f:after, xson f[k]:last-child:after { content: 'false'; }
xson f[k]:after { content: 'false,'; }

xson l:after, xson l[k]:last-child:after { content: 'null'; }
xson l[k]:after { content: 'null,'; }

xson s[k]:before { content: '"' attr(k) '": "'; }
xson s:after, s[k]:last-child:after { content: '"'; }
xson s[k]:after { content: '",'; }

xson a:before { content: '[' }
xson a[k]:before { content: '['; }
xson a:after, xson a[k]:last-child:after { content: ']'; }
xson a[k]:after { content: '],'; }

xson o:before { content: '{' }
xson o[k]:before { content: '"' attr(k) '": {'; }
xson o:after, xson o[k]:last-child:after { content: '}'; }
xson o[k]:after { content: '},'; }

JavaScript

var xson = document.getElementsByTagName('xson')[0];

xson.innerHTML = XSON.stringify({
   "data": [
      {
         "id": "X999_Y999",
         "from": {
            "name": "Tom Brady", "id": "X12"
         },
         "message": "Looking forward to 2010!",
         "actions": [
            {
               "name": "Comment",
               "link": "http://www.facebook.com/X999/posts/Y999"
            },
            {
               "name": "Like",
               "link": "http://www.facebook.com/X999/posts/Y999"
            }
         ],
         "type": "status",
         "created_time": "2010-08-02T21:27:44+0000",
         "updated_time": "2010-08-02T21:27:44+0000"
      },
      {
         "id": "X998_Y998",
         "from": {
            "name": "Peyton Manning", "id": "X18"
         },
         "message": "Where's my contract?",
         "actions": [
            {
               "name": "Comment",
               "link": "http://www.facebook.com/X998/posts/Y998"
            },
            {
               "name": "Like",
               "link": "http://www.facebook.com/X998/posts/Y998"
            }
         ],
         "type": "status",
         "created_time": "2010-08-02T21:27:44+0000",
         "updated_time": "2010-08-02T21:27:44+0000"
      }
   ]
}, null, '  ', 'html');

console.log(xson.querySelectorAll('[k="message"]'));