JQuery+JS實現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果
更新時間：2011年08月02日 23:15:58 作者：
JQuery+JS實現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果代碼，需要的朋友可以參考下。
1.源碼
<script type="text/javascript">
$(function() {
$("#btn_1").click(function() {
var $keyword = $("#Text1").val()
setHeightKeyWord('bbb', $keyword, 'Red', true)
});
});
function setHeightKeyWord(id, keyword, color, bold) {
if (keyword == "")
return;
var tempHTML = $("#" + id).html();
var htmlReg = new RegExp("\<.*?\>", "i");
var arrA = new Array();
for (var i = 0; true; i++) {
var m = htmlReg.exec(tempHTML);
if (m) {
arrA[i] = m;
}
else {
break;
}
tempHTML = tempHTML.replace(m, "[[[[" + i + "]]]]");
}
var replaceText
if (bold)
replaceText = "<b style='color:" + color + ";'>$1</b>";
else
replaceText = "<font style='color:" + color + ";'>$1</font>";
var arrayWord = keyword.split(',');
for (var w = 0; w < arrayWord.length; w++) {
var r = new RegExp("(" + arrayWord[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
tempHTML = tempHTML.replace(r, replaceText);
}
for (var i = 0; i < arrA.length; i++) {
tempHTML = tempHTML.replace("[[[[" + i + "]]]]", arrA[i]);
}
$("#" + id).html(tempHTML);
}
</script>
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function() {
$("#btn_1").click(function() {
var $keyword = $("#Text1").val()
setHeightKeyWord('bbb', $keyword, 'Red', true)
});
});
function setHeightKeyWord(id, keyword, color, bold) {
if (keyword == "")
return;
var tempHTML = $("#" + id).html();
var htmlReg = new RegExp("\<.*?\>", "i");
var arrA = new Array();
for (var i = 0; true; i++) {
var m = htmlReg.exec(tempHTML);
if (m) {
arrA[i] = m;
}
else {
break;
}
tempHTML = tempHTML.replace(m, "[[[[" + i + "]]]]");
}
var replaceText
if (bold)
replaceText = "<b style='color:" + color + ";'>$1</b>";
else
replaceText = "<font style='color:" + color + ";'>$1</font>";
var arrayWord = keyword.split(',');
for (var w = 0; w < arrayWord.length; w++) {
var r = new RegExp("(" + arrayWord[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
tempHTML = tempHTML.replace(r, replaceText);
}
for (var i = 0; i < arrA.length; i++) {
tempHTML = tempHTML.replace("[[[[" + i + "]]]]", arrA[i]);
}
$("#" + id).html(tempHTML);
}
</script>
您可能感興趣的文章:
- JavaScript簡單實現(xiàn)關(guān)鍵字文本搜索高亮顯示功能示例
- javascript、php關(guān)鍵字搜索函數(shù)的使用方法
- JavaScript正則方法replace實現(xiàn)搜索關(guān)鍵字高亮顯示
- angularjs實現(xiàn)搜索的關(guān)鍵字在正文中高亮出來
- Angularjs實現(xiàn)搜索關(guān)鍵字高亮顯示效果
- js實現(xiàn)搜索框關(guān)鍵字智能匹配代碼
- JS實現(xiàn)關(guān)鍵字搜索時的相關(guān)下拉字段效果
- 用JS將搜索的關(guān)鍵字高亮顯示實現(xiàn)代碼
- javascript 自動標(biāo)記來自搜索結(jié)果頁的關(guān)鍵字
- JS實現(xiàn)百度搜索框關(guān)鍵字推薦
相關(guān)文章
用jQuery實現(xiàn)的模仿a的title屬性的例子，在測試的時候ie6,7上出現(xiàn)了層次混亂，不過最終解決了,代碼書寫很詳細(xì)，感興趣的朋友可以了解下哦2013-01-01
這篇文章主要介紹了jQuery簡單倒計時效果,結(jié)合完整實例形式分析了jQuery針對日期與時間的計算與頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
jQuery實現(xiàn)多張圖片上傳預(yù)覽（不經(jīng)過后端處理）
本篇文章主要介紹了jQuery實現(xiàn)多張圖片上傳預(yù)覽（不經(jīng)過后端處理）的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
由于項目原因，需要實現(xiàn) 點擊按鈕后，顯示友好的 loading 信息，并且為模態(tài)的。2010-08-08
這篇文章主要介紹了jquery插件實現(xiàn)堆疊式菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
ajax更新數(shù)據(jù)后，jquery、jq失效問題
這問題遇到兩次，竟然忘記了。所以說不要關(guān)抄人家的方法，要多研究下。現(xiàn)在做個記錄...2011-03-03
jQuery實現(xiàn)checkbox即點即改批量刪除及中間遇到的坑
這篇文章主要介紹了jQuery實現(xiàn)checkbox即點即改批量刪除及中間遇到的坑,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-11-11
jQuery實現(xiàn)數(shù)秒后自動提交form的方法
這篇文章主要介紹了jQuery實現(xiàn)數(shù)秒后自動提交form的方法,實例分析了jQuery實現(xiàn)form表單延時提交的技巧,需要的朋友可以參考下2015-03-03
jQuery實現(xiàn)簡單的下拉菜單導(dǎo)航功能示例
這篇文章主要介紹了jQuery實現(xiàn)簡單的下拉菜單導(dǎo)航功能,涉及jQuery針對頁面元素的遍歷與節(jié)點修改相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
jQuery Autocomplete簡介_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了jQuery Autocomplete簡介，jQuery UI Autocomplete是jQuery UI的自動完成組件，是我用過的最強大、最靈活的Autocomplete，它支持本地的Array/JSON數(shù)組、通過ajax請求的Array/JSON數(shù)組、JSONP、以及Function(最靈活)等方式來獲取數(shù)據(jù)2017-07-07