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 相关文章推荐
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
完美的js图片轮换效果
Feb 05 Javascript
js评分组件使用详解
Jun 06 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 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
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
js继承的这6种方式!(上)
2019/04/23 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
洗手间标语
2014/06/23 职场文书
客户答谢会活动方案
2014/08/31 职场文书
同学毕业留言寄语
2015/02/27 职场文书
公司行政管理制度范本
2015/08/05 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS