教你轻松记住JS正则表达式

（推荐）JS正则知识点专题：https://www.jb51.net/article/139831.htm

前言

正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为"元字符"）组成的文字模式。模式描述在搜索文本时要匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。

为啥要有正则表达式呢？其实就是因为计算机笨（这话不是我说的），比如123456@qq.com我们一看就是邮箱，可是计算机不认识啊，所以我们就要用一些计算机认识的语言，来制定好规则，告诉它符合这个规则的就是个邮箱，这样计算机就能帮我们找到对应的东西了。所以正则就是用来设置规则，来完成我们需求的一些操作的，比如登录验证啦，搜索指定的东西啦等等，说太多都是多余，直接看正题吧。

定义正则：

正则的常用方法

1  test()  :在字符串中查找符合正则的内容，若查找到返回true,反之返回false.

用法：正则.test(字符串)

例子：判断是否是数字

var str = '374829348791';
var re = /\D/; // \D代表非数字
if( re.test(str) ){ // 返回true,代表在字符串中找到了非数字。
 alert('不全是数字');
}else{
 alert('全是数字');
}

正则表达式中有很多符号，代表着不同的意思，用来让我们去定义不同的规则，比如上面\D，还有下面的这些：

\s : 空格

\S : 非空格

\d : 数字

\D : 非数字

\w : 字符 ( 字母 ，数字，下划线_ )

\W : 非字符例子：是否有不是数字的字符

（下面会根据例子，依次讲一些常用的字符，最后再作总结。）

 2   search()  ：在字符串搜索符合正则的内容，搜索到就返回出现的位置（从0开始，如果匹配的不只是一个字母，那只会返回第一个字母的位置）， 如果搜索失败就返回 -1

用法：字符串.search(正则)

在字符串中查找复合正则的内容。忽略大小写：i——ignore（正则中默认是区分大小写的 如果不区分大小写的话，在正则的最后加标识 i ）

例子：在字符串中找字母b，且不区分大小写

var str = 'abcdef';

var re = /B/i;

//var re = new RegExp('B','i'); 也可以这样写

alert( str.search(re) ); // 1

3  match()  在字符串中搜索复合规则的内容，搜索成功就返回内容，格式为数组，失败就返回null。

     用法： 字符串.match(正则)

     量词：+ 至少出现一次 匹配不确定的次数（匹配就是搜索查找的意思）

    全局匹配：g——global（正则中默认，只要搜索到复合规则的内容就会结束搜索 ）

例子：找出指定格式的所有数字，如下找到 123，54，33，879

4 replace() :查找符合正则的字符串，就替换成对应的字符串。返回替换后的内容。

    用法： 字符串.replace(正则,新的字符串/回调函数)（在回调函数中，第一个参数指的是每次匹配成功的字符）

     | : 或的意思 。

   例子：敏感词过滤，比如 我爱北京天安门，天安门上太阳升。------我爱*****，****上太阳升。即北京和天安门变成*号，

一开始我们可能会想到这样的方法：

var str = "我爱北京天安门，天安门上太阳升。";
var re = /北京|天安门/g; // 找到北京 或者天安门 全局匹配
var str2 = str.replace(re,'*'); 
alert(str2) //我爱**，*上太阳升 

//这种只是把找到的变成了一个*，并不能几个字就对应几个*。

要想实现几个字对应几个*，我们可以用回调函数实现：

replace是一个很有用的方法，经常会用到。

正则中的字符

()：，小括号，叫做分组符。就相当于数学里面的括号。如下：

同时，正则中的每一个带小括号的项，都叫做这个正则的子项。子项在某些时候非常的有用，比如我们来看一个栗子。

例子：让2013-6-7 变成 2013.6.7

match方法也会返回自己的子项，如下：

补充：exec()方法：和match方法一样，搜索符合规则的内容，并返回内容，格式为数组。

                      用法：正则.exec(字符串)；

属性：input(代表要匹配的字符串) 

栗子：不是全局匹配的情况：

全局匹配：如果是全局匹配，可以通过while循环 找到每次匹配到的字符串，以及子项。每次匹配都接着上次的位置开始匹配

[] ： 表示某个集合中的任意一个，比如 [abc] 整体代表一个字符 匹配 a b c 中的任意一个，也可以是范围，[0-9] 范围必须从小到大 。

[^a] 整体代表一个字符   ：^写在[]里面的话，就代表排除的意思

例子：匹配HTML标签 比如<div class="b">hahahah </div> 找出标签<div class="b"></div>

转义字符

\s : 空格

\S : 非空格

\d : 数字

\D : 非数字

\w : 字符 ( 字母 ，数字，下划线_ )

\W : 非字符

.（点）——任意字符

\. : 真正的点

\b : 独立的部分 （ 起始，结束，空格 ）

\B : 非独立的部分

关于最后两个来看个栗子：

var str = 'onetwo';
var str2 ="one two";

var re = /one\b/; // e后面必须是独立的 可以是起始，空格，或结束

alert( re.test(str) ); //false
alert( re.test(str2) );//true 

例子：写一个用class名获取节点的函数：

我们之前可能见过这样的函数：

 function getByClass(parent,classname){ 
 if(parent.getElementsByClassName){ 
  return parent.getElementsByClassName(classname);
 }
 else{
 var results = new Array();//用来存储所有取到的class为box的元素
 var elems = parent.getElementsByTagName("*");
 for(var i =0;i<elems.length;i++){ 
  if(elems[i].className==classname){ 
  results.push(elems[i]);
  }
 }
 return results; 
 }
}

其实这是存在问题的，比如它如果一个标签里面有两个class,或者存在相同名字的class,比如<div class="box1 box1">,<div class="box1 box2>它就没办法获取到了，我们可以用正则来解决这个问题。

\a 表示重复的某个子项 比如：

\1 重复的第一个子项

\2 重复的第二个子项

/ (a) (b) (c) \1/-----匹配 abca
/ (a) (b) (c) \2/------匹配 abcb

例子（面试题中经常问到）：找重复项最多的字符个数

split():字符串中的方法，把字符串转成数组。

sort():数组中的排序方法，按照ACALL码进行排序。

join():数组中的方法，把数组转换为字符串

量词：代表出现的次数

{n,m}：至少出现n次，最多m次

{n,} :至少n次

* :任意次 相当于{0,}

？ ：零次或一次 相当于{0,1}

+ ：一次或任意次相当于 {1,}

{n}： 正好n次

例子：判断是不是QQ号

//^ : 放在正则的最开始位置，就代表起始的意思，注意  /[^a] /   和   /^[a]/是不一样的，前者是排除的意思，后者是代表首位。
//$ : 正则的最后位置 , 就代表结束的意思

//首先想QQ号的规则 
 1 首位不能是0 
 2 必须是 5-12位的数字
 
 var aInput = document.getElementsByTagName('input');
 var re = /^[1-9]\d{4,11}$/;
 //123456abc为了防止出现这样的情况，所以必须限制最后
 //首位是0-9，接着是4-11位的数字类型。
aInput[1].onclick = function(){
 if( re.test(aInput[0].value) ){
 alert('是QQ号');
 }else{
 alert('不是QQ号');
 }

};

例子：去掉前后空格（面试题经常出现）

常用的一些表单校验

为了方便且不冲突，我们可以用json的格式 建立自己的空间，如下：

/*

var re = {
email : /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/,
number : /\d+/
};

re.email

*/

所谓温故而知新，可以为师矣，要多多联系。整理的正则的基础知识点大概就这么多，写的有些乱，欢迎指正。

最新评论