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 脚本将当地时间转换成其它时区
Mar 19 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php操作mongoDB实例分析
2014/12/29 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
解决VUE双向绑定失效的问题
2019/10/29 Javascript
vue实现图片上传功能
2020/05/28 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
python使用nntp读取新闻组内容的方法
2015/05/08 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
zooplus波兰:在线宠物店
2019/07/21 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
干部培训自我鉴定
2014/01/22 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
党支部承诺书范文
2014/03/28 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
硕士学位论文评语
2014/12/31 职场文书
债务纠纷代理词
2015/05/25 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript