介绍一个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. javascript中的innerHTML是什么意思,怎么个用法?

    innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容:如:<div id="aa">这是内容</div> ,我们可以通过 document ...

  2. 解决Ubuntu下 Could NOT find CURL (missing: CURL_LIBRARY CURL_INCLUDE_DIR)

    Ubuntu下CMake 编译时出现问题:Could NOT find CURL (missing: CURL_LIBRARY CURL_INCLUDE_DIR) 查找发现  # sudo apt-g ...

  3. sqlserver 分区表

    我们知道很多事情都存在一个分治的思想,同样的道理我们也可以用到数据表上,当一个表很大很大的时候,我们就会想到将表拆 分成很多小表,查询的时候就到各个小表去查,最后进行汇总返回给调用方来加速我们的查询速 ...

  4. XML的Pull解析

    //通过xml解析串    private void XMLtoStr(String result) {        News news=null;        try {             ...

  5. 剑指offer题目41-50

    面试题41:和为S的连续正整数序列 import java.util.ArrayList; public class Solution { public ArrayList<ArrayList& ...

  6. 第二章 第二个spring-boot程序(转载)

    本编博客转发自:http://www.cnblogs.com/java-zhao/p/5336369.html 上一节的代码是spring-boot的入门程序,也是官方文档上的一个程序.这一节会引入s ...

  7. 重写,重载,super,this,继承

    重写:overwrite/override 子类根据需要对从基类继承来的方法进行重写. 重写方法必须与被重写方法有相同的方法名,参数列表和返回类型. 重写方法不能使用比被重写方法更严格的访问权限. 重 ...

  8. web form 复合控件

    DropDownList 下拉列表 会被编译为select option ps.name 服务端常用,id 客户端常用 一般用法: 一.将数据放进去 方法一:同WinForm相同,给定数据源,然后绑定 ...

  9. 解决Android中多次点击启动多个相同界面的问题

    在Android开发过程中我们经常会碰到这样的问题,当用户点击一个View启动一个新的Activity的时候,如果快速地多次点击就会启动多个相同的界面.虽然说很少会有用户这么玩自己的手机,但是一旦出现 ...

  10. 【洛谷P3258】松鼠的新家

    很好的一道题 LCA+树上前缀和 sum数组是前缀和数组, 分类讨论一下, 1.访问到一个点p1,若下一个点p2需要往儿子下面找的话,那么lca就是这个点p1,则sum[p1]--; sum[p2]+ ...