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 相关文章推荐
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
JS实现放大镜效果
2020/09/21 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
Python生成数字图片代码分享
2017/10/31 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python列表切片操作实例总结
2019/02/19 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
告诉你怎样写创业计划书
2014/01/27 职场文书
班级活动策划书
2014/02/06 职场文书
美容院员工规章制度
2015/08/05 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
PHP中多字节字符串操作实例详解
2021/08/23 PHP