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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
基于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返回json数据函数实例
2014/10/09 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
python中readline判断文件读取结束的方法
2014/11/08 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
python中range()与xrange()用法分析
2016/09/21 Python
浅谈五大Python Web框架
2017/03/20 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python 加密的实例详解
2017/10/09 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
python中def是做什么的
2020/06/10 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
python3中编码获取网页的实例方法
2020/11/16 Python
高等教育学自荐书范文
2014/02/10 职场文书
五一劳动节活动记录
2014/03/23 职场文书
党员承诺书怎么写
2014/05/20 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js