JQuery+JS实现仿百度搜索结果中关键字变色效果


Posted in Javascript onAugust 02, 2011

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>
Javascript 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
用jscript实现新建和保存一个word文档
Jun 15 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
基于jquery实现漂亮的动态信息提示效果
Aug 02 #Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 #Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 #Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 #Javascript
js禁止小键盘输入数字功能代码
Aug 01 #Javascript
js内置对象 学习笔记
Aug 01 #Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 #Javascript
You might like
星际RPG字典
2020/03/04 星际争霸
destoon整合UCenter图文教程
2014/06/21 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP排序算法类实例
2015/06/17 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python生成器与迭代器详解
2019/01/01 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
python实现人像动漫化的示例代码
2020/05/17 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
《三袋麦子》教学反思
2014/03/02 职场文书
结婚保证书范文
2014/04/29 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
项目合作意向书模板
2014/07/29 职场文书
学校运动会报道稿
2014/09/23 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
优秀教师单行材料
2014/12/16 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android