JSFiddle - React, Tailwind, and code Playground

by cowdd

HTML

<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<textarea class="input"><!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">

        <title>td</title>

        <script id="test-ui-bootstrap"
            src="resources/test-ui-core.js"
            data-test-ui-libs="test.m"
            data-test-ui-xx-bindingSyntax="complex"
            data-test-ui-resourceroots='{"tdrun": "./"}'>
        </script>

        <link rel="stylesheet" type="text/css" href="css/style.css">

        <script>
            test.ui.get().attachInit(function() {
            });
        </script>
    </head>

    <body class="testUiBody" id="content">
    </body>
</html></textarea>

<textarea class="output"></textarea>

<button>Submit</button>

CSS

textarea {
  width: 100%;
  height: 200px;
}

JavaScript

function parseHtml(html) {

  // replace html, head and body tag with html_temp, head_temp and body_temp
  html = html.replace(/<!DOCTYPE HTML>/i, '<doctype></doctype>');
  html = html.replace(/(<\/?(?:html)|<\/?(?:head)|<\/?(?:body))/ig, '$1_temp');
  
  // wrap the dom into a <container>: the html() function returns only the contents of an element
  html = "<container>"+html+"</container>"; 
  var element = $(html); // parse the html
  
  return element;
}

function convertBackToHtml(element) {

  // reset the initial changes (_temp)
  var extended_html = element.html();
  extended_html = extended_html.replace(/<doctype><\/doctype>/, '<!DOCTYPE HTML>');
  extended_html = extended_html.replace(/(<\/?html)_temp/ig, '$1');
  extended_html = extended_html.replace(/(<\/?head)_temp/ig, '$1');
  extended_html = extended_html.replace(/(<\/?body)_temp/ig, '$1');
  
  // replace all &quot; inside data-something=""
  while(extended_html.match(/(<.*?\sdata.*?=".*?)(&quot;)(.*?".*?>)/g)) {
    extended_html = extended_html.replace(/(<.*?\sdata.*?=".*?)(&quot;)(.*?".*?>)/g, "$1'$3");
  }
  
  return extended_html;
}

// add click listener to button
$('button').click(function() {

	// get the html string from the textarea
  var html = $('textarea.input').val();
  
  // parse the html to an element
  var element = parseHtml(html);
  
  // do your calculations on the parsed html
  element.find('#test-ui-bootstrap').after("\n\t<script>\n\t\talert('test');\n\t<\/script>\n");
  /*
  $("\n\t<script>\n\t\talert('test');\n\t<\/script>\n").insertAfter(element.find('#test-ui-bootstrap'));
  */
 
  // convert the element back to html
	var extended_html = convertBackToHtml(element);
  
  // put the output into the textarea
  $('textarea.output').val(extended_html);
  
});