JSFiddle - React, Tailwind, and code Playground

by Sameer Shemna

HTML

<div id="jsonSimulator" style="width: 100%; height: 500px%;">
<textarea id="txtArea" style="width: 100%; height: 400px;">
{
    "glossary": {
        "title": "example glossary",
		"GlossDiv": {
            "title": "S",
			"GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
					"SortAs": "SGML",
					"GlossTerm": "Standard Generalized Markup Language",
					"Acronym": "SGML",
					"Abbrev": "ISO 8879:1986",
					"GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
						"GlossSeeAlso": ["GML", "XML"]
                    },
					"GlossSee": "markup"
                }
            }
        }
    }
}
</textarea>
    <button type="button" id="contents" >.replace on textarea contents</button>
    <button type="button" id="submit" >json.stringify of textarea contents</button>
    <button type="button" id="jsObj">json.stringify of js object</button>
</div>

JavaScript

$(document).ready(function() {
    var z = 
        
    {
    "glossary": {
        "title": "example glossary",
		"GlossDiv": {
            "title": "S",
			"GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
					"SortAs": "SGML",
					"GlossTerm": "Standard Generalized Markup Language",
					"Acronym": "SGML",
					"Abbrev": "ISO 8879:1986",
					"GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
						"GlossSeeAlso": ["GML", "XML"]
                    },
					"GlossSee": "markup"
                }
            }
        }
    }
};

    var rgx = "/\(([^)]+)\)/";

    $('#contents').click(function() {
         var z = $('textarea').val();
         var a = z.replace(/\s/g, "");
         console.log(a);
    });
    
    $('#jsObj').click(function() {
         console.log(JSON.stringify(z));
    });

    $('#submit').click(function() {
        //gave textarea an id
        var textAreaText = $('#txtArea').val();
        //changed regex to match braces        
        var rgx = /\{([^)]+)\}/;        
          var match = textAreaText.match(rgx);
        //match is an array
          //console.log(match[1]);
        //replace lost braces
        jsonmatch = match[1];
        jsonmatch = jsonmatch.replace(/(\r\n|\n|\r|\t| )/gm,"");
        jsonstr = JSON.stringify('{'+jsonmatch+'}');
        
        console.log(jsonstr);
    });
});