XSLT transformation example.

An example that takes a xml, xslt and transforms it

by marbx

HTML

XML to be transformed:<br/> <textarea id="xml" cols="70" rows="5">
  <old>
    <ns2:Header>
      <EntityId>yxc</EntityId>
      <Application>11</Application>
      <Version>354</Version>
      <User>
        <Id>user1</Id>
      </User>
    </ns2:Header>
  </old>
</textarea><br/>XSL:<br/>
<textarea id="xsl" cols="70" rows="5">
  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes" />
    <xsl:template match="/">
      <new xmlns:ns2="http://example.com">
        <Header>
          <xsl:copy-of select="//*[local-name()='ns2:Header']/*" />
        </Header>
      </new>

    </xsl:template>

  </xsl:stylesheet>
</textarea>
<input type="button" id="transform" value="Transform!" />
  <br/>Tranformed xml:<br/>
<textarea id="result" cols="70" rows="5" readOnly="true"></textarea>

JavaScript

var parser = new DOMParser();
var xsltText = document.getElementById('xsl').value;
var xslt = parser.parseFromString(xsltText, "text/xml");
var xmlText = document.getElementById('xml').value;;
var xml = parser.parseFromString(xmlText, "text/xml");
document.getElementById('transform').onclick = function() {
  var xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(xslt);
  var processed = xsltProcessor.transformToDocument(xml);
  var result = new XMLSerializer().serializeToString(processed);
  console.log(result);
  document.getElementById('result').value = result;
}