JS Regular Express 备忘录

伊苏

浏览: 111304 次
性别:
来自: 深圳

最近访客更多访客>>

liuqu11

xphoenix

rubskin

shanmeimeia

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

正则表达式 D语言脚本

我一向不喜欢脚本语言, 因为其是弱语言类型, 成天有些让人异想不到的错误,
你很可能花了2, 3小时来调试, 其结果却可能是你在数组initial时, 在最后一个element后多添加了一个comma.
但JS的正则表达式, 却是我少数由衷喜爱的东西,
首先它是解释语言, 灵活修改调试, 但执行效果却比编译语言还要来得优秀,
相比Java后来也加上了RegExp, 但还是没JS的来得好用

网上有许许多多的RegExp在线validate工具, 最近为了更好的了解RegExp, 又懒得上网到处找, 就自己随手编了一个, 这样也能巩固知识

嘿嘿, 好家伙, 直接用HTML代码了, 没有后台, 没有编译, 即插即用(代码在最下面)

要说这家伙为什么惹人喜爱, 是因为它太能干了
总结了一下我最喜欢用功能:

客户端字符串检验
什么邮编啊, 电话啊, email啊, 日期格式啊
一条regexp就搞掂了, 网上一搜也是一大把的
为了方便日后自己查看, 写几条自己常用的

日期和时间:
/\d{4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}/, 2011-2-22 19:34:00
嘿嘿, 很强大的检验, 几乎可以一字不差的匹配

抽取出我想要的数组
1415446-BLNKCT01, 1415447-TTSRHT01, 1415448-WRAPCT06
抽出1415446-8这3个数
\d{7}

抽出1415446-8这3个数, 并且和BLNKCT01这3种类型
/(\d{7})-([a-zA-z]{6}\d{2})/g
这个有点意思, 要用exec, 并且要设置全局函数
array: 3
1: 1415446-BLNKCT01,1415446,BLNKCT01
2: 1415447-TTSRHT01,1415447,TTSRHT01
3: 1415448-WRAPCT06,1415448,WRAPCT06

用match的话, 只能得到以下结果
array: 3
1: 1415446-BLNKCT01
2: 1415447-TTSRHT01
3: 1415448-WRAPCT06

重点, 在全局的情况下, 要想兼得子匹配结果的话, match是无能为力了, 要用exec

详解exe在g模式的子匹配
/(\d{7})-([a-zA-z]{6}\d{2})/g
2个(), 就是regular的子匹配, 这个在非全局模式下
exec,
array: 1
1: 1415446-BLNKCT01,1415446,BLNKCT01

match
array: 3
1: 1415446-BLNKCT01
2: 1415446
3: BLNKCT01

其实exec也是3个数组, 只是我输出的JS比较懒, 直接把array.toString()了, 这也是弱类型语言的特色啊, 有时...还蛮方便的

然后, 当设置了全局模式
match就ignore了子匹配了, 得到了上面的结果, 而exec呢, 比较精细, 因为里面有你一次又一次的exec()来匹配, 所以, 在每次的匹配下, 子匹配就可以得到了, 多一份耕耘, 多一份收获啊
array: 3
1: 1415446-BLNKCT01,1415446,BLNKCT01 这里是第一次exec()后得到的Array(3)
2: 1415447-TTSRHT01,1415447,TTSRHT01 这里是第二次exec()后得到的Array(3)
3: 1415448-WRAPCT06,1415448,WRAPCT06 这里是第三次exec()后得到的Array(3)

Regular应用在String.replace上, 利用Global参数, 可以轻松实现JS没有的repalceAll函数功能

用reg实现trim()
trim前面的空格
String.replace('/^ */', '');
trim后面的空格
String.replace('/ *$/', '');
trim前面和后面的空格
String.replace('/(^ *)|( *$)/g', ''); //注意global
以上这种写法, 是大多数人的常规写法, 在repalce里一般没问题, 但用于exec或match, 就会引起无限递归, 其关键在于NFA引擎的查找方法比较细腻, 会优先最长匹配, 即优先匹配量词

这是改良写法一, 把量词由 * 改为 +
/(^ +)|( +$)/g

这是改良写法二, 去除子匹配, 避免了死循环
/^[ ]+|[ ]+$/g

HTML Regular Express Validate

<html>
  <head>
    <title>Regular Express Validate</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css">
		form input[type="text"] {width: 500px}
		form textarea {width: 500px}
	</style>
	<script type="text/javascript">
		var regExp;
		var txt; //1415446-BLNKCT01, 1415447-TTSRHT01, 1415448-WRAPCT06
		var g, i, m;
		var param;
		function getValue(){
			document.getElementById("lblTest").innerHTML="";
			document.getElementById("lblIndex").innerHTML="";
			document.getElementById("result").value="";
			regExp=document.getElementById("regExp").value;
			txt=document.getElementById("txt").value;
			g=(document.getElementById("reg_g").checked)?"g":"";
			i=(document.getElementById("reg_i").checked)?"i":"";
			m=(document.getElementById("reg_m").checked)?"m":"";
			param=g+i+m;
		}
		function test(){
			getValue();
			var reg=new RegExp(regExp, param);
			var flag=reg.test(txt);
			if(!flag){
				document.getElementById("lblTest").innerHTML="false";
				return;
			}
			var limit=99;
			var limit_count=0;
			var str=reg.lastIndex;
			while(flag){
				flag=reg.test(txt);
				var tmp=reg.lastIndex;
				if("0"==tmp)
					break;
				else
					str+=", "+tmp;
				
				//avoid infinity recursion
				limit_count++;
				if(limit_count>limit)
					break;
			}
			document.getElementById("lblTest").innerHTML="true";
			document.getElementById("lblIndex").innerHTML=str;
		}
		function exec(){
			getValue();
			test();
			var reg=new RegExp(regExp, param);
			
			var len=("g"==g)?99:1;
			var array=new Array();
			for(var i=0;i<len;i++){
				var result=reg.exec(txt);
				if(null==result){
					break;
				}else{
					array[i]=result;
				}
			}
			showResult(array);
		}
		function match(){
			getValue();
			test();
			var reg=new RegExp(regExp, param);
			var flag=reg.test(txt);
			document.getElementById("lblTest").innerHTML=flag;
			if(!flag)
				return;
			
			var result=txt.match(reg);
			showResult(result);
		}
		function showResult(result){
			if(result instanceof Array){
				var len=result.length;
				var str="array: "+len+"\n";
				for(var i=0;i<len;i++){
					str+=(Number(i)+1)+": "+result[i]+"\n";
				}
				document.getElementById("result").value=str;
			}
		}
		function replace(){
			g=(document.getElementById("reg_g").checked)?"g":"";
			i=(document.getElementById("reg_i").checked)?"i":"";
			m=(document.getElementById("reg_m").checked)?"m":"";
			regExp=document.getElementById("regExp").value;g=(document.getElementById("reg_g").checked)?"g":"";
			i=(document.getElementById("reg_i").checked)?"i":"";
			m=(document.getElementById("reg_m").checked)?"m":"";
			param=g+i+m;
			
			var txt=document.all.txt.value;
			var reg=new RegExp(regExp, param);
			var str=document.all.replacestr.value;
			var result=txt.replace(reg, str);
			document.all.replaceresult.value=result;
//			document.getElementById("replaceresult").value=result;
		}
	</script>
  </head>
  <body>
	  <form action="">
		Regular Parameter<br />
		<input type="checkbox" id="reg_g" name="reg_g" /><label for="reg_g">Global</label>
		<input type="checkbox" id="reg_i" name="reg_i" /><label for="reg_i">IgnoreCase</label>
		<input type="checkbox" id="reg_m" name="reg_m" /><label for="reg_m">MultiLine</label>
		<br />
		Regular Express<br />
		<input type="text" id="regExp" name="regExp" />
		<br />
		<br />
		Text<br />
		<textarea id="txt" name="txt" rows="3" cols=""></textarea>
		<br /><br />
		<input type="button" value="test" onclick="test()" />
		<input type="button" value="exec" onclick="exec()" />
		<input type="button" value="match" onclick="match()" />
		<br />
		<br />
		<br />
		Result<br />
		Test: <label id="lblTest"></label><br />
		LastIndex: <label id="lblIndex"></label><br />
		<br />
		<textarea id="result" name="result" rows="5" cols="" ></textarea>
		<br />
		<br />
		Replace<br />
		<input type="text" id="replacestr" name="replacestr" /><br />
		<input type="button" value="replace" onclick="replace()" /><br />
		<textarea id="replaceresult" name="replaceresult" rows="5" cols=""></textarea>
	  </form>
  </body>
</html>

分享到：