Javascript正则表达式详解

2016-02-19 14:40 5 1 收藏

下面是个Javascript正则表达式详解教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - Web开发 】

g 代表全局匹配
m 代表可以进行多行匹配
i 代表不区分大小写匹配
^ 匹配输入字符串的开始位置
$ 匹配输入字符串的结束位置
* 匹配前面的子表达式零次或多次. 等价于{0,}
+ 匹配前面的子表达式一次或多次. 等价于{1,}
? 匹配前面的子表达式零次或一次. 等价于[0,1} , 当该字符跟在任何一个其他限制符(*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 "oooo",'o+?' 将匹配单个 "o",而 'o+' 将匹配所有 'o'。

d 匹配一个数字字符. 等价于 [0-9]
D 匹配一个非数字符. 等价于 [^0-9]
w  ,等价于 "[A-Za-z0-9_]"
W 匹配任何非单词字符,等价于 "[^A-Za-z0-9]"
s 匹配任何空白字符, 包括空格 制表符 换页符 等等. 等价于[fv]
S 匹配任何非空白字符. 等价于 [^fv]
 匹配一个单词边界,也就是指单词和空格间的位置。
B 匹配非单词边界。

(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"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始

匹配2-4个汉字

 程序代码
/^[u4e00-u9fa5]{2,4}$/g;


匹配6到18个(字母,数字,下划线)字符

 程序代码
/^w{6,18}$/;

 程序代码
/^[A-Za-z0-9_]$/;

匹配HTML标签

 程序代码
/[^]*|/[^]*/gm;

 程序代码
//?[^]+/gm;

匹配左右两端的空格

 程序代码
/(^s*)|(s*$)/g;

优先级顺序(从高到低)
转义符
(),(?:),(?=),[] 圆括号和方括号
* , + , ? , {n} , {n,} , {n,m} 限定符
^ , [vapour:content]nbsp; 位置和顺序
| "或"操作

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

匹配两个连续的以空格分开的相同单词

 程序代码
/([a-z]+) 1/gim ;

在这个示例中,子表达式就是圆括号之间的每一项。
所捕获的表达式包括一个或多个字母字符,即由'[a-z]+' 所指定的。
该正则表达式的第二部分是对前面所捕获的子匹配的引用,也就是由附加表达式所匹配的第二次出现的单词。
'1'用来指定第一个子匹配。单词边界元字符确保只检测单独的单词。
如果不这样,则诸如 "is issued" 或 "this is" 这样的短语都会被该表达式不正确地识别。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

 程序代码
var ss = "Is is the cost of of gasoline going up up?. Is is the cost of of gasoline going up up?.";
var re = /([a-z]+) 1/gim;   
var rv = ss.replace(re,"$1");
document.write(rv) //输出 "Is the cost of gasoline going up?. Is the cost of gasoline going up?. "

 程序代码
/Cha/

匹配单词 'Chapter' 的前三个字符,因为它们出现在单词边界后

 程序代码
/ter/

匹配单词 'Chapter' 中的 'ter',因为它出现在单词边界之前

 程序代码
/Bapt/

匹配 'apt',因为它位于 'Chapter' 中间,但不会匹配 'aptitude' 中的'apt',因为它位于单词边界后
*/

匹配URL地址

 程序代码
/(w+)://([^/:]+)(:d*)?([^#]*)/

将下述的URI 分解为协议 (ftp, http, etc),域名地址以及页面/路径:
http://msdn.microsoft.com:80/scripting/default.htm

第一个附加子表达式是用来捕获该 web 地址的协议部分。该子表达式匹配位于一个冒号和两个正斜杠之前的任何单词。第二个附加子表达式捕获该地址的域名地址。该子表达式匹配不包括 '^'、 '/' 或 ':' 字符的任何字符序列。第三个附加子表达式捕获网站端口号码,如果指定了该端口号。该子表达式匹配后跟一个冒号的零或多个数字。最后,第四个附加子表达式捕获由该 web 地址指定的路径以及或者页面信息。该子表达式匹配一个和多个除'#' 或空格之外的字符。

将该正则表达式应用于上面所示的 URI 后,子匹配包含下述内容:

RegExp.$1 包含 "http"

RegExp.$2 包含 "msdn.microsoft.com"

RegExp.$3 包含 ":80"

RegExp.$4 包含 "/scripting/default.htm"

正则表达式的方法

1 test方法

返回一个Boolean值,它指出在被查找的字符串中是否存在模式

rgExp.test(str)

全局RegExp对象的属性不由test方法来修改

example1

 http://www.knowsky.com/
 程序代码
var url="http://msdn.microsoft.com:80/scripting/default.html";
  var reg=/(w+)://([^/:]+)(:d*)?([^#]*)/;
  var flag=reg.test(url);
  flag  //返回true
  RegExp.$1 //返回"http"
  RegExp.$2 //返回"msdn.microsoft.com"
  RegExp.$3 //返回":80"
  $egExp.$4 //返回"/scripting/default.html"

  search和test方法都不能更新全局RegExp对象,所以RegExp.input,RegExp.index,RegExp.lastIndex返回undefined

2 match 方法

使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回

 程序代码
stringObj.match(rgExp)

如果match方法没有找到匹配,返回null。如果找到匹配返回一个数组并且更新全局RegExp对象的属性以反映匹配结果。

match方法返回的数组有三个属性:input、index和lastIndex。
Input属性包含整个的被查找的字符串。
Index属性包含了在整个被查找字符串中匹配的子字符串的位置。
LastIndex属性包含了最后一次匹配中最后一个字符的下一个位置。

如果没有设置全局标志(g),数组的0元素包含整个匹配,而第1到n元素包含了匹配中曾出现过的任一个子匹配。
这相当于没有设置全局标志的exec方法。如果设置了全局标志,元素0到n中包含所有匹配

example1(没有设置全局标志)

 程序代码
var url="http://msdn.microsoft.com:80/scripting/default.html";
  var reg=/(w+)://([^/:]+)(:d*)?([^#]*)/;
  var myArray=url.match(reg);
  RegExp.$1 //返回"http"
  RegExp.$2 //返回"msdn.microsoft.com"
  RegExp.$3 //返回":80"
  $egExp.$4 //返回"/scripting/default.html"
  myArray  //返回myArray[0]="http://msdn.microsoft.com:80/scripting/default.html",
      myArray[1]="http",myArray[2]="msdn.microsoft.com",
      myArray[3]=":80",myArray[4]="/scripting/default.html"
  myArray.input //返回“http://msdn.microsoft.com:80/scripting/default.html"
  myArray.index //返回0
  myArray.lastIndex //返回51

example2(设置了全局标志)
  
  程序代码
var url="http://msdn.microsoft.com:80/scripting/default.html";
  var reg=/(w+)://([^/:]+)(:d*)?([^#]*)/g;
  var myArray=url.match(reg);
  RegExp.$1 //返回"http"
  RegExp.$2 //返回"msdn.microsoft.com"
  RegExp.$3 //返回":80"
  $egExp.$4 //返回"/scripting/default.html"
  myArray  //返回myArray="http://msdn.microsoft.com:80/scripting/default.html"
  myArray.input //返回“http://msdn.microsoft.com:80/scripting/default.html"
  myArray.index //返回0
  myArray.lastIndex //返回51

注意设置了全局标志后区别
  如果没有设置全局标志(g),数组的0元素包含整个匹配,而第1到n元素包含了匹配中曾出现过的任一个子匹配。
  这相当于没有设置全局标志的exec方法。如果设置了全局标志,元素0到n中包含所有匹配

3 exex方法

用正则表达式模式在字符串运行查找,并返回包含该查找结果的一个数组。

 程序代码
rgExp.exec(str)

如果exec方法没有找到匹配,则它返回null。
如果它找到匹配,则exec方法返回一个数组,并且更新全局RegExp对象的属性,以反映匹配结果。
数组的0元素包含了完整的匹配,而第1到n元素中包含的是匹配中出现的任意一个子匹配。
这相当于没有设置全局标志(g)的match方法。

如果为正则表达式设置了全局标志,exec从以lastIndex的值指示的位置开始查找。
如果没有设置全局标志,exec忽略lastIndex的值,从字符串的起始位置开始搜索。

exec方法返回的数组 有三个属性,分别是input、index、lastIndex。
Input属性包含了整个被查找的字符串。
Index属性中包含了整个被查找字符串中被匹配的子字符串的位置。
LastIndex属性中包含了匹配中最后 一个字符的下一个位置。

example1(没有设置全局标志)

 程序代码
var url="http://msdn.microsoft.com:80/scripting/default.html";
  var reg=/(w+)://([^/:]+)(:d*)?([^#]*)/;
  var myArray=reg.exec(url);
  RegExp.$1 //返回"http"
  RegExp.$2 //返回"msdn.microsoft.com"
  RegExp.$3 //返回":80"
  $egExp.$4 //返回"/scripting/default.html"
  myArray  //返回myArray[0]="http://msdn.microsoft.com:80/scripting/default.html",
      myArray[1]="http",myArray[2]="msdn.microsoft.com",
      myArray[3]=":80",myArray[4]="/scripting/default.html"
  myArray.input //返回“http://msdn.microsoft.com:80/scripting/default.html"
  myArray.index //返回0
  myArray.lastIndex //返回51

 没有设置全局标志(g)时,match方法和exec方法相同
 
example2(设置全局标志)
    
 程序代码
var url="http://msdn.microsoft.com:80/scripting/default.html";
  var reg=/(w+)://([^/:]+)(:d*)?([^#]*)/;
  var myArray=reg.exec(url);
  RegExp.$1 //返回"http"
  RegExp.$2 //返回"msdn.microsoft.com"
  RegExp.$3 //返回":80"
  $egExp.$4 //返回"/scripting/default.html"
  myArray  //返回myArray[0]="http://msdn.microsoft.com:80/scripting/default.html",
      myArray[1]="http",myArray[2]="msdn.microsoft.com",
      myArray[3]=":80",myArray[4]="/scripting/default.html"
  myArray.input //返回“http://msdn.microsoft.com:80/scripting/default.html"
  myArray.index //返回0
  myArray.lastIndex //返回51

4 search方法

返回与正则表达式查找内容匹配的第一个子字符串的位置。

 程序代码
stringOjb.search(rgExp)

search方法指明是否存在相应的匹配 。
如果找到一个匹配,search方法将返回一个整数值,指明这个匹配距离字符串开始的偏移位置。
如果没有找到匹配,则返回-1。
 
example1

 程序代码
var url="http://msdn.microsoft.com:80/scripting/default.html";
  var reg=/(w+)://([^/:]+)(:d*)?([^#]*)/;
  var flag=url.search(reg);
  flag  //返回0
  RegExp.$1 //返回"http"
  RegExp.$2 //返回"msdn.microsoft.com"
  RegExp.$3 //返回":80"
  $egExp.$4 //返回"/scripting/default.html"

  search和test方法都不能更新全局RegExp对象,所以RegExp.input,RegExp.index,RegExp.lastIndex返回undefined 

5 replace方法

返回根据正则表达式进行文字替换后的字符串的复制

能更新全局RegExp对象

来源:https://www.tulaoshi.com/n/20160219/1607517.html

延伸阅读
标签: Web开发
签于网上太多的介绍都是一篇凶悍的短文,边看边理解可以,帮助记忆不行。又受五笔字型字根表口诀“白手看头三二斤...”的启发,  试作“正则表达式助记口诀”又名“正则打油诗”,版本0.1,绝对原创,仿冒必究,:)  注:本文仅为学习正则时为了便于记忆而作,不能代替系统而全面的学习过程,错漏之处,敬请指正!  正则其实...
标签: Web开发
作者: hezhiwu5@163.com  script language="javascript" var stringObj="终古人民共和国,终古人民"; //替换错别字“终古”为“中国” //并返回替换后的新字符 //原字符串stringObj的值没有改变 var newstr=stringObj.replace("终古","中国");  alert(newstr); /script 比我聪明的你,看完上面的例子...
标签: Web开发
你平时如何测试正则表达式?直接写在大段的代码中,然后等待程序运行到那里,再用alert显示结果?或者是临时写一个页面,测试完成后把它丢掉? 你可以试一下我这个页面,虽然它很粗糙,但是测试正则表达式也足够了:)) 一、说明: 1. 我的本意为交流技术.本人水平很菜.因此所贴出的代码中,会有不足之处. 2. 代码可任意修改.如果你...
标签: Web开发
在对正则表达式有了较为全面的了解之后,我们就来看一下如何在Perl,PHP,以及JavaScript中使用正则表达式。 通常,Perl中正则表达式的使用格式如下: operator / regular-expression / string-to-replace / modifiers 运算符一项可以是m或s,分别代表匹配运算和替换运算。 其中,正则表达式一项是将要进行匹配或替换...
标签: Web开发
JS的正则表达式 //校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return false return true } //校验登录名:只能输入5-20个以字母开头、可带数字、“_”、“.”的字串 function isRegisterUserName(s) { var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/; if (!p...

经验教程

923

收藏

11
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部