JavaScript text highlighting JQuery plugin
介绍一个JQuery的插件,用来在页面上高亮显示匹配到的字符串。
Demo
点击下面的两个链接以查看效果:
点击Remove highlights移除高亮显示。
用法
Add highlight
下载jquery.highlight-4.js然后添加到页面上,注意前提是页面上已经添加了JQuery的引用。Closure Compiler compressed version (1KB)也可以用。
Style the highlight class
在CSS中添加你想要高亮显示的效果,如
.highlight { background-color: yellow; }
Highlight terms
使用JQuery选择器找到需要对应的元素,然后直接调用highlight函数,将需要匹配的文本作为字符串参数传入。如:
$('li').highlight('bla');
Remove highlighting
调用removeHighlight()可以移除高亮显示的效果。如:
$('#highlight-plugin').removeHighlight();
一个小问题:函数highlight()需要将文本的内容作为字符串传入,如果字符串中包含有一些特殊字符例如引号则有可能会导致脚本注入从而影响程序正常运行。考虑过滤特殊字符或者对该方法进行重构?
JavaScript text highlighting JQuery plugin的更多相关文章
- Native Fullscreen JavaScript API (plus jQuery plugin)
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is gre ...
- The ultimate jQuery Plugin List(终极jQuery插件列表)
下面的文章可能出自一位奥地利的作者, 列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archiv ...
- JQuery plugin ---- simplePagination.js API
CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...
- jQuery plugin: Autocomplete 参数及实例
官网:jQuery plugin: Autocomplete (注:此插件已经不再更新.它的继任者是jQuery UI的一部分,) 此插件依赖于 jquery 1.2.6 --- j ...
- jQuery plugin : jqTransform
Usage 1- Add javascript inclusion in the header section of your web page //required <script type= ...
- [jQuery] 自做 jQuery Plugin - Part 1
有時候寫 jQuery 時,常會發現一些簡單的效果可以重複利用.只是每次用 Copy & Paste 大法似乎不是件好事,有沒有什麼方法可以讓我們把這些效果用到其他地方呢? 沒錯,就是用 jQ ...
- 30款javascript脚本插件 jquery插件大全
Shifty Nav - a Fully Responsive JS CSS3 Mega Menu Show Demo Shifty Nav is a fully responsive CSS3 ...
- Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
- HTML5 Video player jQuery plugin
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8&qu ...
随机推荐
- python模块使用案例
python模块使用案例 一.使用MySQLdb模块代码示例: # 导入 MySQLdb模块 import MySQLdb # 和服务器建立链接,host是服务器ip,我的MySQL数据库搭建在本机, ...
- hdu 3667 拆边加最小费用流
Transportation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- RedHat下编译安装Boost
1.解压boost_1_54_0.tar.gz 2.进入目录后,运行 ./bootstrap.sh ,会生成一个 bjam 的可执行程序 3.运行 ./bjam release install 进行编 ...
- java 封装httpclient 的get 和post 请求
import java.io.ByteArrayOutputStream; import java.io.UnsupportedEncodingException; import java.util. ...
- 使用rownum对oracle分页
以Student表为例进行分页 建表及插入 -- 有表结构如下 create table STUDENT ( sno INTEGER, sname ), sage INTEGER ); -- 插入数据 ...
- python之优雅处理套接字错误
#!/usr/local/bin/python3.5 #coding:utf-8 import sys import socket import argparse def main(): #setup ...
- LoadRunner录制不弹出IE浏览器,event=0
系统环境:win7,安装了IE.360.firefox.搜狗高速浏览器: 起初刚装完loadrunner11的时候,选了IE进行录制,就是不能打开IE,算了,那就用loadrunner默认的设置,居然 ...
- C# 使用js正则表达式,让文本框只能输入数字和字母,最大长度5位
使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...
- Linux云服务器安装tomcat
安装tomcat需要安装JDK 1.上传 把下载好的tomcat压缩包(apache-tomcat-7.0.tar.gz)和jdk(jdk-7u76-linux-x64.tar.gz)压缩包上传到/u ...
- DNS主从TSIG加密传输
BIND服务程序为了能够安全的提供解析服务而支持了TSIG加密机制,TSIG主要是利用密码编码方式保护区域信息的传送(Zone Transfer),也就是说保证了DNS服务器之间传送区域信息的安全. ...