Vyčištění HTML kódu tabulky pomocí XSLT
Jak vyčistit HTML kód?
Pavel Růžička se na Intervalu.cz v článku „ Vyčištění tabulky z MS Wordu v MSIE JavaScriptem“ zabývá častým problémem webdesignérů: jak z dodaných podkladů, v tomto případě wordovské či excelovské tabulky, dostat přebytečný balast. Jeho řešení, založené na JavaScriptu, sestává z cca. 150ti řádků HTML a JS kódu. Takový postup má dvě velké nevýhody: jednak je zbytečně komplikovaný a jednak funguje jen v Internet Exploreru pod Windows. Z komentářů k článku se navíc zdá, že i tam jen někdy.
Dobrých řešení jistě existuje spousta, mmě osobně se osvědčilo následující.
Pokud potřebuji dostat z dodaných podkladů tabulku, aniž bych musel znovu formátovat všechna data,
používám krátkou XSLT šablonu,
která z HTML vypustí všechny atributy a všechny elementy s výjimkou definovaných.
V mém případě se jedná o elementy
<table>, <tbody>, <thead>,
<tr>, <th> a <td>, ale lze je samozřejmě
upravit podle aktuálních potřeb. Někdy může být výhodné vypustit element <tbody>, neboť
např. OpenOffice.org ho velmi nadužívá (někdy do něj uzavírá každý řádek). Řozšířením množiny použitých elementů lze naopak
šablonu upravit tak, aby se dala použít pro vyčištění jakéhokoliv HTML kódu a nikoliv jen tabulek.
Řešení pomocí XSLT transformace má samozřejmě zásadní nevýhodu: HTML kód, který takto čistím musí být dobře strukturovaný (well formed) XML dokument, což pro výstup z kancelářských dokumentů vesměs neplatí a kdyby platilo, bylo by čištění téměř zbytečné. (Ale jenom téměř, protože i dobře strukturované XHTML může obsahovat spoustu nežádoucích elementů a atributů.) Před samotnou XSLT transformací je tedy ještě třeba upravit původní kód. Pro tento účel používám PSPad obsahující knihovnu HTML Tidy, která umí převést libovolné HTML na XHTML, tedy na dobře strukturované XML. Samotnou transformaci provádím ve výborném freeware XML/XSLT editoru XML Cooktop, který zavolá XSLT procesor a rovnou zobrazí výsledek.
Pokud si po přečtění těchto řádků připadáte jako ve španělské vesnici, asi už chápete i druhou nevýhodu mého postupu: vyžaduje znalost XSLT transformací nebo přinejmenším znalost použití XSLT procesoru a obeznámenost s XML. Avšak vzhledem k tomu, že XSLT je dle mého názoru vynikající technologie a dnes už si nedovedu představit, že bych se bez ní obešel při tvorbě byť sebejednodužšího webu, ztrácí tato nevýhoda dost ze své váhy. XSLT se IMHO při tvorbě webu navíc hodí podstatně více než znalost proprietárních Microsoftích „vymožeností“. Nováčkům v této oblasti doporučuji odkazy na konci tohoto článku.
Shrnutí postupu:
- vyexportujeme tabulku z Wordu či Excelu do HTML
- takto získaný soubor zkrášlíme TIDYm, abychom získali XML
- získané XML proženeme XSLT transformací
- ušetřený čas trávíme zalíbeným prohlížením čistého kódu
XSLT kód pro transformaci
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes" method="xml"/>
<xsl:strip-space elements="td"/>
<xsl:template match="/">
<xsl:apply-templates select="//table"/>
</xsl:template>
<xsl:template match="table">
<table>
<xsl:apply-templates select="*"/>
</table>
</xsl:template>
<xsl:template match="tbody | thead ">
<xsl:element name="{local-name()}">
<xsl:apply-templates select="descendant::tr"/>
</xsl:element>
</xsl:template>
<xsl:template match="tr">
<tr>
<xsl:apply-templates
select="descendant::td | descendant::th"/>
</tr>
</xsl:template>
<xsl:template match="td | th">
<xsl:copy>
<xsl:apply-templates select="descendant::text()"/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
Zdroje o XML a XSLT
Aneb pár odkazů, o kterých si myslím, že budou nováčkům k užitku.
V češtině:
- Úvodní povídaní „XSLT, svět transformací“ Romana Pichlíka, které vyšlo na Sově v síti je IMHO dobré i pro úplné začátečníky.
- Na webu Jiřího Koska neleznete mnoho velmi kvalitních informací o XML a tvorbě webu vůbec, mezi nimi i dobrý tutorial (průvodce) „XSLT v příkladech“.
- Dobré shrnutí jazyka XPath od Petra Břízy vyšlo na Intervalu.cz. (XPath je dotazovací jazyk používaný v XSLT.)
- Tamtéž vychází i seriál Kompletní průvodce XSLT stejného autora. Osobně mám radši Koska, protože je dokončený, na jednom místě a tím pádem přehlednější, ale myslím, že pro začátečníky bude Bříza srozumitelnější.
V angličtině:
- Zvon.org obsahuje spousty informací o XML, XSLT a dalších technologiích, mj. i tutorial o XSLT a referenční příručku XSLT, které jsou řešeny formou jednoduchých příkladů.
- Na serveru XML.com je k nalezení mnoho dobrých článků o konkrétních problémech a také krátké úvody „What is XML?“ a „What is XSLT?“.
Co vy na to?
[1] Pěkné
Pěkný příspěvek, škoda, že tímto mechanismem nelze nahradit původní JavaScript, prostředí i určení příspěvku je naprosto odlišné. Nicméně bych si dovolil poznamenat jednu drobnost - magazín se jmenuje \"Interval.cz\" a nalézá se na adrese \"http://interval.cz\" a nikde jinde ;-)
[2] Uvozovky...
...by to ještě chtělo ošetřit ;-)
[3] Interval
Opravil jsem odkazy na Interval.
K tomu nahrazení původního JS: Internet Explorer umí provádět XSLT transformace pomocí JavaScriptu a funguje to velmi pěkně, a podobným způsobem navíc funguje XSLT i v Mozille, takže principiálně není vyloučené něco takového napsat. Ale připadá mi to příliš jako kanón na vrabce.
[4] Iterval.cz?
\"Pavel Růžička se na Itervalu.cz v...\" neopraveno :)
[5] aha...
Sakra, a já myslel, že tam chybí to .cz ;-) To je teda slepota...
[6] - bez nadpisu -
Pěkný příspěvek, něco podobného jsme řešil nedávno. A ještě mám dodatek. Existují dokumenty, které HTML Tidy nezvládne, což se mi stalo - prostě se to někde zjevně zasmyčkovalo. Pro .NET vývojáře existuje velice jednoduché řešení - knihovna SgmlReader, která funguje stejně jako standardní XmlReader s tím, že \"přechroustá\" klidně i nevalidní HTML. A přiloženou ukázkou je právě převodník z libovolného HTML na X(HT)ML. Vřele doporučuji ;-) Download třeba zde: http://www.gotdotnet.com/Community/UserSamples/Details.aspx?SampleGuid=b90fddce-e60d-43f8-a5c4-c3bd760564bc
[7] jEdit
Na tohle všechno stačí jEdit, obsahuje jak plugin s JTidy, tak plugin pro XSLT transformaci. Navíc se dá udělat makro, pomoci kterého se obě úlohy spojí do jednoho kroku a je to ;-)
[8] jEdit
Tak to je pěkné, ale na jEditu mi něco vadilo natolik, že jsem u něj nezústal. Jenom už nevím, co to bylo...