如何動態地突出顯示html文檔中的文本

我在HTML頁面中有幾個元素（它們不共享標籤類型），我想在其中突出顯示用戶輸入的單詞的所有實例。我的想法是，我可以使用替換功能與如何動態地突出顯示html文檔中的文本

<font class='highlight'>fox</font>

我的問題是，以取代說：「狐狸」的所有實例做到這一點，我如何才能讓這些元素識別？我嘗試使用類，但我公司的IE版本不支持getElementsByClassName。有誰知道更好的方法來做到這一點？

什麼我的網頁可能看起來像

<body> 
    <h1>All about foxes</h1> 
    <font>I'm a fox</font> 
</body>

只是爲了讓他們如何是不同類型的標籤點的一個例子。在這個例子中，如果用戶輸入了「狐狸」，h1標籤中的狐狸和字體標籤將被高亮顯示。很顯然，必須使用某些東西來標識h1和字體標籤，作爲我可以抓住所有成員的一些組的一部分。

因爲顯示在頁面上的內容也是動態確定的，所以我需要一種方法來使用Javascript來完成此操作。編號：除前面的代碼示例外。

<body> 
    <h1>All about foxes</h1> 
    <font>I'm a fox</font> 
    <h3>I'm not a fox</h3> 
</body>

我需要一種方法來專門紀念h1和字體標記（不是說所有的H1的和字體的應標明），以便它們將突出和H3不會（以及任何其他實例狐狸在頁面上）。另外，在我的環境中包含外部JS文件（或者任何外部文件）是一件痛苦的事情。出於這個原因，如果我不需要使用JQuery，我更喜歡它。

來源

2013-07-26 avorum

使用'regex'來查找文本。 –

你可以在jquery中使用$（'。class'）.css（）方法。 –

如果你已經有了在適當的地方class='highlight'，您可以使用下面的，這在功能上相當於getElementsByClassName：

elems = document.getElementsByTagName("*"); 
for (i=0; i<elems.length; i++) 
{ 
    if (elems[i].className == "highlight") 
    { elems[i].style.backgroundColor = "yellow"; } 
}

例子：http://jsfiddle.net/XU8Qz/

就做什麼風格的變化，你需要以代替將背景顏色設置爲黃色。

來源

2013-07-26 18:17:36 KatieK

如何動態地突出顯示html文檔中的文本

回答

相關問題