Question

我正在尝试用任何级别的脚本标签替换某些div标签。 div中设置为none的代码是我需要的（丢弃两个外部div），并且该代码中的div具有＆＃34; is-script＆＃34;必须用脚本替换，同时保留其属性和节点。代码看起来如何的一些例子：

 <div data-type="embed">
    <div style="display:none;">
        <div class="is-script" src="http://example.js"></div>
    </div>
</div>

<div data-type="embed">
    <div style="display:none;">
        <div class="is-script" src="http://example1.js"></div>
        <div class="is-script" src="http://example2.js"></div>
    </div>
</div>

<div data-type="embed">
    <div style="display:none;">
        <div>
            <div class="is-script" src="http://example.js"></div>
        </div>
    </div>
</div>

<div data-type="embed">
    <div style="display:none;">
        <div>
            <div class="is-script" src="http://example1.js"></div>
            <div class="is-script" src="http://example2.js"></div>
        </div>
    </div>
</div>

<div data-type="embed">
    <div style="display:none;">
        <div>
            <div class="is-script" src="http://example1.js"></div>
            <div class="is-script">some inline javascript</div>
        </div>
    </div>
</div>

<div data-type="embed">
    <div style="display:none;">
        <iframe src="http://example.html" width="100%" height="400px"></iframe>
    </div>
</div>

xsl解析的实际json：

<div data-type=\"embed\" style=\"width:545px;height:200px;background-color:#ccc;\">HTML EMBED
    <div style=\"display:none;\">
        <div class=\"is-script\">console.log(\"test1\");</div>
    </div>
</div>

<div data-type=\"embed\" style=\"width:545px;height:200px;background-color:#ccc;\">HTML EMBED
    <div style=\"display:none;\">
        <div>
            <div class=\"is-script\">console.log(\"test2\");</div>
        </div>
    </div>
</div>

<div data-type=\"embed\" style=\"width:545px;height:200px;background-color:#ccc;\">HTML EMBED
    <div style=\"display:none;\">
        <div class=\"is-script\" src=\"example.js\"></div>
    </div>
</div>

<div data-type=\"embed\" style=\"width:545px;height:200px;background-color:#ccc;\">HTML EMBED
    <div style=\"display:none;\">
        <div>
            <div class=\"is-script\" src=\"example.js\"></div>
        </div>
    </div>
</div>

<div data-type=\"embed\" style=\"width:545px;height:200px;background-color:#ccc;\">HTML EMBED
    <div style=\"display:none;\">
        <div>
            <div class=\"is-script\" src=\"example1.js\"></div>
            <div class=\"is-script\" src=\"example2.js\"></div>
            <div class=\"is-script\" src=\"example3.js\"></div>
        </div>
    </div>
</div>

通缉结果：

<script class="is-script" src="http://example.js"></script>


<script class="is-script" src="http://example1.js"></script>
<script class="is-script" src="http://example2.js"></script>


<div>
    <script class="is-script" src="http://example.js"></script>
</div>


<div>
    <script class="is-script" src="http://example1.js"></script>
    <script class="is-script" src="http://example2.js"></script>
</div>


<div>
    <script class="is-script" src="http://example1.js"></script>
    <script class="is-script">some inline javascript</script>
</div>


<iframe src="http://example.html" width="100%" height="400px"></iframe>

目前的结果：

<script class="was-script-tag">console.log("test1");</script>

<div>
    <div class="was-script-tag">console.log("test2");</div>
</div>

<script class="was-script-tag" src="/templates/v1/js/sticky_article_v7.js?v0"></script>

<div>
    <div class="was-script-tag" src="/templates/v1/js/sticky_article_v7.js?v1"></div>
</div>

<div>
    <div class="was-script-tag" src="/templates/v1/js/sticky_article_v7.js?v2"></div>
    <div class="was-script-tag" src="/templates/v1/js/sticky_article_v7.js?v2"></div>
    <div class="was-script-tag" src="/templates/v1/js/sticky_article_v7.js?v2"></div>
</div>

我的xsl：

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

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


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

    <xsl:template match="div[@data-type='embed' or parent::div[@data-type='embed']]">
        <xsl:apply-templates />
    </xsl:template>

    <xsl:template match="div[@class='is-script']">
        <script>
            <xsl:apply-templates select="@*|node()"/>
        </script>
    </xsl:template>

</xsl:stylesheet>

所以基本上删除两个外部div，并按原样保持每个内部，除了具有＆＃34; is-script＆＃34;类的div。必须重命名为脚本。两个外部div将始终相同。

我对xsl有基本的了解，但这是我无法做到的事情。使用xslt 2。

Answer 1

您可以从身份模板开始，该模板将复制所有现有节点而无需更改

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

然后，忽略＆＃34;外部两个div＆＃34;你可以像这样添加一个重写模板：

<xsl:template match="div[@data-type='embed' or parent::div[@data-type='embed']]">
  <xsl:apply-templates />
</xsl:template>

这会忽略具有嵌入数据类型或其直接子div的div元素。

然后改变＆＃34; is-script＆＃34;将div添加到script个元素，您可以添加另一个模板

<xsl:template match="div[@class='is-script']">
  <script>
    <xsl:apply-templates select="@*|node()"/>
  </script>
</xsl:template>

试试这个XSLT

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
  <xsl:template match="@*|node()">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="div[@data-type='embed' or parent::div[@data-type='embed']]">
    <xsl:apply-templates />
  </xsl:template>

  <xsl:template match="div[@class='is-script']">
    <script>
      <xsl:apply-templates select="@*|node()"/>
    </script>
  </xsl:template>
</xsl:stylesheet>

XSLT：在多个级别上用脚本替换div

1 个答案: