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 版本自动生成文章摘要
Jul 23 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
js实现滑动进度条效果
Aug 21 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
iview实现图片上传功能
2020/06/29 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Django开发中的日志输出的方法
2018/07/02 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python pandas时序处理相关功能详解
2019/07/03 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
Django实现内容缓存实例方法
2020/06/30 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
大学本科生职业生涯规划书范文
2014/09/14 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
迟到检讨书范文
2015/01/27 职场文书
升职自我推荐信范文
2015/03/25 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS