2012-06-07 86 views
7

我有这样的XML:将XML转换为HTML:最佳实践?

<Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> 

,我需要在HTML标记来使用:

<a href="#" data-name="Syd Mead" data-id="3412" 
    data-ntrack="28" data-pop="8" 
    class="pop-8"><span>Syd Mead</span></a> 

什么是“正确”的方式,为浏览器的最广泛的做到这一点?这可以通过XSLT转换可靠地完成吗?使用正则表达式(不太可能)更好,还是必须解析出xml,并且每个<Artist>标记读取每个属性并手动执行document.createElement和setAttribute?

<Artist>标签位于父节点中,其中有许多标签。对此有最佳做法吗?

+0

是的,这可以在使用XSLT非常紧凑和优雅的方式来完成。 –

回答

5

这看起来很像XSLT的完美候选人 - XML是干净的&格式良好。如果您担心浏览器兼容性,为什么不在服务器端进行转换?

这XSLT将改变你的数据 - 你可以测试它here

源数据:

<Artists> 
    <Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> 
</Artists> 

XSLT:

<?xml version="1.0" encoding="ISO-8859-1"?> 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:template match="/"> 
    <xsl:for-each select="Artists/Artist"> 
     <a href="#"> 
      <xsl:attribute name="data-id">  
       <xsl:value-of select="@id"/> 
      </xsl:attribute> 
      <xsl:attribute name="data-ntrack">  
       <xsl:value-of select="@ntrack"/> 
      </xsl:attribute> 
      <xsl:attribute name="data-pop">  
       <xsl:value-of select="@pop"/> 
      </xsl:attribute> 
      <xsl:attribute name="data-name">  
       <xsl:value-of select="@name"/> 
      </xsl:attribute> 
      <xsl:attribute name="class">  
       <xsl:value-of select="concat('pop-',@pop)"/> 
      </xsl:attribute> 

      <span><xsl:value-of select="@name"/></span> 
     </a> 
    </xsl:for-each> 
</xsl:template> 
</xsl:stylesheet> 

我没有在客户端完成此,所以很遗憾我不能说浏览器的兼容性。

+0

服务器端不是一个选项。那么XSLT将如何转型?并且是XSLT语法,以便相同的代码可用于顶级浏览器(IE7 +,Chrome,Firefox,Safari)。 – artlung

+0

@artlung - 用适当的xslt更新。 –

+0

@SimonMcKenzie - 不要忘记'class'属性。 –

2

这里的另一个XSLT样式表的选项,在我看来是简单的:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    <xsl:output method="html"/> 

    <xsl:template match="/*/Artist"> 
     <a href="#" class="pop-{@pop}"> 
      <xsl:apply-templates select="@*"/> 
      <span><xsl:value-of select="@name"/></span> 
     </a>   
    </xsl:template> 

    <xsl:template match="@*"> 
     <xsl:attribute name="data-{name()}"> 
      <xsl:value-of select="."/> 
     </xsl:attribute> 
    </xsl:template> 

</xsl:stylesheet> 

XML输入

<Artists> 
    <Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> 
</Artists> 

HTML输出

<a class="pop-8" href="#" data-name="Syd Mead" data-id="3412" data-ntrack="28" data-pop="8"> 
    <span>Syd Mead</span> 
</a> 
5

下面是一个简单(没有条件语句,没有额外的模板,没有xsl:attribute,没有xsl:for-each),短而彻底转变

<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:output omit-xml-declaration="yes" indent="no"/> 

<xsl:template match="Artist"> 
    <a href="#" data-name="{@name}" 
       data-id="{@id}" 
       data-ntrack="{@ntrack}" 
       data-pop="{@pop}" 
       class="pop-{@pop}"> 
    <span><xsl:value-of select="@name"/></span> 
    </a> 
</xsl:template> 
</xsl:stylesheet> 

当这种变换所提供的XML文档应用:

<Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> 

想要的,正确的结果产生

<a href="#" data-name="Syd Mead" data-id="3412" data-ntrack="28" data-pop="8" class="pop-8"><span>Syd Mead</span></a> 

说明:正确使用AVT(属性值模板)

+0

在这种情况下,我认为这是一种更可行的解决方案特别是因为它的简洁语法很像现代Web框架中的模板。 –

+1

@LayZee,是的,我完全同意:)。不用谢。 –