使用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文件的信息

回答

相關問題