JSFiddle - React, Tailwind, and code Playground

by Ukjin Yang

HTML

<div>
<textarea id="in" cols="80" rows="10"></textarea>
<textarea id="out" cols="80" rows="10"></textarea>
</div>
<p>
<button onclick="runXml(true)">XML SET</button>
<button onclick="runXml(false)">XML APPEND</button>
<button onclick="runBinder()">BIND IN</button>
<button onclick="runBinding()">BIND OUT</button>
</p>
<form id="binding">
<table>
  <thead>
    <tr>
      <th>BIND COLUMN</th>
      <th>BIND VARCHAR</th>
    </tr>
  </thead>
  <tbody id="binder"></tbody>
</table>
</form>

<script type="text/html" id="tmpl">
  <th align="left">KEY</th>
  <td><input type="text" name="KEY" value="" placeholder="NULL"></td>
</script>

JavaScript

var parseXml, bind = /#\{([\w.]+)\}/g;

if (typeof window.DOMParser != "undefined") {
    parseXml = function(xmlStr) {
        return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
    };
} else if (typeof window.ActiveXObject != "undefined" &&
       new window.ActiveXObject("Microsoft.XMLDOM")) {
    parseXml = function(xmlStr) {
        var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(xmlStr);
        return xmlDoc;
    };
} else {
    throw new Error("No XML parser found");
}

function runXml(isset){
  var o = {'i': document.getElementById('in'),
  				 'o': document.getElementById('out'),
           'b': document.getElementById('binder'),
           't': document.getElementById('tmpl'),
           'f': document.getElementById('binding')
          };
  var xml = parseXml(o.i.value);
  if(xml.documentElement.nodeName == 'parsererror'){
    o.o.value = 'Parser Error';
    return;
  }

  !function(){
    if(isset) o.o.value = '';
    for(var i=0,args=arguments,len=args.length;i<len;i++){
      for(var j=0,arg=args[i],cnt=arg.length;j<cnt;j++){
        o.o.value += '"' + arg[j].innerHTML.trim().replace(/"/g,'""') + '\n"\n';
      }
    }
  }(xml.getElementsByTagName('select'), xml.getElementsByTagName('insert'), xml.getElementsByTagName('update'), xml.getElementsByTagName('delete'));
}
function runBinder(){
  var o = {'i': document.getElementById('in'),
  				 'o': document.getElementById('out'),
           'b': document.getElementById('binder'),
           't': document.getElementById('tmpl'),
           'f': document.getElementById('binding')
          };
  o.tt = o.t.innerHTML;
  runBinder.data = {};
  o.b.innerHTML = '';
  if(o.o.value){
    var match, val = o.o.value.replace(/<!--([^-]+)-->/g, '/*$1*/').replace(/<!\[CDATA\[([^\]]+)]]>/g, '$1');
    while((match = bind.exec(val)) != null){
      runBinder.data[match[1]] = '';
    }
    for(var key in runBinder.data){
      var...