使用Javascript搜索和显示来自XML文件的信息

我目前正在创建一个在线词典。使用Javascript搜索和显示来自XML文件的信息

我从字典存储这样的信息的XML文档：

<?xml version="1.0" encoding="UTF-8"?> 
<dictionary> 
    <norman> 
     <entry>A 1. the male or positive principle, yang 2. convex, raised 3.interjection ofresponse 4. interjection of fear S. vocative particle 6. a tooth in the Manchuscript A A an interjection of casual response </entry> 
     <entry>A I BUKDAN the outside edge of a piece of folded paper </entry> 
     <entry>A JIJUN I ACANGGA a bronze identification token with raised characters used togain admittance to a city at night </entry> 
     <entry>A JILGAN a yang tone in music A FA SERE ONGGOLO see afanggala </entry> 
     <entry>A SI a sound used for driving chickens or birds </entry> 
     <entry>A TA (onom.) the sound of a commotion ABA 1. hunt, battue 2. where 
    </norman> 
</dictionary>

我的HTML看起来像这样：

<input type="text" name="entry" id="input"> 
<br /> 
<input type="submit" value="Submit" onClick="searchXML()"> 
<br /> 
<br /> 
<div id="results"> 
</div>

我希望用户能够搜索词像“JIJUN”，然后返回每个条目（整行）与该单词在其中并显示在“结果”DIV

我的主要问题是我不知道如何去实现用javascript来解决这个问题，一个正确的方向将是非常有帮助的，一个完整的答案会很棒。我已经在堆栈交换中使用过其他例子，但没有太多帮助。

谢谢

来源

2015-12-15 user3186749

解析XML与JavaScript是没有乐趣。尝试以某种JSON格式获取数据。 – Daniel

你的XML文件有多大，你在做这个前端还是你可以使用节点？ –

@DanielKobe截至目前我的XML文件是〜1MB，我正在做这个前端，我不熟悉节点 – user3186749

如果文件非常大，这将是缓慢的，无论什么，因为你是在一个大的字符串，本质上搜索文本。更新：看到它是23k行文件的评论，这大概是几兆字节，所以期望用户第一次缓慢加载。

您可以将XML加载到一个字符串中，然后找到搜索项的第一个实例，调用一个函数将该条目追加到结果DIV中。然后从刚刚标识的条目末尾开始，或者如果您在搜索字词结束后从字符开始懒惰，请再次运行搜索。

追加函数将只从的搜索项hit（字符串中的字符偏移量索引位置）向后搜索并转发到字符串</entry>。

要对这两个函数进行编码，您主要需要字符串函数indexOf。

jsFiddle solution here

不知道为什么，但解决方案给出的jsfiddle一个错误，它不能找到searchXML功能。当您将其保存到.html文件并在浏览器中打开它时，它工作正常。 *注意：我删除了XML文件中的换行符以快速模拟示例，您可以将XML加载到字符串this way中。

HTML

<body> 
<input id="srch" type="text" > 
<br /> 
<input type="submit" value="Submit" onClick="searchXML()"> 
<br /> 
<br /> 
<div id="results"> 
</div> 
</body>

var dict = '<?xml version="1.0" encoding="UTF-8"?><dictionary> <norman>  <entry>A 1. the male or positive principle, yang 2. convex, raised 3.interjection ofresponse 4. interjection of fear S. vocative particle 6. a tooth in the Manchuscript A A an interjection of casual response </entry>  <entry>A I BUKDAN the outside edge of a piece of folded paper </entry>  <entry>A JIJUN I ACANGGA a bronze identification token with raised characters used togain admittance to a city at night </entry>  <entry>A JILGAN a yang tone in music A FA SERE ONGGOLO see afanggala </entry>  <entry>A SI a sound used for driving chickens or birds </entry>  <entry>A TA (onom.) the sound of a commotion ABA 1. hunt, battue 2. where  </norman></dictionary>'; 
//NOTE: if your XML contains any ' characters it will break.. search replace your dictionary for the ' character first replace it with " maybe, this is the fastest solution to this, ok if your dictionary is not dynamic 

function searchXML() { 

    var term = document.getElementById('srch').value; 

    getNextEntry(term, 0, dict.length-1); 
} 

function getNextEntry(term, startIndexPos, endIndexPos){ 

    var n = dict.indexOf(term, startIndexPos,endIndexPos); 
    if (n > 0) { 
     //found hit 
     addHitToDIV(n); 
     getNextEntry(term, n + term.length + 1, endIndexPos); 

    } else { 
     //done searching 

     return -1; 
    } 


} 
function addHitToDIV(startIndexPos) { 
    var fullEntry; 
    var first = dict.lastIndexOf("<entry>", startIndexPos); 
    var last = dict.indexOf("</entry>", startIndexPos,dict.length-1); 
    document.getElementById('results').innerHTML = document.getElementById('results').innerHTML + "<p>" + dict.substring(first+7, last-1) + "</p><br>"; 
}

来源

2015-12-15 21:42:16

谢谢你期待的例子！ – user3186749

使用Javascript搜索和显示来自XML文件的信息

回答

相关问题