Question

作为一个辅助项目，我目前正在尝试一些东西，并通过浏览器了解XML解释。我想要实现的是：读取XML并将其转换为可见的HTML结构。

让我们说这是我的XML。（对于那些好奇的人来说，它是荷兰语句子的语言表达。）我希望能够遍历这个结构，并从中收集信息。（并且，作为扩展，请将其转换为我自己的HTML。）

<node begin="0" cat="top" end="11" id="0" rel="top">
    <node begin="0" cat="smain" end="10" id="1" rel="--">
        <node begin="0" cat="np" end="5" id="2" rel="su">
            <node begin="0" end="1" id="3" lemma="de" pos="det" pt="lid" rel="det" root="de" word="De"/>
            <node begin="1" end="2" genus="zijd" getal="ev" graad="basis" id="4" lemma="helft" ntype="soort" pos="noun" pt="n" rel="hd" root="helft" word="helft"/>
            <node begin="2" cat="pp" end="5" id="5" rel="mod">
                <node begin="2" end="3" id="6" lemma="van" pos="prep" pt="vz" rel="hd" root="van" word="van"/>
                <node begin="3" cat="np" end="5" id="7" rel="obj1">
                    <node begin="3" end="4" id="8" lemma="al" pos="det" positie="prenom" pt="vnw" rel="det" root="alle" word="alle"/>
                    <node begin="4" end="5" getal-n="mv-n" id="9" lemma="werkloos" pos="adj" positie="nom" pt="adj" rel="hd" root="werkloos" word="werklozen"/>
                </node>
            </node>
        </node>
        <node begin="5" end="6" id="10" lemma="zijn" pos="verb" pt="ww" pvagr="ev" rel="hd" root="ben" word="is" wvorm="pv"/>
        <node begin="6" cat="ap" end="10" id="11" rel="predc">
            <node begin="6" buiging="zonder" end="7" graad="comp" id="12" lemma="jong" pos="adj" pt="adj" rel="hd" root="jong" word="jonger"/>
            <node begin="7" cat="cp" end="10" id="13" rel="obcomp">
                <node begin="7" conjtype="onder" end="8" id="14" lemma="dan" pos="comparative" pt="vg" rel="cmp" root="dan" word="dan"/>
                <node begin="8" cat="np" end="10" id="15" rel="body">
                    <node begin="8" end="9" id="16" lemma="30" pos="num" positie="prenom" pt="tw" rel="det" root="30" word="30"/>
                    <node begin="9" end="10" genus="onz" getal="ev" id="17" lemma="jaar" pos="noun" pt="n" rel="hd" root="jaar" word="jaar"/>
                </node>
            </node>
        </node>
    </node>
    <node begin="10" end="11" id="18" lemma="." pos="punct" postag="LET()" pt="let" rel="--" root="." word="."/>
</node>

但是，这并不像预期的那样容易。我尝试使用jQuery＆＃39; $.parseXML(data)然后将其转换为jQuery对象，但我似乎无法浏览应该生成的XML的内部结构。 / p>

如果#xml-input是包含上述XML的代码标记，则以下日志返回undefined。

var xml = $("#xml-input").html(),
    xmlParsed = $.parseXML(xml),
    xmlObject = $(xmlParsed);

console.log(xmlObject.node);

如何将输入转换为XML，我可以使用jQuery进行操作？这是fiddle可以玩的。

Answer 1

您可以使用jQuery方法来操作使用$.parseXML解析的XML文档。例如，

console.log(xmlObject.find("node"));

返回文档中的所有node元素

小提琴：http://jsfiddle.net/rj3hpy6m/

对于属性，您可以使用.attr()来获取属性。例如，从第一个节点获取属性“cat”。

xmlObject.find("node").first().attr("cat") // top

Answer 2

我相信以下演示可以帮助您全面了解。它遍历所有节点和输出id, begin and end值。如果您有任何问题，请告诉我们。

＆＃13;

$(document).ready(function() {
  var xml = $("#xml_input").val(),
    xmlParsed = $.parseXML(xml),
    xmlObject = $(xmlParsed);
  function output( nodes ) {
    nodes.each(function() {
      $('pre.out').append( 'id='+this.id + ',\t\tbegin='+$(this).attr('begin') +  ',\tend='+ $(this).attr('end') + '\n' );
      output( $(this).children('node') );
    });
  }

  output( xmlObject.children('node') );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
INPUT: <br>
<textarea id="xml_input"><node begin="0" cat="top" end="11" id="0" rel="top">
    <node begin="0" cat="smain" end="10" id="1" rel="--">
        <node begin="0" cat="np" end="5" id="2" rel="su">
            <node begin="0" end="1" id="3" lemma="de" pos="det" pt="lid" rel="det" root="de" word="De"/>
            <node begin="1" end="2" genus="zijd" getal="ev" graad="basis" id="4" lemma="helft" ntype="soort" pos="noun" pt="n" rel="hd" root="helft" word="helft"/>
            <node begin="2" cat="pp" end="5" id="5" rel="mod">
                <node begin="2" end="3" id="6" lemma="van" pos="prep" pt="vz" rel="hd" root="van" word="van"/>
                <node begin="3" cat="np" end="5" id="7" rel="obj1">
                    <node begin="3" end="4" id="8" lemma="al" pos="det" positie="prenom" pt="vnw" rel="det" root="alle" word="alle"/>
                    <node begin="4" end="5" getal-n="mv-n" id="9" lemma="werkloos" pos="adj" positie="nom" pt="adj" rel="hd" root="werkloos" word="werklozen"/>
                </node>
            </node>
        </node>
        <node begin="5" end="6" id="10" lemma="zijn" pos="verb" pt="ww" pvagr="ev" rel="hd" root="ben" word="is" wvorm="pv"/>
        <node begin="6" cat="ap" end="10" id="11" rel="predc">
            <node begin="6" buiging="zonder" end="7" graad="comp" id="12" lemma="jong" pos="adj" pt="adj" rel="hd" root="jong" word="jonger"/>
            <node begin="7" cat="cp" end="10" id="13" rel="obcomp">
                <node begin="7" conjtype="onder" end="8" id="14" lemma="dan" pos="comparative" pt="vg" rel="cmp" root="dan" word="dan"/>
                <node begin="8" cat="np" end="10" id="15" rel="body">
                    <node begin="8" end="9" id="16" lemma="30" pos="num" positie="prenom" pt="tw" rel="det" root="30" word="30"/>
                    <node begin="9" end="10" genus="onz" getal="ev" id="17" lemma="jaar" pos="noun" pt="n" rel="hd" root="jaar" word="jaar"/>
                </node>
            </node>
        </node>
    </node>
    <node begin="10" end="11" id="18" lemma="." pos="punct" postag="LET()" pt="let" rel="--" root="." word="."/>
</node>
</textarea><br><br>

OUTPUT:<br>
<pre class="out"></pre>

＆＃13;

如何遍历自定义XML结构并在jQuery中使用信息

2 个答案: