July 14, 2008
XSLT Transformation with javascript
Nikolai Kordulla
0 comments >>
XSLT - eXtensible Stylesheet Language Transformation - is a very strong stylesheet language. I will show you, how to transform a xmlString via xslt, in javascript.
Javascript
Sample XSLT
I personally use this function, to make a preview for my articles on this blog.
Javascript
function XSLTHelper(xslt)
{
this.xmls = null;
this.processor = null;
this.xslt = null;
this.xslt_file = xslt;
this.src_doc = null;
this.init = function()
{
if (window.ActiveXObject)
{
this.xslt = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
this.xslt.async = false;
this.xslt.load(this.xslt_file);
var template = new ActiveXObject("MSXML2.XSLTemplate");
template.stylesheet = this.xslt;
this.processor = template.createProcessor();
}
else
{
this.processor = new XSLTProcessor();
this.xslt = document.implementation.createDocument("", "", null);
this.xslt.async = false;
this.xslt.load(this.xslt_file);
this.processor.importStylesheet(this.xslt);
this.src_doc = document.implementation.createDocument("","", null);
this.src_doc.async = false;
this.xmls = new XMLSerializer();
}
}
this.init();
this.transform = function(xmlString)
{
if (window.ActiveXObject)
{
this.src_doc = new ActiveXObject("Microsoft.XMLDOM");
this.src_doc.loadXML(xmlString);
this.processor.input = this.src_doc;
this.processor.transform();
var output = this.processor.output;
}
else
{
var parser = new DOMParser()
this.src_doc = parser.parseFromString(xmlString, "text/xml")
result = this.processor.transformToDocument(this.src_doc);
this.xmls = new XMLSerializer();
var output = this.xmls.serializeToString(result);
}
return output;
}
}
var test = new XSLTHelper('./example.xsl');
// just alert the output
alert(test.transform('<edit_preview><youtube>viOSJmzYFq0</youtube></edit_preview>'));
Sample XSLT
<?xml version="1.0" encoding="UTF-8"?>
<!-- The main xsl file for the api website -->
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="html" encoding="utf-8" indent="yes" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>
<xsl:template match="edit_preview">
<div lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<xsl:apply-templates/>
</div>
</xsl:template>
<!-- code tag -->
<xsl:template match="code">
<pre class="prettyprint"><xsl:call-template name="cr2br"><xsl:with-param name="text" select="."/></xsl:call-template></pre>
</xsl:template>
<!-- quote tag -->
<xsl:template match="quote">
<q><xsl:call-template name="cr2br"><xsl:with-param name="text" select="."/></xsl:call-template></q>
</xsl:template>
<!-- paragraph tag -->
<xsl:template match="paragraph">
<xsl:apply-templates/>
</xsl:template>
<!-- link tag -->
<xsl:template match="a">
<a href="http://coderpeek.com/xslt/%7B@href%7D"><xsl:apply-templates/></a>
</xsl:template>
<xsl:template match="br">
<br/>
</xsl:template>
<xsl:template match="youtube">
<object width="570" height="461">
<param name="movie" value="http://www.youtube.com/v/{.}&hl=en&fs=1"/>
<param name="allowFullScreen" value="true"/>
<embed width="570" height="461" src="golb-Dateien/a.txt" type="application/x-shockwave-flash" allowfullscreen="true"/></object>
</xsl:template>
<xsl:template match="img">
<img src="golb-Dateien/src.htm" alt="{@alt}" title="{@title}"/>
</xsl:template>
</xsl:transform>
I personally use this function, to make a preview for my articles on this blog.