介绍一个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. Unity协程(Coroutine)原理深入剖析

    Unity协程(Coroutine)原理深入剖析 By D.S.Qiu 尊重他人的劳动,支持原创,转载请注明出处:http.dsqiu.iteye.com 其实协程并没有那么复杂,网上很多地方都说是多 ...

  2. C++ #include .h extern 的相关关系及说明

    函数和变量都有声明和定义两个写法.声明的目的是告诉别的代码这个变量的名称,而定义比声明多了一个功能,除了告知名称以外,还会为这个变量分配内存.对于函数来说,加不加extern都没有关系,因为有函数体一 ...

  3. cef3 获得 谷歌浏览器 网页源码 哈哈

    Get HTML Source from Chromium Embedded http://stackoverflow.com/questions/13324095/get-html-source-f ...

  4. php protobuff 使用

    http://hi.baidu.com/sing520/item/a6e98a3545fe1ef2e6bb7ad0 php 不支持uint32 不支持空结构 不支持package

  5. Android 中的 WebView实现 Html5 标签网页加载

    自Android 4.4起,Android中的WebView开始基于Chromium(谷歌浏览器)支持浏览器的一系列功能,webkit解析网页各个节点,这个改变,使得WebView的性能大幅度提升,并 ...

  6. apache.http.client.HttpClient

    前言 HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 java net包中已经提 ...

  7. linux安装,window上安装centos虚拟机

    使用的软件如下 VMware_workstation_full_12.5.2.exeCentOS-6.5-x86_64-minimal.iso 安装要点: 1 先安装VMware2 建立一个虚拟机,注 ...

  8. 安装数据库出现错误vc_red.msi找不到

    用虚拟光驱安装数据的时候可能会出现,找不到vc_red.msi的问题,通过加载的虚拟光驱目录设置,可能 仍然后问题,比如程序停止运行. 解决方法是:解压iso文件,用解压后的文件安装.然后在解压文件夹 ...

  9. Java实现多线程的两种方式

    实现多线程的两种方式: 方式1: 继承Thread类 A: 自定义MyThread类继承Thread类 B: 在MyThread类中重写run() C: 创建MyThread类的对象 D: 启动线程对 ...

  10. Hadoop中HDFS的管理

    本文讲述怎么在Linux Shell中对HDFS进行操作. 三种命令格式: hadoop fs适用于任何不同的文件系统,比如本地文件系统和HDFS文件系统 hadoop dfs只能适用于HDFS文件系 ...