JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<textarea id="source"></textarea>
<textarea id="output"></textarea>
<button>Stringify</button>

CSS

textarea {
    min-height: 150px;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    font-family: monospace;
    white-space: pre;
    word-wrap: normal;
}
button {
    float: right;
}

JavaScript

$('button').on('click', function(e) {
    e.preventDefault();
    var $source = $('#source');
    var source = $source.val();
    var output = JSON.stringify(source).split('\\n').join('\\n\\\n');
    $('#output').val(output);
    console.log(parse(output).length, source.length);
});

function parse(output) {
    var id = '_' + Math.random().toString().replace('.', '');
    var script = document.createElement('script');
    script.setAttribute('id', id);
    var code = 'document.getElementById("' + id + '").setAttribute("d", ' + output + ');';
    var textNode = document.createTextNode(code);
    script.appendChild(textNode);
    script.ownerDocument.head.appendChild(script);
    var result = script.getAttribute('d');
    script.parentNode.removeChild(script);
    return result;
}