Home » jQuery 外掛

[jQ]jQuery.highlightRegex

範例 1
沒錯!只要 900 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

jquery_highlightregex

有用過 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>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

2 筆針對 [jQ]jQuery.highlightRegex 的迴響

  1. 我想請問一下,是關於此篇介紹的範例。

    我在使用IE開啟時,只要輸入兩碼就出現了錯誤,這個錯誤是正常的嗎。

    我使用的是IE6,輸入的關鍵字j (正常) 輸入jq(跳出IE.exploer錯誤強制關閉)

    謝謝

發表迴響