addoil,seo hk

Examplets.org

jQuery Examplets and Examples

Select the following Topics you are interested

  1. Caret Plugin
  2. Format Plugin
  3. Table AddRow Plugin
  4. Truncator Plugin
  5. TrapKey Plugin
  6. Regular Expression plugin / Selector (regex)
  7. Output Plugin
  8. Loader Plugin
  9. Matt Glass Plugin
  10. Lens Plugin
  11. ClippedImage Plugin
  12. DefaultText Plugin
  13. Simple Tree-node
  14. Simple Tree-set
  15. Simple zoomGlass

Demonstration for the "Regular Expression Selector" and "Regular Expression Plugin" :regex and regex()

jQuery :regex and regex()

2011/01/21, the first example has been updated as recommended by Brian Jones. Thanks, Brian!

On 2009/09/21, I have enhanced the functionality of jQuery "Regular Expression Selector" and I have rewritten these functionality into a jQuery plugin,too.

With the aid of the "Regular Expression Selector", we can now select the content (or attributes) of any tag (or tags) by providing the pattern in the regular expression.

Latest Update

1. accept selectors with regular expression construct and flags (igm), e.g: /\d+/g, /[aeiou]/ig, etc.

2. accept selectors with attribute name in the format: [attr,regex]

3. add regex() plugin

4. The pattern is set as "case insensitive" by default.

5. the selector no longer belongs to the jquery format plugin

 

Usage

Similar to a normal selector (such as :first, :last, :text, etc.), use the command ":regex()" and place your regular expression between brackets.

 

Example 1

The followings are source code for the html tags:

<div id="test">
<span name="ex-number3digit" style="background:#F99">192</span>
<input name="ex-floatnumber" value="-3.14"/>
<span name="ex-words" style="background:#9F9">This is a sentence in English.</span>
</div>
192This is a sentence in English.

 

1. Selecting the name attribute of tags with numbers only

<script type="text/javascript">
$("#selectNumber").click(function(){
	$("#test span:regex(^\\d+$)").each(function(){alert($(this).attr("name"));});
})
</script>

 

2. Selecting the name attribute of tags with all number format

<script type="text/javascript">
$("#selectAllNumber").click(function(){
	$("#test *:regex(^\\-?(\\d+|\\d+\\.\\d+)$)").each(function(){alert($(this).attr("name"));});
})
</script>

 

3. Selecting the name attribute of tags of a sentence

<script type="text/javascript">
$("#EnglighOnly").click(function(){
	$("#test *:regex(^[A-Za-z\\s\\.]+$)").each(function(){alert($(this).attr("name"));});
})
</script>

Example 2

The followings are source code for the html tags:

<style>
.negative{
	color:#F00;
}
</style>
<table border="1" class="bal">
<tr><td>Period</td><td>Balance</td></tr>
<tr><td>Jan</td><td>1,000.00</td></tr>
<tr><td>Feb</td><td>-50.00</tr>
<tr><td>March</td><td>-300.00</td></tr>
<tr><td>April</td><td>1,200.00</td></tr>
</table>
PeriodBalance
Jan1,000.00
Feb-50.00
March-300.00
April1,200.00

1. highlight the negative figure:

<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$(".hightlight-negative").toggle(function(){
			$(".bal *:regex(^\\-(\\d+|\\d+\\.\\d+)$)").addClass("negative");
		},function(){
			$(".bal *:regex(^\\-(\\d+|\\d+\\.\\d+)$)").removeClass("negative");
		});
	});
})(jQuery);
</script>	

Example 3

The followings are source code for the html tags:

<div id="ex3">
<span>The</span> <span>brown</span> <span>foxy</span> <span>fox</span> <span>is</span> 
<span>jumping</span> <span>over</span> <span>the</span> 
<span>brown</span> <span>tree</span><br />
Enter a word for highlight:input type="text" size="30" value="fox"/><br/>
</div>
The brown foxy fox is jumping over the brown tree
Enter a word for highlight (case insensitive):

The source code for this example:

<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("#ex3 input").keyup(function(){
			$("#ex3 span").css("background","#FFF");
			if(this.value!="") $("#ex3 span:regex(^"+this.value+")").css("background","#FF0");
		});
		$("#ex3 span:regex(^fox)").css("background","#FF0");
	});
})(jQuery);
</script>

Example 4

Set the color of textbox with name containing hypen

<div><input type="text" name="choose-me" value="choose-me"/>
<input type="text" name="giveup" value="giveup"/></div>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("#hypen").toggle(function(){
			$("div input:regex([name,/\-/g])").css({color:"red"});
		},function(){
			$("div input:regex([name,/\-/g])").css({color:"black"});
		});
	});
})(jQuery);
</script>

Example 5

Set the color of textbox with name containing "you"

<div><input type="text" name="click-me" value="click-me"/>
<input type="text" name="click-you" value="click-you"/></div>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("#clickYou").toggle(function(){
			$("div input").regex("name","you").css({background:"#FFC"});
		},function(){
			$("div input").regex("name","you").css({background:"#FFF"});
		});
	});
})(jQuery);
</script>

 

jQuery Plugin Source Code

The following is the source code of the jQuery Plugin.

<script type="text/javascript">
// updated on 2009/09/21 by Cloudgen
// 1. accept selectors with regular expression construct and flags (igm), e.g: /\d+/g, /[aeiou]/ig, etc.
// 2. accept selectors with attribute name in the format: [attr,regex]
// 3. add regex() plugin
(function($){
	function regex(d,a,c){
		var k=new RegExp("\/(.(?!\/))*.\/[gim]*"),
		m=new RegExp(/\[([^\,]+)\,([^\]]+)\]/),
		f=c[3],e,b;
		if (m.test(f)){
			f=f.replace(m,function(s,s1,s2){b=d.getAttribute(s1);return s2})
		} else {
			b=("text"===d.type)?d.value:d.innerHTML;
		}
		e=(k.test(f))? eval("("+f+")") : new RegExp(f,"ig");
		return(b=="")?true:(e.exec(b))
	}
	$.extend($.expr[":"],{
		regex:function(d,a,c){
			return regex(d,a,c);
		}
	});
	$.fn.regex=function(s1,s2){
		var ret=[];
		this.each(function(i,v){
			var e,b;
			if(typeof s2==="undefined"){
				if(Object.prototype.toString.call(s1)==="[object RegExp]")
					e=new RegExp(s1);
				else
					e=new RegExp(s1,"ig");
				b=(typeof this.value!="undefined")?this.value:this.innerHTML;
			} else {
				if (typeof s1==="string"){
					if(Object.prototype.toString.call(s2)==="[object RegExp]")
						e=new RegExp(s2);
					else
					e=new RegExp(s2,"ig");
					b=this.getAttribute(s1);
				}
			}
			if (b!="" && e.test(b)) {
				ret.push(this);
			}
		});
		return this.pushStack(ret);
	};
})(jQuery);
</script>

Download the plugin

Click the link for downloading the plugin.

Copyright and licensing

All the plugin source codes and the examples are copyright of Cloudgen Wong
Please feel free to use any code listed in this page, they are licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php

6502 MPU and assembly


Latest Blog Articles from CloudGen wordpress blog!


Copyright 2008-2017

SEO HERO