介绍一个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. LESS与SASS的伯与仲

    工作中用到了Bootstrap,涉及到了LESS,对其做了一个简单的了解,CSS的预处理器使用最广泛的就是LESS和Sass,都是努力把CSS武装成为开发语言,让它从简单的描述性语言过渡到具有程序式特 ...

  2. mysql分区查询

    SELECT *FROM INFORMATION_SCHEMA.partitions WHERE table_name='表名' and table_schema='数据库名'

  3. 解决VMware“该虚拟机似乎正在使用中”问题

    http://jingyan.baidu.com/article/4ae03de3fa2ae93eff9e6bb0.html

  4. 如何实现能像windows 窗体一样改变大小的控件 Silverlight

    众所周知,我们可以将鼠标放在windows窗体的边框上,按住鼠标左键改变窗体大小.那么,在silverlight上如何实现呢? 1. 需要将改控件放置在canvas上. 2. 判断鼠标位置,然后将Ar ...

  5. CommonUtils

    package com.utils; import java.lang.reflect.Field; import java.math.BigDecimal; import java.sql.Time ...

  6. Blob(二进制)、byte[]、long、date之间的类型转换

    String转成byte[]类型存入数据库,数据库字段对应byte[]的类型为Blob类型 String value = this.getParamNotNnll("bgvalue" ...

  7. hdu 2669 Romantic (乘法逆元)

    Romantic Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  8. python之优雅处理套接字错误

    #!/usr/local/bin/python3.5 #coding:utf-8 import sys import socket import argparse def main(): #setup ...

  9. 第三章 springboot + jedisCluster

    如果使用的是redis2.x,在项目中使用客户端分片(Shard)机制.(具体使用方式:第九章 企业项目开发--分布式缓存Redis(1)  第十章 企业项目开发--分布式缓存Redis(2)) 如果 ...

  10. 咏南中间件+开发框架支持最新的DELPHI XE10.1(BERLIN) UPDATE1

    咏南中间件+开发框架支持最新的DELPHI XE10.1(BERLIN) UPDATE1 购买提供:中间件源码,价格十分优惠!有意者请向本人索取演示程序! 附带福利(赠送): CS开发框架源码BS开发 ...