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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
Vue动态实现评分效果
May 24 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 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文件上传简单实现方法
2015/01/24 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
python 自动提交和抓取网页
2009/07/13 Python
跟老齐学Python之集合的关系
2014/09/24 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Python列表(List)知识点总结
2019/02/18 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Django中信号signals的简单使用方法
2019/07/04 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
python下载的库包存放路径
2020/07/27 Python
给排水专业应届生求职信
2013/10/12 职场文书
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
赞助商致辞
2015/07/30 职场文书
如何在Python项目中引入日志
2021/05/31 Python
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android