JSFiddle - React, Tailwind, and code Playground

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

$('button').click(function() {

	// get the html string from the textarea
  var html = $('textarea.input').val();
  
  // 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
  
  // do your calculations on the parsed html
  $("<script>alert(\"test\");<\/script>").insertAfter(element.find('#test-ui-bootstrap'));
  element.find("#test-ui-bootstrap").attr('data-test-ui-libs123', "test.bbb");
  element.find("#test-ui-bootstrap").attr('src', 'resources/aaaa/test-ui-core.js');
  
  // 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");
  }
  
  // put the output into the textarea
  $('textarea.output').val(extended_html);
  
});