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 相关文章推荐
仿微博字符限制效果实现代码
Apr 20 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
chrome调试javascript详解
2015/10/21 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
募捐感谢信
2015/01/22 职场文书
现实表现证明材料
2015/06/19 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers