JS特效第五天-正则表达式

做好准备，下方高能，一次把这篇文章看完。睡前再看一遍，然后回忆一遍进入梦乡，这个记忆就比较牢固啦。想更稳就醒的时候在回忆一遍。那就不得了啦。开始。

官方定义：

正则表达式，又称规则表达式。（英语：Regular Expression），通常被用来检索、替换那些符合某个(规则)的文本。

其实是自己写一个规则，让程序执行。不管你是谁只要是不按我的规则来，就不让你完成。

一、简单认识正则表达式

创建正则表达式的两种方式
1.通过构造函数定义
var 变量名= new RegExp(/规则表达式/);

2.通过直接量定义
var 变量名= /规则表达式/;
test();正则表达式的一个方法，返回bool值，判断括号内参数是否符合调用者规则。
来试一下。

//1.我们用对象定义法创建一个规则（3个字母）
      var re1 = new RegExp(/abc/);
//2.然后用字面量也创建一个3个字母的规则。
      var re2 = /abc/;
//下面re1是调用者。re2是参数。判断参数是否满足调用者的规则。
     console.log(re1.test(re2));
     //返回true;

二、正则表达式内置的五大类(把这五大类用好，you就学得OK啦)

• （一）预定义类

(感觉这个名字不是太好，但又想不起来好名字)

字符	相当于	含义
.（点）	[^\n\r]	允许除了换行和回车之外的任意字符
\d	[0-9]	代表数字字符
\D	[^0-9]	非数字字符
\s	[ \t\n\x0B\f\r]	代表空白字符
\S	[^ \t\n\x0B\f\r]	非空白字符
\w	[a-zA-Z_0-9]	允许单词字符
\W	[^a-zA-Z_0-9]	非单词字符

这个好记：只要是大写的，都是非。
里面字符都是用\d,不是用/d。是因为正则字面量是包含在/***/这里面，只能用相反的\来使用。

• 预定义的特殊类

字符	正则	描述
\t	/\t/	制表符
\n	/\n/	制表符
\r	/\r/	回车符
\f	/\f/	换页符
\a	/\a/	alert字符
\e	/\e/	escape字符
\cX	/\cX/	与X相对应的控制字符
\b	/\b/	与回退字符
\v	/\v/	垂直制表符
\0	/\0/	空字符

• （二）字符类

只多不少，区分大小写。必须全匹配。
console.log(/ABC/.test("ABC")) //true;
console.log(/ABC/.test("abc")) //flase;
console.log(/ABC/.test("AB")) //flase;
console.log(/ABC/.test("ABCD")) //true;

如果带中括号的话，包含一个就行，不用全匹配。
console.log(/[abc]/.test("c"));//true;
console.log(/[abc]/.test("w"));//flase;没有w
console.log(/[abc]/.test("*"));//flase;

• （三）负向类

也可以叫反向类。括号内插入^（中文叫这玩意乘方）进行取反。

console.log(/[^abc]/.test("iiii"));//true:里面没有abc.
console.log(/[^abc]/.test("aiiii"));//true:只能多不能少。
console.log(/[^abc]/.test("abc"));//false:正好匹配
console.log(/[^abc]/.test("bc"));//false:少了，
console.log(/[^abc]/.test("abcdef"));//true:只能多不能少。

• （四）范围类

console.log(/[a-b]/.test("a"));//true:不要忘记这玩意是区分大小写的。
console.log(/[0-5]/.test("6"));//false
console.log(/[0-5]|[A-W]/.test("B"));//true,,0-5或者A-W
console.log(/[A-d]/.test("d"));//true;这样写的意思为：[A-D]和[a-d]都行。

• （五）组合类

就是以上四种规则都可以混搭在一个括号里组成一个新规则“组合类”

console.log(/[a-c1-6]/.test("46s48w94645c"));//true:只要有一个匹配就返回true;不精确。
console.log(/[a-c1-6]/.test("b"));//true;
console.log(/[a-c1-6]/.test(86));//true;
console.log(/[a-c1-6]/.test(3));//true;

三、量词符

就是数量词，一个规则可以出现的次数。

符号	含义
*	重复0次或更多 (>=0)
+	重复一次或更多次 (>=1)
?	重复零次或一次（0或者1）
{n}	精确匹配n次 （x=n）
{n,}	重复n次或更多 (x>=n)
{n,m}	重复出现的次数比n多但比m少 (n<=x<=m)

所以，7+其实和7{1,}是一样的。
那么，7*其实和7{0,}是一样的。
最后，7?其实和7{0,1}是一样的

四、边界符

就是正则的开头和结尾。

符号	含义
^	会匹配行或者字符串的起始位置
$	会匹配行或字符串的结尾位置
^$	在一起 表示必须是这个（精确匹配）

注意：^在[ ]中表示非！以外表示规则的开始

开头符：^
console.log( /^\d/.test("a99") ); //false 因为这个必须数字开头。

结尾符：美元符
console.log(/\d$/.test("a99"));// true 因为这个的确是数字开头。

学一个新方法str.replace() 字符替换
此方法详解http://www.w3school.com.cn/jsref/jsref_replace.asp

\b 表示一个单词边界（而非字符）。
\B 表示非单词边界。

^ $在一起 表示必须是这个（精确匹配）
例子：

console.log(/^abc$/.test("abc"));//true;精确匹配里面的字符
console.log(/^abc$/.test("ac"));//false;少了c；
console.log(/^abc$/.test("abcabc"));//false;多了字符，不管你多了什么，反正是多啦；

实战来啦 ~~~

• 案例一 验证座机手机号

请读源代码：

    
    


    

        
        请输入！
    
    

*实战二 * ---必须输入中文名称---

难点：怎样判断是中文

利用unicode编码： /^[\u4e00-\u9fa5]$/

请看源码：

    
    


    

        
        请输入！
    

    

• 三个方法

  • 1. trim()//;去除前后的空格

    var str = " 你好 我很好！ "//;
    console.log(str)//;
    console.log(str.trim())//;

  • 2. replace(); //替换和全局替换值。

    var str = "Today is fine day,today is fine day!"
    console.log(str)//;
    console.log(str.replace(/today/ig,"tomorrow"))//;

  • 3. //search(); 给字符差索引

    var str = "abcdefg"//;
    console.log(str.search(/bc/))//;
    console.log(str.indexOf("bc"))//;

*实战三 * ---注册框验证---

注册框验证

读源码:

    
    






    

        QQ输入正确的QQ号码

        手机输入13位手机号码

        邮箱输入正确邮箱

        座机输入您的座机

        账号亲输入您的账号

        密码请输入您的密码

        

    

• 封装trim()方法