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>
復制代碼 代碼如下:
<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 自動標記來自搜索結(jié)果頁的關(guān)鍵字
- JS實現(xiàn)百度搜索框關(guān)鍵字推薦
相關(guān)文章
jQuery移除tr無效的解決方法(tr是動態(tài)添加)
移除掉某些tr(tr是動態(tài)添加的)嘗試了很多方法,都不見效,后來發(fā)現(xiàn)個不錯的方法,于是與大家分享下2014-09-09鋒利的jQuery 要點歸納(二) jQuery中的DOM操作(下)
鋒利的jQuery 要點歸納(二) jQuery中的DOM操作(下)2010-03-03jQuery與javascript對照學習 獲取父子前后元素 實現(xiàn)代碼
jQuery與javascript對照學習(獲取父子前后元素) ,需要的朋友可以參考下,看看與js有什么不同。2009-10-10jQuery中[attribute*=value]選擇器用法實例
這篇文章主要介紹了jQuery中[attribute*=value]選擇器用法,實例分析了[attribute*=value]選擇器的功能、定義及匹配給定的屬性包含某些值的元素的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12jQuery插件Zclip實現(xiàn)完美兼容個瀏覽器點擊復制內(nèi)容到剪貼板
本文將結(jié)合實例講解如何使用一款基于jQuery的插件——Zclip來實現(xiàn)復制內(nèi)容到剪貼板的功能。其實IE上有個方法可以實現(xiàn)點擊復制,但是由于只是IE獨有,所以我們不提倡。而Zclip是利用一個隱藏的flash文件來完成復制的功能,關(guān)鍵是它兼容當前各主流瀏覽器。2015-04-04jQuery實現(xiàn)簡單網(wǎng)頁遮罩層/彈出層效果兼容IE6、IE7
自寫寫的一個jQuery插件,可以實現(xiàn)簡單網(wǎng)頁遮罩層/彈出層功能,并且兼容IE6、IE7,需要的朋友可以參考下2014-06-06jQuery實現(xiàn)固定在網(wǎng)頁頂部的菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)固定在網(wǎng)頁頂部的菜單效果,通過jquery頁面scroll事件及邊距計算實現(xiàn)網(wǎng)頁的菜單固定效果,非常簡單實用,需要的朋友可以參考下2015-09-09