介绍一个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()需要将文本的内容作为字符串传入,如果字符串中包含有一些特殊字符例如引号则有可能会导致脚本注入从而影响程序正常运行。考虑过滤特殊字符或者对该方法进行重构?

原文地址:http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

JavaScript text highlighting JQuery plugin的更多相关文章

  1. Native Fullscreen JavaScript API (plus jQuery plugin)

    http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is gre ...

  2. The ultimate jQuery Plugin List(终极jQuery插件列表)

    下面的文章可能出自一位奥地利的作者,  列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archiv ...

  3. JQuery plugin ---- simplePagination.js API

    CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...

  4. jQuery plugin: Autocomplete 参数及实例

    官网:jQuery plugin: Autocomplete          (注:此插件已经不再更新.它的继任者是jQuery UI的一部分,) 此插件依赖于 jquery 1.2.6 --- j ...

  5. jQuery plugin : jqTransform

    Usage 1- Add javascript inclusion in the header section of your web page //required <script type= ...

  6. [jQuery] 自做 jQuery Plugin - Part 1

    有時候寫 jQuery 時,常會發現一些簡單的效果可以重複利用.只是每次用 Copy & Paste 大法似乎不是件好事,有沒有什麼方法可以讓我們把這些效果用到其他地方呢? 沒錯,就是用 jQ ...

  7. 30款javascript脚本插件 jquery插件大全

      Shifty Nav - a Fully Responsive JS CSS3 Mega Menu Show Demo Shifty Nav is a fully responsive CSS3 ...

  8. Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode

    Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...

  9. HTML5 Video player jQuery plugin

    <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8&qu ...

随机推荐

  1. VC++ AfxBeginThread 与 CreateThread 的区别

    简言之:AfxBeginThread是MFC的全局函数,是对CreateThread的封装.    CreateThread是Win32 API函数,前者最终要调到后者.具体说来,CreateThre ...

  2. 基于WebView的混合编程

    近日公司需求变更,以前一个页面是后台返回HTML字段,然后我们直接用webView接收,现在新增一个页面,数据后台返回非HTML,页面跟前面一直,所幸自己会点HTML,所以偷了个懒,自己用代码把数据组 ...

  3. 关于git新建本地分支与远程分支关联问题

    背景 新建本地分支并推送到远端后,当前分支没有与远端分支关联,每次推送都需要填写一堆信息. 操作 git branch --set-upstream-to=origin/20160928 切换到本地分 ...

  4. 最长子串 FZU2118

    http://acm.fzu.edu.cn/problem.php?pid=2128 分析:利用strstr()函数将每个字串在原串中的首尾位置存储一下,再将首尾从小到大排一下序.(写着写着就感觉和看 ...

  5. oracle 驱动安装备忘

    ubuntu 从oracle官网下载两个必须的rpm包(这里选择的是version12.1.0.2.0, 64位操作系统) oracle-instantclient12.1-basic-12.1.0. ...

  6. Java集合类之ArrayList

    学习Java的集合类 (1)成员变量以及初始化 private static final int DEFAULT_CAPACITY = 10; private static final Object[ ...

  7. perl 对源文件内容修改 方法整理

    1, 利用Tie::File模块来直接对文件内容进行修改. #!/usr/bin/perl -w my $std="F160"; my $fast="FAST" ...

  8. 【java】:通用接口

    电商接口 京东获取单个商品价格接口: http://p.3.cn/prices/mgets?skuIds=J_商品ID&type=1 用例 ps:商品ID这么获取:http://item.jd ...

  9. 5、清理mac缓存和关闭后台运行程序

    一.清理mac 缓存  1.用鼠标点击桌面,然后按快捷键Command+Shift+G前往文件夹 2.输入路径:~/Library/Caches/ 3.清除所有的数据,把所有的Caches文件夹得都行 ...

  10. JS 插件使用

    1.时间控件的使用 My97DatePicker WdatePicker({ minDate: '%y-%M-{%d}'}) 默认当前日期以后 LoanMessage.LoanAppAgentMode ...