[英]How to convert html markup to xml markup and vice versa
我需要一种算法来将以下HTML和XML标记相互转换。我的标记确实很简单(只是嵌套的div标签和img
标签),所以我不想使用.dll
或HTMLAgilityPack等库。
HTML
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 column">
<div class="ge-content">
<img src="/blabla.jpg" data-Type="Slider" data-Width="Full"></img>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 column">
<div class="ge-content">
<img src="/blabla.jpg" data-Type="Foo" data-Height="100"></img>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 column">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 column">
<div class="ge-content">
<img src="/blabla.jpg" data-Type="Collection" data-Width="Full" data-DisplayOrder="5"></img>
</div>
</div>
</div>
</div>
</div>
XML
<root>
<row>
<column>
<ge-content>
<UserControl>
<Type>Slider</Type>
<Width>Full</Width>
</UserControl>
</ge-content>
<class>col-md-12 col-sm-12 col-xs-12</class>
</column>
</row>
<row>
<column>
<ge-content>
<UserControl>
<Type>Foo</Type>
<Height>100</Height>
</UserControl>
</ge-content>
<class>col-md-6 col-sm-12 col-xs-12</class>
</column>
<column>
<row>
<column>
<ge-content>
<UserControl>
<Type>Collection</Type>
<Width>Full</Width>
<DisplayOrder>5</DisplayOrder>
</UserControl>
</ge-content>
<class>col-md-12 col-sm-12 col-xs-12</class>
</column>
</row>
<class>col-md-6 col-sm-12 col-xs-12</class>
</column>
</row>
</root>
XSLT可以用于这种转换。 .NET Framework为XSL转换提供了内置支持,您无需使用第三方库。 没有魔术,所以您仍然需要编写转换规则。
什么?
假设您有一个有效的XML(“ from.xml”)作为输入
<?xml version="1.0" encoding="UTF-8"?>
<root>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 column">
<div class="ge-content">
<img src="/blabla.jpg" data-Type="Slider" data-Width="Full" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 column">
<div class="ge-content">
<img src="/blabla.jpg" data-Type="Foo" data-Height="100" />
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 column">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 column">
<div class="ge-content">
<img src="/blabla.jpg" data-Type="Collection" data-Width="Full" data-DisplayOrder="5" />
</div>
</div>
</div>
</div>
</div>
</root>
怎么样?
您可以使用此XSL文件(“ how.xsl”)。 该文件应该使您基本了解如何编写转换规则。
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<root>
<xsl:apply-templates />
</root>
</xsl:template>
<xsl:template match="div[@class='row']">
<row>
<xsl:for-each select="div">
<column>
<xsl:apply-templates />
<xsl:variable name="length" select="string-length(@class)" />
<class>
<xsl:value-of select="substring(@class, 1, $length - 7)" />
</class>
</column>
</xsl:for-each>
</row>
</xsl:template>
<xsl:template match="div[@class='ge-content']">
<ge-content>
<xsl:apply-templates />
</ge-content>
</xsl:template>
<xsl:template match="img">
<UserControl>
<xsl:value-of select="@data-Type" />
</UserControl>
<xsl:choose>
<xsl:when test="@data-Height">
<Height>
<xsl:value-of select="@data-Height" />
</Height>
</xsl:when>
</xsl:choose>
<xsl:choose>
<xsl:when test="@data-DisplayOrder">
<DisplayOrder>
<xsl:value-of select="@data-DisplayOrder" />
</DisplayOrder>
</xsl:when>
</xsl:choose>
<xsl:choose>
<xsl:when test="@data-Width">
<Width>
<xsl:value-of select="@data-Width" />
</Width>
</xsl:when>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>
下一步是将转换规则应用于输入文件。
var xslt = new XslTransform();
xslt.Load("how.xsl");
xslt.Transform("from.xml", "to.xml");
可以使用相同的方法从XML文件生成HTML文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.