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 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
基于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
深入PHP magic quotes的详解
2013/06/17 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
js实现在字符串中提取数字
2013/11/05 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
python实现弹窗祝福效果
2019/04/07 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
人事主管的岗位职责
2013/11/16 职场文书
往来会计岗位职责
2013/12/19 职场文书
库房主管岗位职责
2013/12/31 职场文书
社区工作者思想汇报
2014/01/13 职场文书
心理咨询承诺书
2014/05/20 职场文书
应届生自荐书
2014/06/23 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
宣传部部长竞选稿
2015/11/21 职场文书