`

JS Regular Express 备忘录

阅读更多
我一向不喜欢脚本语言, 因为其是弱语言类型, 成天有些让人异想不到的错误,
你很可能花了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>


分享到:
评论

相关推荐

    Microsoft Regular Express Tester

    VBS编写的一个微软正则表达式验证程序(绝对原创)

    regular express 中文版

    下面是译文作者写的前言 ------------------------------------------------------------------ 半年前我对正则表达式产生了兴趣,在网上查找过不少资料,看过不少的教程,最后在使用一个正则表达式工具RegexBuddy...

    Regular Express(正则表达式)

    windows环境 功能:调试,编辑正则表达式进行(可视化)

    JavaScript Regular Expressions(PACKT,2015)

    JavaScript's implementation allows us to perform complex tasks with a few lines of code using regular expressions to match and extract data out of text. This book starts by exploring what a pattern ...

    Implement Data Validation with Regular Express to QTreeWidget

    1080P高清视频。 讲述了PyQt5中QTreeWidget 使用正则表达式实现隐含输入控制,从而使节点内容仅允许输出数字和字母。这个视频还从讲述了如何实现双击编辑条目的功能,国内的网站上目前没有找到类似的介绍文章或视频...

    Mastering Regular Express

    《精通正则表达式》不仅涵盖了理论,还提供了丰富的实践案例,讲解了在多种编程语言(如Java、JavaScript、Perl和.NET框架)中的正则表达式使用方法。这些实例有助于读者将理论知识转化为实际应用。 最后,书中的...

    arcgis js api 使用的字体,arial-unicode-ms-regular和bold

    标题提及的“arial-unicode-ms”字体家族,包括了"arial-unicode-ms-regular"和"arial-unicode-ms-bold"两种样式,它们是Esri ArcGIS JavaScript API中常用的字体。Arial Unicode MS是一款全面支持Unicode标准的无衬...

    helvetiker_regular.typeface.js

    helvetiker_regular.typeface.js

    PingFangSC-Regular.rar

    标题"PingFangSC-Regular.rar"所提及的是一款名为"PingFang SC Regular"的字体压缩包,其中包含了简体中文版本的精简版字体。这个压缩文件内有两个子文件,一个是"PingFangSC-Regular.txt",可能是字体的相关说明或...

    glyphicons-halflings-regular.zip

    bootstrap 图标显示需要的5个字体文件glyphicons-halflings-regular @font-face { font-family: 'Glyphicons Halflings'; src: url('../common/css/fonts/glyphicons-halflings-regular.eot'); src: url('../...

    YARET - Yet Another Regular Express Tool-开源

    YARET,全称“Yet Another Regular Express Tool”,是一个开源的正则表达式工具,为用户提供了一个简单易用的界面来测试和调试他们的正则表达式。 正则表达式是编程和数据处理中的核心概念之一,它通过一套特殊的...

    NotoSansSC-Regular.otf

    NotoSansSC-Regular.otf

    GMS_Express.pdf

    非Go版本设备则必须预装Regular Version,除非设备处于热身状态(hot seat)。在某些情况下,还要求必须具备Google Discover(信息流)功能。 6. GMS Express的合作伙伴要求: GMS Express和GMS Express Plus的合作...

    GoogleSansDisplay-Regular.zip

    《谷歌Sans Display Regular字体解析与应用》 在数字化设计领域,字体的选择往往直接影响到整体设计的视觉效果和用户体验。Google Sans Display Regular,作为谷歌官方全新的品牌Logo字体,它以其独特的几何无衬线...

    Bootstrap glyphicons-halflings-regular fonts资源

    您需要将下载的`fonts`文件夹引入到您的工程目录中,确保字体文件与Bootstrap相关的JavaScript和CSS文件在同一层级或者能够通过相对路径正确访问到。 接下来,您需要在HTML文件中添加对字体资源的引用。通常,这...

    SF-Compact-Text-Regular.zip

    标题 "SF-Compact-Text-Regular.zip" 暗示了这是一个包含特定字体的压缩文件,名为 "SF Compact Text Regular"。这种字体属于无衬线字体家族,通常用于提供清晰易读的文本,适用于屏幕显示和长篇阅读。SF Compact ...

    PingFang SC Regular.zip

    《PingFang SC Regular字体全解析》 在数字化设计领域,字体是不可或缺的重要元素,它在传达信息的同时,也影响着整体视觉效果。PingFang SC Regular是一款广泛应用于中文显示的字体,尤其在网页和移动应用设计中...

    BMW Type Global Regular

    宝马官方字体,符合官方媒体风格要求,BMW Type Global Regular

    MFBanHei_Noncommercial-Regular

    MFBanHei_Noncommercial-Regular

Global site tag (gtag.js) - Google Analytics