使用Javascript搜索和显示XML文件中的信息_Javascript_Html_Xml

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

javascript html xml

使用Javascript搜索和显示XML文件中的信息,javascript,html,xml,Javascript,Html,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 o

我目前正在创建一个在线词典

我有一个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>


A 1。男性或积极原则，杨2。凸的，凸起的3.响应的感叹词4。恐惧的感叹词。呼喊助词6。满文中的一颗牙齿是一个随意回应的感叹词
一张折叠纸的外缘
一种带有凸起字符的青铜标识，用于在夜间进入城市
音乐中的一种阳刚的音调
用来驱赶鸡或鸟的声音
一声巨响，一种骚动的声音。亨特，巴特2号。哪里

我的HTML如下所示：

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

我希望用户能够搜索像“JIJUN”这样的词，然后返回每个条目（整行），其中包含该词，并显示在“results”DIV中

我的主要问题是我不知道如何用javascript实现它，朝着正确的方向推动会非常有帮助，一个完整的答案会非常棒。我在stackexchange上使用了其他示例，但没有一个有多大帮助

谢谢

如果文件很大，不管怎样都会很慢，因为您实际上是在搜索大字符串中的文本。更新：看到评论说这是23k行文件，这可能是几兆字节，所以希望用户第一次加载时速度较慢

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

要追加的函数只需从搜索词hit（字符串中的字符偏移索引位置）向后搜索

，然后向前搜索字符串

要对这两个函数进行编码，您主要需要String函数

不确定原因，但解决方案在JSFIDLE上给出了一个错误，即它找不到searchXML函数。当您将其保存到.html文件并在浏览器中打开时，它可以正常工作

*注意：为了快速模拟示例，我删除了XML文件中的换行符，您可以将XML加载到字符串中

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>";
}

var dict='A 1。男性或积极原则，杨2。凸的，凸起的3.响应的感叹词4。恐惧的感叹词。呼喊助词6。满文中的一颗牙随意回应的感叹词a I BUKDAN一张折叠纸的外缘a JIJUN I ACANGGA一个带有凸起字符的青铜身份标记，用于在夜间进入城市a JILGAN a yang音调音乐a FA SERE ONGGOLO see afanggala a SI a使用的声音用来驱赶鸡或鸟的叫声是一种骚动的声音。亨特，巴特2号。何处";；
//注意：如果您的XML包含任何“字符”，它将中断。。搜索替换词典中的“字符首先替换为”可能，这是解决此问题的最快方法，如果词典不是动态的，请确定
函数searchXML（）{
var term=document.getElementById（'srch'）.value；
getNextEntry（术语，0，dict.length-1）；
}
函数getNextEntry（term、startIndexPos、endIndexPos）{
var n=dict.indexOf（术语、起始索引、终止索引）；
如果（n>0）{
//发现击中
addhittoiv（n）；
getNextEntry（term，n+term.length+1，endIndexPos）；
}否则{
//完成搜索
返回-1；
}
}
函数addHitToDIV（startIndexPos）{
var完整输入；
var first=dict.lastIndexOf（“”，startIndexPos）；
var last=dict.indexOf（“”，startIndexPos，dict.length-1）；
document.getElementById（'results'）.innerHTML=document.getElementById（'results'）.innerHTML+“”+dict.substring（first+7，last-1）+“

”；
}

用JavaScript解析XML并不有趣。尝试以某种JSON格式获取数据。您的XML文件有多大，您是在做这个前端还是可以使用node？@DanielKobe到目前为止，我的XML文件是~1MB，我在做这个前端，我不熟悉node@DanielKobe计划最终使用多个词典，只会我想让它暂时运行一下being@Daniel我肯定会研究这个问题，但现在我想继续使用javascript，我有超过23k个条目，还没有准备好开始搞乱它们的设置。谢谢！