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