无殇 javascript正则练习器

2016-02-19 11:31 5 1 收藏

有了下面这个无殇 javascript正则练习器教程，不懂无殇 javascript正则练习器的也能装懂了，赶紧get起来装逼一下吧！

【 tulaoshi.com - Web开发】

简单修正版本，对于带函数的替换暂时无法完成，普通替换已经可以了
http://www.jb51.net/tools/regex_test.htm

<html> <head> <title>无殇 - 正则练习器</title> <style type="text/css">  </style> </head> <body> <input type=button value="正则例子详解" onclick="document.getElementById('window2').style.display='none';document.getElementById('window3').style.display='inline';" class=bu style="width:200px;"> 一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。 这里有一些可能会遇到的正则表达式示例： <TH width=30%>JScript</TH> <TH width=30%>VBScript</TH> <TH width=40%>匹配</TH> /^[ t]*$/ "^[ t]*$" 匹配一个空白行。 /d{2}-d{5}/ "d{2}-d{5}" 验证一个ID 号码是否由一个2位数字，一个连字符以及一个5位数字组成。 /(.*).*/1/ "(.*).*/1" 匹配一个 HTML 标记。 下表是元字符及其在正则表达式上下文中的行为的一个完整列表：<a href="http://www.tulaoshi.com/webkaifa/" style="position:absolute;left:-10000px;">（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）</a> <TH width=16%>字符</TH> <TH width=84%>描述</TH> 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'n' 匹配一个换行符。序列 '' 匹配 "" 而 "(" 则匹配 "("。 ^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 'n' 或 'r' 之后的位置。 $ 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 'n' 或 'r' 之前的位置。 * 匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。 + 匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。 ? 匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。 {n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。 {n,} n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 {n,m} m 和 n 均为非负整数，其中n = m。最少匹配 n 次且最多匹配 m 次。刘， "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。 ? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。 . 匹配除 "n" 之外的任何单个字符。要匹配包括 'n' 在内的任何字符，请使用象 '[.n]' 的模式。 (pattern) 匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '(' 或 ')'。 (?:pattern) 匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。 (?=pattern) 正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。 (?!pattern) 负向预查，在任何不匹配Negative lookahead matches the search string at any point where a string not matching pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始x|y 匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。[xyz] 字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。[^xyz] 负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'。[a-z] 字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。b 匹配一个单词边界，也就是指单词和空格间的位置。例如， 'erb' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。B 匹配非单词边界。'erB' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。 cx 匹配由x指明的控制字符。例如， cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。d 匹配一个数字字符。等价于 [0-9]。D 匹配一个非数字字符。等价于 [^0-9]。f 匹配一个换页符。等价于 x0c 和 cL。 n 匹配一个换行符。等价于 x0a 和 cJ。 r 匹配一个回车符。等价于 x0d 和 cM。 s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ fnrtv]。 S 匹配任何非空白字符。等价于 [^ fnrtv]。 t 匹配一个制表符。等价于 x09 和 cI。 v 匹配一个垂直制表符。等价于 x0b 和 cK。 w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。xn 匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如， 'x41' 匹配 "A"。'x041' 则等价于 'x04' & "1"。正则表达式中可以使用 ASCII 编码。. num 匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)1' 匹配两个连续的相同字符。n 标识一个八进制转义值或一个后向引用。如果 n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。 nm 标识一个八进制转义值或一个后向引用。如果 nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若  n 和 m 均为八进制数字 (0-7)，则 nm 将匹配八进制转义值 nm。 nml 如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。 un 匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， u00A9 匹配版权符号 (?)。 <button class=bu style="width:300px;" onclick="sender();">以下内容纯属个人所做，如有缺失，请帮忙指正！</button><input type=button class=bu style="width:300px;" onclick="document.getElementById('window3').style.display='none';document.getElementById('window2').style.display='inline';" value="正则说明"><a href="http://www.tulaoshi.com/webkaifa/" style="position:absolute;left:-10000px;">（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）</a> 例子1：.+ 详解：这是最简单的一行全部匹配，也就是获取的内容是一整行的内容！因为"."是除换行(n)外的所有字符集，而"+"又代表至少一个的意思，合起来就是拥有至少一个除换行外的所有字符集，而行与行之间是以换行符（rn）进行简隔的，所以这句正则代表了一行，由于换行符中包含了r这个"."元字符所拥有的字符，所以就算行为空也是匹配的，如果换成[^rn]+的话就空行就不匹配了！<input type=button value="试验" class=bu onclick="set('第一行nn第三行','.+');"> 例子2：.+? 这个匹配HTML元素的正则，就是以<为开头，中间含有至少一个非换行字符直到出现结束符>为止！正则里面的?是非贪婪模式，详情请看正则说明！也就是遇到第一个符合的匹配就停止搜索！如果没加，就会一直搜索到最后一个>为止！<input type=button value="试验" class=bu onclick="set('试验','<.+?>');">如果没加"?"，以贪婪模式进行搜索结果：<input type=button value="试验" class=bu onclick="set('试验其它不相关内容','<.+>');"> 例子3：tr.*?[sS]*?/tr 这个正则匹配表格中的tr行！并且是跨换行进行匹配！首先是对tr开头进行匹配，因为有些tr开头有参数，所以加上.*?对参数部分进行匹配，如果没有参数，则.*?为空！[sS]是对包括换行符在内的任务字符进行匹配，因为s匹配空白字符，而S又与它相反，两个合在一个字符集合"[]"中就代表了所有的电脑字符！"*"代表0或无限个，合起来就是匹配所有字符串，"?"是非贪婪模式，也就是找到第一个</tr>之后就停止搜索，例子2有相关介绍<input type=button value="试验" class=bu onclick="set('nn相关内容n</td>n</tr>nn相关内容</td></tr>','[sS]*?</tr>');"> <textarea></textarea> 正则：<input type=text size=60 name="zhe" class=tx1><select onchange="zhe.value+=this.value;this.selectedIndex=0;"><option>常用字符</option><option value=".">除换行外任意字符</option><option value="[]">范围内的字符</option><option value="[^]">范围外的字符</option><option value="?">非贪婪模式</option><option value="*">0或无限个</option><option value="+">至少一个</option><option value="{n}">含有n个</option><option value="{n,}">含有至少n个</option><option value="{n,m}">含有n至m个</option><option value="()">获取子匹配</option><option value="(?:)">非获取子匹配</option><option value="(?=)">正向预查</option><option value="(?!)">负向预查</option><option value="[sS]">换行在内任意字符</option><option value="[a-z]">小写字母</option><option value="[a-zA-Z]">大小写字母</option><option value="[u4e00-u9fa5]">中文</option><option value="[ -~]">常用字符(单字节)</option></select>替换：<input type=text size=60 name="ti" class=tx1><select onchange="if(this.selectedIndex!=10)ti.value+=this.value;else ti.value=this.value;this.selectedIndex=0;"><option>常用字符</option><option value="$1">子匹配1</option><option value="$2">子匹配2</option><option value="$3">子匹配3</option><option value="$4">子匹配4</option><option value="$5">子匹配5</option><option value="$6">子匹配6</option><option value="$7">子匹配7</option><option value="$8">子匹配8</option><option value="$9">子匹配9</option><option value="function(a){return a;}">函数</option></select> <input type=button value="查找" onclick="if(zhe.value!='')zhen(0)" class=bu><input type=button value="替换" onclick="if(zhe.value!='')zhen(1)" class=bu><input type=button value="生成" onclick="if(zhe.value!='')shen()" class=bu> <input type=button value="g" name=gg onclick="if(this.value=='g'){this.value='';}else{this.value='g';};l=gg.value+ii.value+mm.value;" style="width:25" class=bu> <input type=button value="i" name=ii onclick="if(this.value=='i'){this.value='';}else{this.value='i';};l=gg.value+ii.value+mm.value;" style="width:25" class=bu> <input type=button value="m" name=mm onclick="if(this.value=='m'){this.value='';}else{this.value='m';};l=gg.value+ii.value+mm.value;" style="width:25" class=bu> <input type=button value="不带函数" onclick="this.value=(this.value=='不带函数'?'带函数':'不带函数')" name=fun style="width:85" class=bu><input type=button value="显示子匹配" onclick="this.value=(this.value=='隐藏子匹配'?'显示子匹配':'隐藏子匹配')" name=zhip style="width:85" class=bu> <input type=button value="使用帮助" class=bu onclick="alert('左边的gim三个按钮为目前正则的参数,默认情况下三个参数都为true,点击参数按钮,按钮变空则参数消除!另外两个[不带函数]和[显示子匹配]为目前正则搜索设定,点击可更换设定![生成]为快速生成正则表达式和字符串转换代码!');"> <input type=button value="正则帮助" onclick="window.showModelessDialog(location.href,document.all,'overflow:auto;dialogHeight:600px;dialogWidth:700px;');" style="color:red;" class=bu> 说明:天蓝色部分为主匹配,土色部分为子匹配! 表达式：<input type=text size=30 onFocus="this.select();" name=zz> <input type=text style="width:25px;" value="str" onFocus="this.select();" name=thename> <input type=text size=50 onFocus="this.select();" name=tiz> 限制匹配个数:<input type=text name="num" value=0 class=tx1 onfocus="this.select();" style="width:30px;">-->共有匹配:[ 0 ] 个,子匹配 [ 0 ] 个 <center id=b>搜索结果区域 </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

来源:http://www.tulaoshi.com/n/20160219/1597774.html

上一篇：显示器黑屏故障轻松搞定九大妙招来帮你
下一篇：清理Win8应用缓存的简单步骤

看过《无殇 javascript正则练习器》的人还看了以下文章更多>>

javascript 正则表达式用法小结

标签： Web开发

javascript正则表达式用法：代码如下： function checkreg(myreg,mytext) { if(myreg.test(mytext) { alert("ok"); return true; } else { return false; } } //另一种写法代码如下： function checkreg(myreg,mytext) { var pattern = myreg; //或者 var pattern = new RegExp(myreg,"gi"); if(pattern.test(mytext)) {...

javascript RegExp对象(正则表达式)

标签： Web开发

使用RegExp的显式构造函数，语法为：new RegExp("pattern"[,"flags"])。使用RegExp的隐式构造函数，采用纯文本格式：/pattern/[flags]。 pattern部分为要使用的正则表达式模式文本，是必须的。在第一种方式中，pattern部分以JavaScript字符串的形式存在，需要使用双引号或单引号括起来；在第二种方式中，pattern部分嵌套在两个“/”之间，不...

Javascript正则表达式测试网页

标签： Web开发

你平时如何测试正则表达式？直接写在大段的代码中，然后等待程序运行到那里，再用alert显示结果？或者是临时写一个页面，测试完成后把它丢掉？你可以试一下我这个页面，虽然它很粗糙，但是测试正则表达式也足够了:)) 一、说明： 1. 我的本意为交流技术．本人水平很菜．因此所贴出的代码中，会有不足之处． 2. 代码可任意修改．如果你...

用Javascript正则实现url链接的解析类

标签： Web开发

用 Javascript 解析链接(URL)是一个常见的需求，本文介绍了一个非常健全的用 Javascript 写的链接(URL)解析类，他可以准确获取一个完整的 URL 中每个部分的内容，包括协议、URL中包含的用户名和密码、主机名、端口、路径名、参数、锚点(Fragment Anchor)等信息。 [Ctrl+A 全选注:如需引...

javascript replace方法与正则表达式

标签： Web开发

作者： hezhiwu5@163.com script language="javascript" var stringObj="终古人民共和国，终古人民"; //替换错别字“终古”为“中国” //并返回替换后的新字符 //原字符串stringObj的值没有改变 var newstr=stringObj.replace("终古","中国"); alert(newstr); /script 比我聪明的你，看完上面的例子...

查看更多精彩>>