們在瀏覽網(wǎng)頁時，輸入網(wǎng)址或點擊書簽，當(dāng)頁面加載完成后，不得已用雙眼從上到下掃描網(wǎng)頁內(nèi)容，查找網(wǎng)頁是否存在自己關(guān)注的內(nèi)容，就是眼睛有點累。

如果瀏覽器能自動標注頁面關(guān)鍵詞高亮顯示，提示關(guān)鍵詞所在位置，減少肉眼掃描范圍，輔助瀏覽頁面。如下圖所示：
在瀏覽器書簽欄中，有一個【高亮關(guān)鍵詞】按鈕，鼠標點擊一下即顯示接下狀態(tài)，瀏覽器會自動查找當(dāng)前頁面上的關(guān)鍵詞，并使用紅色加粗字體黃色背景高亮顯示，若再打開其它網(wǎng)頁或點擊鏈接打開新網(wǎng)頁，在新頁面中無需任何操作即高亮標注關(guān)鍵詞。

為實現(xiàn)上述效果，具體設(shè)置步驟如下：
1、運行木頭瀏覽器，從【自動控制】菜單打開【項目管理器】，項目管理器已新建好一個默認項目，鼠標雙擊【項目簡介】小標題，把名字改為“高亮顯示關(guān)鍵詞”。在下面的輸入框里輸入需要標注的關(guān)鍵詞，如有多個關(guān)鍵詞以逗號隔開。

2、新建一個定時控制器，設(shè)置每秒執(zhí)行一次。即每秒檢測一次頁面，發(fā)現(xiàn)關(guān)鍵詞即高亮標注。為什么要每秒檢測一次呢？而不是頁面打開后標注一次就可以了？這里主要考慮到很多響應(yīng)式頁面和ajax加載的頁面內(nèi)容，能往里完成關(guān)鍵詞高亮標注。

3、怎樣高亮標注網(wǎng)頁上的關(guān)鍵詞，這是最關(guān)鍵的一步，通過執(zhí)行JavaScript腳本代碼，通過正則表達式把關(guān)鍵詞替換成高亮顯示的span元素，注意在替換時需排除已替換過的關(guān)鍵詞。

具體代碼如下：

1. var head="<span style='background-color: yellow;color: red;font-weight: 900;'><b>";
2. var end="</b></span>";
3. var bstr=document.body.innerHTML;
4. var keystr0="{1、默認項目_Brief}";//從木頭瀏覽器項目簡介中取關(guān)鍵詞字符串
5. keystr0=keystr0.replace(/，/g,",");//全角逗號替換為半角
6. var keys0=keystr0.split(',');//字符串轉(zhuǎn)數(shù)組
7. 
   
8. var cstr=bstr;
9. for(var i=0;i<keys0.length;i++)
10. {
11. var key=keys0[i];
12. var val=head+key+end;//組成高亮元素
13. //替換關(guān)鍵詞（排除已被替換的詞）
14. cstr=cstr.replace(new RegExp(key+"(?!</b></span>)",'g'),val);
15. }
16. //替換元素后內(nèi)容變長，在木頭瀏覽器里更新網(wǎng)頁顯示內(nèi)容
17. if(cstr.length>bstr.length)
18. document.body.innerHTML=cstr;

最后保存項目文件，再執(zhí)行項目就可以高亮標注頁面上的關(guān)鍵詞了。

家好，今天給大家介紹一款，JavaScript+css實現(xiàn)的喜慶活動邀請函多頁面html源碼（圖1）。送給大家哦，獲取方式在本文末尾。

模板制作精良美觀，主題非常喜慶，慢慢向下滑動，可以看到，包含活動信息、時間地點、公司二維碼、地圖等，自適應(yīng)分辨率，適用于各種移動設(shè)備（圖2）

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）。

本源碼編碼：10183，需要的朋友，訪問[92ui點net]，搜索10183，即可獲取。