文章出處

  介紹一個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


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()