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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
php二维码生成以及下载实现
2017/09/28 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
json简单介绍
2008/06/10 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
高效使用Python字典的清单
2018/04/04 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Django中create和save方法的不同
2019/08/13 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python装饰器结合递归原理解析
2020/07/02 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
华为的Java面试题
2014/03/07 面试题
运动会广播稿200米
2014/01/27 职场文书
党建工作先进材料
2014/05/02 职场文书
县级文明单位申报材料
2014/05/23 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
学习计划书怎么写
2014/09/15 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
全网非常详细的pytest配置文件
2022/07/15 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS