文本搜索 - 突出顯示搜索短語

在HTML文檔中突出顯示Searched語句的最佳方式是什麼？文本搜索 - 突出顯示搜索短語

我已經完成HTML文檔作爲變量中的大字符串。而且我想突出顯示搜索到的術語，不包含帶有標籤的文本。

例如，如果用戶搜索「img」，則應忽略img標記，但應在文本內突出顯示短語「img」。

2010-08-26 user160820

你的意思是在用戶瀏覽器中？如果是這樣，這是一個純粹的JavaScript問題，應該重新標記 – Riduidel 2010-08-26 09:06:59

據我瞭解，這是關於JavaScript，而不是Java和編程語言 - > retagged。 – atamanroman 2010-08-26 09:19:49

不要使用正則表達式。

由於正則表達式無法解析HTML（甚至無法逼近），任何試圖弄亂HTML字符串中的匹配單詞的嘗試都有可能會破壞出現在標記中的單詞。一個執行得不好的HTML正則表達式攻擊甚至可能使您面臨HTML注入漏洞，攻擊者可能利用這些漏洞進行跨站點腳本編寫。

相反，您應該解析HTML並僅對文本內容進行搜索。

如果您可以接受在客戶端添加來自JavaScript的突出顯示的解決方案，這非常簡單，因爲瀏覽器已經將HTML解析爲可以操作的一堆DOM對象。見例如。用於客戶端示例的this question。

如果你必須用PHP來處理它，那會更棘手。簡單的解決方案是使用DOMDocument::loadHTML，然後將上述示例中的findText函數轉換爲PHP。至少使用的DOM方法是標準化的，所以它們的工作原理是相同的。

來源

2010-08-26 10:22:53 bobince

編輯：這被標記爲Java之前，所以這個答案可能不適用。

這是快速和骯髒的，但它可能爲你工作，或者至少是一個起點

private String highlight(String search,String html) { 
    return html.replaceAll("(>[^<]*)("+search+")([^>]*<)","$1<em>$2</em>$3"); 
}

這需要測試，我不作任何保證其正確的，但最簡單的方法來解釋如何確保您的詞彙存在於兩個標籤之間，因此本身不是標籤或標籤參數的一部分。

來源

2010-08-26 09:16:30 BjornS

JavaSCRIPT，而不是Java;）編輯：啊，我看到你被標籤'java'弄糊塗了。 – Lekensteyn 2010-08-26 09:20:13

是的，我保持答案，因爲正則表達式至少是相關的:) – BjornS 2010-08-26 09:25:21

var highlight = function(what){ 
    var html = document.body.innerHTML, 

     word = "(" + what + ")", 
     match = new RegExp(word, "gi"); 

    html = html.replace(match, "<span style='background-color: red'>$1</span>"); 

    document.body.innerHTML = html; 
}; 

highlight('ll');

這會突出顯示任何發生'll'。

通過調用highlight()與<或>或任何tag name小心，它也將取代那些搞砸了您的標記。您可能通過閱讀innerText而不是innerHTML來解決這個問題，但這樣您將失去標記信息。

最好的方法可能是自己實現解析器例程。

例子：http://www.jsfiddle.net/DRtVn/

來源

2010-08-26 09:29:24 jAndy

有一個免費的JavaScript庫，可以幫助你 - >http://scott.yang.id.au/code/se-hilite/

來源

2010-08-26 10:25:28 Christophe