如何使用 XSLT 在具有特定类的 HTML 表格周围插入新标签？答案

【问题标题】：How can I insert new tags around a table in HTML with a particular class using XSLT?如何使用 XSLT 在具有特定类的 HTML 表格周围插入新标签？
【发布时间】：2020-08-04 06:49:00
【问题描述】：

我对 XSLT 几乎一无所知，必须解决一个棘手的问题。我们的电子邮件撰写软件正在生成这样的 HTML：

<body style="background-color:#F2F2F2">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2"><tr><td align="center" bgcolor="#F2F2F2">
<table cellpadding="0" cellspacing="0" width="138" role="presentation" bgcolor="#FFFFFF" 
style="border-collapse: collapse; table-layout: fixed" class="EX_RESPONSIVE_TABLE_768"><tr><td 
class="EX_RESPONSIVE_HIDE_CELL_768" width="138" height="0"></td>
</tr>
<tr><td class="EX_RESPONSIVE_HIDE_CELL_768" valign="middle" align="center"><table 
id="ex-table1" cellpadding="0" cellspacing="0" width="138" style="border-collapse: collapse"><tr><td 
width="138" style="margin-bottom: 0px; margin-top: 0px; padding-top:5.00px; padding-bottom:5.00px" 
align="center" valign="top"><table cellpadding="0" cellspacing="0" width="100%" 
style="border-collapse: collapse"><tr><td style="margin-top: 0; margin-bottom: 0; font-size: 0; text-align: center; padding-top: 2px; padding-bottom: 2px; line-height: 1"><span 
style="font-family: 'Arial', serif; font-size: 15px; line-height: 17px; color:#000000">Lorem 
Impsum 1</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr><td class="HideMSO EX_RESPONSIVE_SHOW_CELL_768" valign="middle" align="center"><table 
id="ex-table2" cellpadding="0" cellspacing="0" width="138" style="border-collapse: collapse"><tr><td 
width="138" style="margin-bottom: 0px; margin-top: 0px; padding-top:5.00px; padding-bottom:5.00px" 
align="center" valign="top"><table cellpadding="0" cellspacing="0" width="100%" 
style="border-collapse: collapse"><tr><td style="margin-top: 0; margin-bottom: 0; font-size: 0; text-align: center; padding-top: 2px; padding-bottom: 2px; line-height: 1"><span 
style="font-family: 'Arial', serif; font-size: 15px; line-height: 17px; color:#000000">Lorem 
ipsum 2</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td></tr></table>
</body>

我们需要（以支持 Outlook 电子邮件客户端）将其更改为：

<body style="background-color:#F2F2F2">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2"><tr><td align="center" bgcolor="#F2F2F2">
<table cellpadding="0" cellspacing="0" width="138" role="presentation" bgcolor="#FFFFFF" 
style="border-collapse: collapse; table-layout: fixed" class="EX_RESPONSIVE_TABLE_768"><tr><td 
class="EX_RESPONSIVE_HIDE_CELL_768" width="138" height="0"></td>
</tr>
<tr><td class="EX_RESPONSIVE_HIDE_CELL_768" valign="middle" align="center"><table 
id="ex-table1" cellpadding="0" cellspacing="0" width="138" style="border-collapse: collapse"><tr><td 
width="138" style="margin-bottom: 0px; margin-top: 0px; padding-top:5.00px; padding-bottom:5.00px" 
align="center" valign="top"><table cellpadding="0" cellspacing="0" width="100%" 
style="border-collapse: collapse"><tr><td style="margin-top: 0; margin-bottom: 0; font-size: 0; text-align: center; padding-top: 2px; padding-bottom: 2px; line-height: 1"><span 
style="font-family: 'Arial', serif; font-size: 15px; line-height: 17px; color:#000000">Lorem 
Impsum 1</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!--[if !mso 9]><!--><tr><td class="HideMSO EX_RESPONSIVE_SHOW_CELL_768" valign="middle" align="center"><table 
id="ex-table2" cellpadding="0" cellspacing="0" width="138" style="border-collapse: collapse"><tr><td 
width="138" style="margin-bottom: 0px; margin-top: 0px; padding-top:5.00px; padding-bottom:5.00px" 
align="center" valign="top"><table cellpadding="0" cellspacing="0" width="100%" 
style="border-collapse: collapse"><tr><td style="margin-top: 0; margin-bottom: 0; font-size: 0; text-align: center; padding-top: 2px; padding-bottom: 2px; line-height: 1"><span 
style="font-family: 'Arial', serif; font-size: 15px; line-height: 17px; color:#000000">Lorem 
ipsum 2</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr><!--<![endif]-->
</table></td></tr></table>
</body>

老实说，我有点不知所措。我找到了插入 HTML 标记 + 元素对的指南，但没有专门插入这些围绕 HTML 块的标记。我相信通过与某人交谈，我们可以使用“hideMSO”类属性给 XSLT 一个“钩子”来识别相关部分，但在那之后我迷路了。

可以帮忙吗？

【问题讨论】：

XSLT 通常的输入是 XML，而不是 HTML。而且您似乎想插入 cmets，而不是标签。
这将如何运行？您使用的是哪个 XSLT 引擎？到目前为止，您尝试过什么？
@Sebastien - 我相信它是 Xalan，它是 XSLT v1.0。到目前为止，我已经尝试查看 w3schools xslt 课程，但一无所获。似乎没有什么能与我的情况相提并论。我的意思是查看 w3schools 网站，我所看到的课程似乎都没有涵盖这方面的任何部分。有一个插入注释 ()，但我看不到在表格周围应用它的方法。是否有在线教程可以让我学习正确的东西？ w3s 教程似乎面向非常不同的应用程序。

标签： html xml xslt

【解决方案1】：

您可以尝试这些方法：

    <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    version="1.0">

  <xsl:output method="html" indent="yes"/>

  <xsl:template match="tr[td[contains(@class,'HideMSO')]]">
    <xsl:comment>[if !mso 9]&gt;&lt;!</xsl:comment> 
        <xsl:copy>
            <xsl:apply-templates/>
        </xsl:copy>
    <xsl:comment>&lt;![endif]</xsl:comment>
  </xsl:template>

  <xsl:template match="@*|node()">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>

</xsl:stylesheet>

在这里查看它的工作原理：https://xsltfiddle.liberty-development.net/3MvmXiK/1

【讨论】：

对，我想我明白了。 xsl:comment 保存评论内容。是否可以将其更改为仅将注释标签包装在包含表格的周围？我找到了插入 cmets 的解决方案，它是将它包裹在周围的部分，其中包含我无法理解的 HideMSO。编辑：是否可以匹配包含 HideMSO 的 td，然后在 xpath 中“升级”一个（或两个）级别，然后插入评论？
@TomDenyer 是的，这一切都应该是可能的，但是您需要在您的问题中插入更多详细信息，以便我们能够获得更大的图景并确定解决方案。
我已经用我目前正在处理的整个丑陋的 HTML 文件更新了这个问题。请问这个技能怎么练？有没有比 w3schools 更好的资源，还是我应该从那里开始？