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 confirm选择判断
Oct 18 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
Javascript Web Worker使用过程解析
Mar 16 Javascript
vue移动端的左右滑动事件详解
Jun 17 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
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
JS实现放烟花效果
2020/03/10 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
安全员岗位职责
2013/11/11 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
师德师风个人反思
2014/04/28 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
redis lua限流算法实现示例
2022/07/15 Redis