正则表达式介绍

1 正则表达式介绍

在JavaScript中，正则表达式是一个用来 匹配 的 并包含 元字符或普通字符 的字符串对象。

在JavaScript中，正则表达式是对象。

• 使用正则表达式的目的：提高效率

1.1 正则表达式的作用

• 1 匹配
• 2 提取
• 3 替换

1.2 识别正则表达式

"123" "abc" "just do IT"

1.3 元字符

• 在正则表达式中具有特殊意义的专用字符

• x|y：匹配 x 或 y。注意：|的优先级最低
• 贪婪模式: 尽量多的去匹配

? 的其他用处：
范围匹配在正则中都是默认的贪婪模式
添加 ? 表示取消贪婪模式（跟在次数限定字符后面）

取消了贪婪模式之后，就会尽量少的匹配

2 使用正则表达式

2.1 创建正则表达式

• 语法

// 1 对象形式
var r = new RegExp("正则表达式");
var r = new RegExp(/正则表达式/);

// 2 字面量形式
var r = /正则表达式/;

• 案例：从字符串 "abcdefgh" 中找出 "e" 的位置

// 不使用正则
var str = "abcdefgh";
for(var i = 0; i < str.length; i++) {
    if(str.charAt(i) === "e") {
        break;
    }
}
console.log(i);

// 使用正则表达式 实现相同功能
var str = "abcdefgh";
var r = new RegExp("e");
var o = r.exec(str);

// index 表示匹配到的字符在字符串中的索引号
console.log(o.index);

2.2 正则表达式常用方法

2.2.1 exec方法

作用：
为指定的一段字符串执行搜索匹配操作，将符合规则的字符串提取出来

语法：
var m = r.exec(被匹配的字符串);

返回值m，是一个数组, 如果没有匹配到，就返回 null

索引 0 :表示 正则表达式匹配的字符串
input： 表示被匹配的整个字符串

• 练习：从字符串 "abcdefgh" 中找出 "ef" 的位置

var str = "abcdefghij";
var r = new RegExp("ef");
var o = r.exec(str);
console.log(o.index);

2.2.2 全局模式

• 循环查找案例：

从字符串 "abcdefghabcdefghabcdefgh" 中找出所有 "e" 的位置

var str = "abcdefghabcdefghabcdefgh";
var retArr = [];
var index = -1;

do {
    index = str.indexOf("e", index + 1);
    if(index !== -1) {
        retArr.push(index);
    }
} while(index !== -1);

• 全局模式标记：g （global）

作用：只在循环多次匹配中起作用

补充 exec 的说明
在 exec 的方法中有一个规定：
同一个 正则表达式对象 如果开启了全局模式，
每调用一次 exec 方法就会继续查找下一个字符,
直到最后找不到 返回 null

var str = "abcdefghabcdefghabcdefgh";
// 使用全局匹配模式
var r = new RegExp("e", "g"); // r = /e/g;
var arr = [], m;
while((m = r.exec(str)) !== null) {
    arr.push(m.index);
}
console.log(arr);

• 练习：从字符串 "abcabcabc" 中找出所有 "bc" 的位置

2.3 正则表达式-分组

• 案例：解析邮箱字符串："[email protected], [email protected], [email protected]"

利用 exec 方法提取到的结果是一个数组类型的对象，里面包含一些有用的信息。

在正则表达式中使用 圆括号 来分组, 分组后匹配到的结果可以直接获取对应的部分

var r = /([a-zA-Z0-9]+)@([a-zA-Z0-9\.]+)/g;
var m, arr = [], str = "[email protected], [email protected], [email protected]";
while((m = r.exec(str)) !== null) {
    arr.push({user: m[1], host: m[2]});
}
console.log(arr);

2.3.1 分组技巧

1 从左往右数 (
2 从 1 开始给 ( 编号
那么匹配的结果对应的 下标 就是该圆括号分的的内容

• 练习: "(a(b(c)))" 有哪几组？

var str = "abc";
var r = /(a(b(c)))/;
var m = r.exec(str);
console.log(m);

• 注意点：分组可以捕获也可以不被捕获

如果希望分组不捕获，在分组的圆括号里面的开始加上 ?:，即：(?:)
比如：/(?:2b)+/ 希望 "2b" 重复出现

2.4 转义字符

在 正则中有很多的元字符, 如果要匹配元字符，需要使用转义字符

使用 构造函数 创建正则表达式的语法，要注意：
var r = new RegExp("\\."); // 两个反斜线表示一个反斜线
var r = /\./;

2.5 正则表达式-替换

2.5.1 字符串的 replce 方法-替换

• 语法

新字符串 = 字符串.replace(匹配字符串, 替换字符串);
新字符串 = 字符串.replace(正则表达式, 替换字符串);

• 示例（基本用法）

var str = "123";
var newStr = str.replace("1", "a");
console.log(newStr); //

• 示例（正则用法）

var str = "123";
var newStr = str.replace(/\d/, "a");
console.log(newStr); // 

// 开启全局模式
var newStr = str.replace(/\d/g, "a");
alert(newStr); //

• 案例：去掉空格 " #div, .cls div , span " 为："#div,.cls div,span"

var str = "   #div,    .cls div ,   span  ";
var newStr = str
    .replace(/^\s+|\s+$/g, "")
    .replace(/\s+/g, " ")
    .replace(/,\s/g, ",")
    .replace(/\s,/g, ",");
console.log("|" + newStr + "|");

2.5.2 字符串的 replce 方法-组引用

• 案例：将日期 "1995-1-1" 修改为："1995年1月1号"

var str = "1995-1-1";
var newStr = str.replace(/(\d+)\-(\d+)\-(\d+)/, "$1年$2月$3日");
console.log(newStr);