正则表达式

分类

1. 元字符

   字符	含义
   \t	水平制表符
   \r	回车符
   \n	换行符
   \f	换页符
   \v	垂直制表符
   \0	空字符

2. 字符类
   使用元字符 [] 构建一个简单的类，例如 [abcd] 代表一个字符，这个字符可以是 abcd 四个字符中的任意一个

3. 取反
   使用元字符 ^ 创建反向类/负向类，例如 [^abc] 表示一个不是字符 a 或 b 或 c 的字符

4. 范围类

    // 匹配一个字符，这个字符可以是0-9中的任意一个
    var reg1 = /[0123456789]/
   
    // 匹配一个字符，这个字符可以是0-9中的任意一个
    var reg2 = /[0-9]/
   
    // 匹配一个字符，这个字符可以是a-z中的任意一个
    var reg3 = /[a-z]/
   
    // 匹配一个字符，这个字符可以是大写字母、小写字母、数字中的任意一个
    var reg3 = /[a-zA-Z0-9]/
   

5. 预定义类

   字符	等价类	含义
   .	[^\r\n]	除了回车符和换行符之外的所有字符
   \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]	非单词字符

6. 边界

   字符	含义
   ^	以xxx开头
   $	以xxx结尾
   \b	单词边界
   \B	非单词边界

7. 量词

   字符	含义
   ?	出现零次或一次（最多出现一次）
   +	出现一次或多次（至少出现一次
   *	出现零次或多次（任意次）
   {n}	出现n次
   {n,m}	出现n到m次
   {n,}	至少出现n次

8. 贪婪模式与非贪婪模式
   贪婪模式：量词在默认下会尽可能多的匹配

     '123456789'.match(/\d{3,5}/g); //["12345", "6789"]
   

   非贪婪模式：让正则表达式尽可能少的匹配，在量词后加上?

     '123456789'.match(/\d{3,5}?/g); //["123", "456", "789"]
   

9. 分组
   使用 () 可将字符作为整体进行匹配

     /(hunger){10}/  // 匹配hunger出现10次的字符
   

     var reg1 = /hello|world/
     // 等同于
     var reg2 = /(hello)|(world)/
   

10. 分组嵌套

      var str = '"饥人谷"'
      var reg = /href="((https?:)?\/\/.+?)"/
      console.log(str.match(reg)) // ["href="http://jirengu.com"", "http://jirengu.com", "http:"]
      var url = str.match(reg)[1]
    

11. 前瞻

    表达式	含义
    exp1(?=exp2)	匹配后面是exp2的exp1
    exp1(?!exp2)	匹配后面不是exp2的exp1

---

练习

\d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^,$分别是什么?

\d 匹配数字字符
\w 匹配单词字符，字母、数字下划线，与 [a-zA-Z_0-9]
\s 匹配空白符
[a-zA-Z0-9] 匹配单词字符，字母和数字
\b 匹配单词边界
. 匹配除了回车符和换行符之外的所有字符
* 匹配出现零次或多次（任意次）的字符
+ 匹配出现一次或多次（至少出现一次）的字符
? 匹配出现零次或一次（最多出现一次）的字符
x{3} 匹配出现n次的字符x
^ 元字符 ^ 会创建反向类，类似于 js 中的 ! 逻辑运算符
$ 匹配以xxx结尾的字符

写一个函数trim(str)，去除字符串两边的空白字符

  function trim(str){
    return str.replace(/^\s+|\s+$/g, '')
  }

写一个函数isEmail(str)，判断用户输入的是不是邮箱

  function isEmail(str){
    var reg = /\w+@\w+\.{1}\w+/g
    return reg.test(str)
  }

写一个函数isPhoneNum(str)，判断用户输入的是不是手机号

  function isPhoneNum(str){
    var reg = /^1\d{10}$/g
    return reg.test(str)
  }

写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）

  function isValidUsername(str){
    var reg = /[a-zA-Z_0-9]{6,20}/g
    return reg.test(str)
  }

写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，只包括大写字母、小写字母、数字、下划线，且至少至少包括两种）

function isValidPasswoed(str){
  if (!/^\w{6,20}$/.test(str)) return false;
  if (/^[A-Z]{6,20}$/.test(str)) return false;
  if (/^[a-z]{6,20}$/.test(str)) return false;
  if (/^_{6,20}$/.test(str)) return false;
  return true;
}

写一个正则表达式，得到如下字符串里所有的颜色

var re = /*正则...*/
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee "
console.log( subj.match(re) )  // ['#121212', '#AA00ef']

var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee "
var re = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})(?=;)/g
console.log(subj.match(re)) // => ["#121212", "#AA00ef"]

下面代码输出什么? 为什么? 改写代码，让其输出[""hunger"", ""world""].

var str = 'hello  "hunger" , hello "world"';
var pat =  /".*"/g;
str.match(pat); // => [""hunger" , hello "world""]

var str = 'hello  "hunger" , hello "world"';
var pat =  /"[^\r\n\s]*"/g;
str.match(pat); // => [""hunger"", ""world""]