XSLT: Replacing div with script on multiple levels - xslt

Question

I am trying to replace certain div-tags with script-tags within any level.
The code within the div that is set to display none is what I need (discard the two outer divs), and the divs within that code that has a class of "is-script" must be replaced with script, while keeping its attributes and nodes.
Some examples of how the code can look:
<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>
The actual json that the xsl is parsing:
<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>
Wanted result:
<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>
Current result:
<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>
My 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>
So basically remove two outer divs, and keep everyting inside as is, except divs with class of "is-script" which must be renamed to script. The two outer divs will always be the same.
I have a basic understanding of xsl, but this is something I just can't make work.
Using xslt 2.

Answer 1

You could possibly start off with the identity template, which will copy all existing nodes without change
<xsl:template match="#*|node()">
<xsl:copy>
<xsl:apply-templates select="#*|node()"/>
</xsl:copy>
</xsl:template>
Then, to ignore the "outer two divs" you can add an overriding template like so:
<xsl:template match="div[#data-type='embed' or parent::div[#data-type='embed']]">
<xsl:apply-templates />
</xsl:template>
This ignores div elements with a data-type of embed, or its immediate child div.
Then to change the "is-script" divs to script elements you can add another template
<xsl:template match="div[#class='is-script']">
<script>
<xsl:apply-templates select="#*|node()"/>
</script>
</xsl:template>
Try this 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>