有用過 Google 庫存頁面的人應該會看到它會高亮顯示我們搜尋的關鍵字,其實這也只是找出文章中有關鍵字的部份,然後加上背景顏色。但一般開發者也許並沒有對 JavaScript 有研究,所以就有好心的網友基於highlight 3.0下寫了一個 jQuery.highlightRegex 的套件。只要指定要 highlight 的字串內容即可。
套件名稱:jQuery.highlightRegex
套件版本:N/A
作者網站:http://github.com/jbr/jQuery.highlightRegex
套件網址:http://plugins.jquery.com/project/highlightRegex
發佈日期:2009-07-04
檔案大小:1.56 KB
檔案下載:jquery.highlightRegex.js
參數說明:
檢視原始碼 JavaScript
1 2 3 | regex(選填) 描述: 若有提供則 highlight 指定的字串;沒提供則會清除 highlight 效果 預設值: 無 |
方法說明:
檢視原始碼 JavaScript
1 2 3 4 5 | // 清除 highlight 效果 $(selector).highlightRegex(); // highlight 指定的字串 $(selector).highlightRegex(regex); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.highlightRegex.js"></script> <style type="text/css"> /* .highlight 是必須的 */ .highlight { background: yellow; text-decoration: underline; } #news { padding: 5px; margin-bottom: 10px; border: 1px dotted #ccc; } label, input { font-size: 24px; } </style> <script type="text/javascript"> $(function(){ $("#reg").keyup(function(){ // 先清掉原本已經 highlight 的部份 $("#news").highlightRegex(); // 如果有輸入要 highlight 的內容則 highlight if($(this).val()){ $('#news').highlightRegex(new RegExp($(this).val(), 'ig')); } }); }); </script> <body> <div id="news"> 記得筆者曾經寫過一篇「用 JavaScript 來做偽浮水印」,那時是用 JavaScript 來寫的,得經過計算才能把版權宣告的圖片放在右下角。現在筆者把整個效果用 jQuery 來改寫,並把原本要計算的版權宣告圖片位置換成 background-position 的方式來控制,這樣想放那就只要設定一下就好了。 </div> <label for="reg">Highlight:/<input type="text" id="reg" />/ig</label> </body> |
我想請問一下,是關於此篇介紹的範例。
我在使用IE開啟時,只要輸入兩碼就出現了錯誤,這個錯誤是正常的嗎。
我使用的是IE6,輸入的關鍵字j (正常) 輸入jq(跳出IE.exploer錯誤強制關閉)
謝謝
我在 IE 6 試是不會有這樣的反應.
不過該外掛對於 IE 6 的支援並不好...