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 相关文章推荐
js调用后台servlet方法实例
Jun 09 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
vue中使用props传值的方法
May 08 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 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 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php实现的SESSION类
2014/12/02 PHP
10条php编程小技巧
2015/07/07 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
护士求职推荐信范文
2013/11/23 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
委托书格式要求
2015/01/28 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python