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 parseInt与Number函数的区别
Jan 21 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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+MySql编写聊天室
2006/10/09 PHP
php 301转向实现代码
2008/09/18 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
python使用opencv读取图片的实例
2017/08/17 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Python 加密与解密小结
2018/12/06 Python
对python函数签名的方法详解
2019/01/22 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Python callable内置函数原理解析
2020/03/05 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
后勤人员岗位职责
2013/12/17 职场文书
集体生日活动方案
2014/08/18 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
建国大业电影观后感
2015/06/01 职场文书
个人收入证明格式
2015/06/24 职场文书
文艺节目主持词
2015/07/06 职场文书
大学新生入学感想
2015/08/07 职场文书
保护环境建议书作文400字
2015/09/14 职场文书