使用Javascript搜索和显示来自XML文件的信息 [英] Using Javascript to Search and Display info from XML file
问题描述
我目前正在创建一个在线字典。
我有一个XML文档，其中包含Dictionary中存储的信息：
<？xml version =1.0encoding =UTF-8？>
< dictionary>
< norman>
< entry> A 1.阳性或阳性原则，阳2.凸，凸3.反应的否定4.感叹词的恐惧S.呼声粒子6. Manchuscript AA中的牙齿，偶然反应< ; /条目>
< entry> A I BUKDAN一张折叠纸的外边缘< / entry>
< entry>一个JIJUN I ACANGGA一个带有凸起字符的青铜识别标记，用于夜间进入城市< /入口>
< entry> JILGAN在音乐中的一个阳调A FA SERE ONGGOLO参见afanggala< / entry>
< entry>用于驾驶鸡或鸟的SI a声音< / entry>
< entry>一个TA（onom。）一个骚动的声音ABA 1. hunt，battue 2. where
< / norman>
< / dictionary>
我的HTML看起来像这样：
< input type =textname =entryid =input>
< br />
< input type =submitvalue =SubmitonClick =searchXML（）>
< br />
< br />
< div id =results>
< / div>
我希望用户能够搜索JIJUN这样的单词，然后返回每个条目（整行）与该单词在里面，并显示在结果DIV
我的主要问题是我不知道如何使用JavaScript来实现，向正确的方向推进将会非常有帮助，完整的答案会非常棒。我已经在堆栈交换中使用过其他例子，但没有太多帮助。
谢谢
如果文件非常大，无论如何都会很慢，因为你基本上是在大字符串中搜索文本。更新：看到它是23k行文件的评论，这可能是几兆字节，所以期望用户在第一次缓慢加载。
您可以将XML加载到字符串中，然后找到搜索项的第一个实例，调用一个函数将条目追加到结果DIV中。然后，从刚刚标识的条目结尾处，或者如果您在搜索字词结束后从字符开始懒惰，请再次运行搜索。
要追加的函数只是在< entry> 的搜索项后面搜索hit（字符串中的字符偏移索引位置），然后转发到字符串< / entry> 。
要对这两个函数进行编码，您主要需要字符串函数
I am currently creating an online dictionary.
I have an XML document with the information from the Dictionary stored like this:
<?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>
My HTML looks like this:
<input type="text" name="entry" id="input">
<br />
<input type="submit" value="Submit" onClick="searchXML()">
<br />
<br />
<div id="results">
</div>
I want a user to be able to search a word like "JIJUN" and then have a return of every entry (the whole line) with that word in it and display in the "results" DIV
my main problem is I have no idea about going about implementing this with javascript, a push in the right direction would be really helpful, a complete answer would be awesome. I have used other examples on stack exchange but none have been much help.
Thank you
If the file is very large, it will be slow no matter what because you are searching for text in a large string essentially. UPDATE: saw comment that it is 23k line file, this is probably a few megabytes so expect users to load slowly the first time.
You could load the XML into a string, then find the first instance of the search term, call a function to append the entry to your result DIV. Then from the end of the entry you just identified or if you are lazy from the character after the search term ends, run the search again.
The function to append will just search backwards from your search term hit (character offset index location in the string) for <entry> and forward to the string </entry>.
To code both of these functions you mainly need the String function indexOf.
Not sure why, but the solution gives an error on JSFiddle that it cant find the searchXML function. It works fine when you save it into a .html file and open it in browser.
*NOTE: I removed the line breaks in your XML file to quickly mock up the example, you can load the XML into a string this way.
HTML
<body>
<input id="srch" type="text" >
<br />
<input type="submit" value="Submit" onClick="searchXML()">
<br />
<br />
<div id="results">
</div>
</body>
JS
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>";
}
这篇关于使用Javascript搜索和显示来自XML文件的信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
