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>

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>

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 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