interactive-tests/xslt.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Simple XSLT test</title>
    <script type="application/javascript" src="https://www.unpkg.com/xslt-processor@latest/umd/xslt-processor.js"></script>
    <script>
      window.logging = true;
      window.xsltdebug = true;

      window.el = function(id) {
          return document.getElementById(id);
      }

      window.test_xslt = function() {
          const xmlParser = new globalThis.XsltProcessor.XmlParser();
          const xml = xmlParser.xmlParse(el('xml').value);
          const xslt = xmlParser.xmlParse(el('xslt').value);
          const xsltClass = new globalThis.XsltProcessor.Xslt();
          xsltClass.xsltProcess(xml, xslt).then(html => {
            el('html').value = html;
            el('htmldisplay').innerHTML = html;
          });
          return false;
      }

      window.cleanxml = function() {
          cleanvalue('xml');
          cleanvalue('xslt');
      }

      window.cleanvalue = function(id) {
          const x = el(id);
          x.value = x.value.replace(/^\s*/, '').replace(/\n\s*/g, '\n');
      }
    </script>
  </head>
  <body onload="cleanxml()">
    <form>
      <table>
        <tr>
          <td>
            <textarea id="xml" cols="40" rows="10">
              <page>
                <message>
                  Hello World.
                </message>
              </page>
            </textarea>
          </td>
          <td>
            <textarea id="xslt" cols="40" rows="10">
              <xsl:stylesheet>
                <xsl:template match="/">
                  <xsl:apply-templates select="/page/message"/>
                </xsl:template>

                <xsl:template match="/page/message">
                  <div style="color:green">
                    <xsl:value-of select="."/>
                  </div>
                </xsl:template>
              </xsl:stylesheet>
            </textarea>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="button" value="process" onclick="test_xslt()"/>
          </td>
        </tr>
        <tr>
          <td>
            <textarea id="html" cols="40" rows="10">
            </textarea>
          </td>
          <td>
            <div id="htmldisplay"></div>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>