Question

我正在尝试使用XSLT转换XML，为此我希望使用textarea输入XML文本，并将转换结果显示在其他textarea中。到目前为止，我的JavaScript代码如下：

<script type="text/javascript">

        var xslTransform = new XslTransform("XSLTCode.xsl");

        function transformarXML(){
            var xmlIn = document.getElementById("XMLIN").value;
            var xmlOut = document.getElementById("XMLOUT");

            var outputText = xslTransform.transform(xmlIn);

            xmlOut.value = outputText;

        }

</script>

但由于某种原因，输出textarea根本不显示任何文本。我应该如何正确使用JavaScript？还有其他更容易解决的问题吗？

Answer 1

对于IE以外的浏览器，您可以使用XSLTProcessor执行XSLT转换，使用DOMParser将XSLT字符串输入分别解析为文档。

function transform(xml, xslt) {
  var domParser = new DOMParser();
  var sheet = domParser.parseFromString(xslt, 'application/xml');
  var doc = domParser.parseFromString(xml, 'application/xml');
  var proc = new XSLTProcessor();
  proc.importStylesheet(sheet);
  var resultDoc = proc.transformToDocument(doc);
  // depending on the kind of result created or wanted it might be better to use return new XMLSerializer().serializeToString(resultDoc)
  return resultDoc.documentElement.outerHTML;
}

async function loadAndTransform(xml, xsltUrl) {
  try {
    var response = await fetch(xsltUrl);
    var xsltCode = await response.text();
    return transform(xml, xsltCode);
  }
  catch (e) {
    console.log(e);
    throw e;
  }
}

async function handler1() {
  document.getElementById('result').value = await loadAndTransform(document.getElementById('input-xml').value, 'data:application/xml,' + encodeURIComponent(document.getElementById('xslt').value));
}

async function handler2() {
  document.getElementById('result').value = await loadAndTransform(document.getElementById('input-xml').value, 'sheet.xsl');
}

<textarea id="input-xml" rows="10" cols="80"><root>
  <list>
     <item>a</item>
     <item>b</item>
  </list>
</root>
</textarea>

<textarea id="xslt" rows="10" cols="80">
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html"/>
  
  <xsl:template match="root">
     <html>
       <body>
         <xsl:apply-templates/>
       </body>
     </html>
   </xsl:template>
   
   <xsl:template match="list">
     <ul>
       <xsl:apply-templates/>
     </ul>
   </xsl:template>
   
   <xsl:template match="item">
     <li>
       <xsl:apply-templates/>
     </li>
   </xsl:template>
</xsl:stylesheet>
</textarea>

<input type="button" value="transform"
  onclick="document.getElementById('result').value = transform(document.getElementById('input-xml').value, document.getElementById('xslt').value);">
  
<input type="button" value="load and transform"
  onclick="handler1();">
  
<!--
<input type="button" value="load and transform from url"
  onclick="handler2();">
-->
  
<textarea id="result" rows="10" cols="80"></textarea>

请注意，XSLTProcessor主要用于创建要进一步使用的DOM节点，如果你想将结果作为一个字符串，你需要序列化DOM节点，在我使用outerHTML for HTML的片段中，如果你想要XML输出，请提到新的XMLSerializer（）。

通过输入textarea使用XSLT转换XML

1 个答案: