javascript網(wǎng)頁(yè)關(guān)鍵字高亮代碼
更新時(shí)間:2008年07月30日 23:41:16 作者:
非常不錯(cuò)的關(guān)鍵字高亮代碼,用js實(shí)現(xiàn),這個(gè)方法不錯(cuò)
//高亮網(wǎng)頁(yè)關(guān)鍵字的javascript代碼
var keys = [
["腳本",http://m.fzitv.net,"#ff0000"],
["小說(shuō)",http://www.kanshule.com,"#00ff00"],
["念經(jīng)","http://www.baidu.com","#0000ff"],
["工會(huì)","http://www.baidu.com","#cc6600"]
]
var bookmark;
if(document.createRange){
var range = document.createRange();
}else{
var range = document.body.createTextRange();
bookmark = range.getBookmark();
}
var key;
for(var i = 0;key = keys[i];i++){
if(range.findText){
range.collapse(true);
range.moveToBookmark(bookmark);
while(range.findText(key[0])){
range.pasteHTML(range.text.fontcolor(key[2]));
}
}else{
var s,n;
s = window.getSelection();
s.collapse(document.body,0);
while(window.find(key[0])){
var n = document.createElement("SPAN");
n.style.color=key[2];
s.getRangeAt(0).surroundContents(n);
}
}
}
var keys = [
["腳本",http://m.fzitv.net,"#ff0000"],
["小說(shuō)",http://www.kanshule.com,"#00ff00"],
["念經(jīng)","http://www.baidu.com","#0000ff"],
["工會(huì)","http://www.baidu.com","#cc6600"]
]
var bookmark;
if(document.createRange){
var range = document.createRange();
}else{
var range = document.body.createTextRange();
bookmark = range.getBookmark();
}
var key;
for(var i = 0;key = keys[i];i++){
if(range.findText){
range.collapse(true);
range.moveToBookmark(bookmark);
while(range.findText(key[0])){
range.pasteHTML(range.text.fontcolor(key[2]));
}
}else{
var s,n;
s = window.getSelection();
s.collapse(document.body,0);
while(window.find(key[0])){
var n = document.createElement("SPAN");
n.style.color=key[2];
s.getRangeAt(0).surroundContents(n);
}
}
}
您可能感興趣的文章:
- 用JS將搜索的關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
- JavaScript正則方法replace實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示
- Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示效果
- angularjs實(shí)現(xiàn)搜索的關(guān)鍵字在正文中高亮出來(lái)
- javascript 關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
- js 關(guān)鍵詞高亮(根據(jù)ID/tag高亮關(guān)鍵字)案例介紹
- JavaScript實(shí)現(xiàn)關(guān)鍵字高亮功能
- JavaScript簡(jiǎn)單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能示例
相關(guān)文章
如何判斷出一個(gè)js對(duì)象是否一個(gè)dom對(duì)象
如何判斷出一個(gè)js對(duì)象是否一個(gè)dom對(duì)象呢?下面小編就為大家?guī)?lái)一篇判斷出一個(gè)js對(duì)象是否一個(gè)dom對(duì)象的方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
JavaScript中的構(gòu)造函數(shù)和實(shí)例對(duì)象之間的關(guān)系(構(gòu)造器)
這篇文章主要介紹了JavaScript中的構(gòu)造函數(shù)和實(shí)例對(duì)象之間的關(guān)系(構(gòu)造器),需要的朋友可以參考下2023-05-05
JavaScript時(shí)間格式化函數(shù)功能及使用示例
這篇文章主要為大家介紹了JavaScript時(shí)間格式化函數(shù)功能及使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
javascript點(diǎn)擊才出現(xiàn)驗(yàn)證碼
用javascript[js]實(shí)現(xiàn)的必須經(jīng)過(guò)點(diǎn)擊才能出現(xiàn)嚴(yán)重碼效果代碼2008-04-04
相冊(cè)展示PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了相冊(cè)展示PhotoSwipe.js插件實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
echarts拖拽滑塊dataZoom-slider自定義樣式簡(jiǎn)單適配移動(dòng)端
在電腦端和移動(dòng)端的數(shù)據(jù)展示中,針對(duì)移動(dòng)端的特殊性,進(jìn)行了一系列優(yōu)化措施,這篇文章主要介紹了echarts拖拽滑塊dataZoom-slider自定義樣式簡(jiǎn)單適配移動(dòng)端的相關(guān)資料,需要的朋友可以參考下2024-09-09

