文章出處
文章列表
介紹一個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()需要將文本的內容作為字符串傳入,如果字符串中包含有一些特殊字符例如引號則有可能會導致腳本注入從而影響程序正常運行。考慮過濾特殊字符或者對該方法進行重構?
文章列表
全站熱搜