JS正則表達式詳解

1.正則語法規則

示例：簡易郵箱匹配

var r = /[\w.-]@[\w.-]/
//或者
var r = new RegExp('[\w.-]@[\w.-]','');

var emali = '@'
console.log(r.test(emali)); //false

var emali = 'web@qq'
console.log(r.test(emali)); //true

2.重復

* 代表匹配0次或多次
+ 代表匹配1次或多次
? 代表匹配0次或1次
{n} 指定匹配次數
{n,} 匹配n次或更多
{n,m} 匹配n到m次
var r = /^[\w.]+@[\w.]+$/
r.test('web@qq.com')    //true

3.屬性flags

source          --s 正則的原始字符串形式
ignoreCase   --i 忽略大小寫
global           --g 全局匹配，匹配后不中止
multiline        --m 如果字符串有換行，按多行匹配

4.方法

1.test() 方法，測試指定字符串是否滿足對應的正則規則
2.exec() 方法，返回匹配內容等信息組成的對象
3.match() 方法，這是一個字符串的方法，與exec方法作用類似，區別是對g的解釋不通，exec方法使用g標記時需要多次遍歷，match方法回一次返回所有匹配內容
//如下:
var target = 'bg.jpg index.html app.js index.css test.jpg';
var r = /(\w+)\.jpg/g;

//match方法
console.log(target.match(r));
//結果
//(2) ["bg.jpg", "test.jpg"]

//exec方法
console.log(r.exec(target));
console.log(r.exec(target));
//結果
//(2) ["bg.jpg", "bg", index: 0, input: "bg.jpg index.html app.js index.css test.jpg", groups: undefined]
//(2) ["test.jpg", "test", index: 35, input: "bg.jpg index.html app.js index.css test.jpg", groups: undefined]

5.分組與捕獲

1.分組的用法:

//普通寫法
var r = /123123123/;
console.log(r.exec("20191231231232019"));

//分組的寫法
var r = /(123){3}/
console.log(r.exec("20191231231232019"));

//除了上面的使用場景，還可以用來做'或'匹配
var r = /hello (world|js)/;
console.log(r.test("hello world"));    //true
console.log(r.test("hello js"));    //true

2.那么什么是捕獲呢?看下面這個例子

使用了分組的表達式返回時除了匹配到的完整內容，還帶有了捕獲到哪些字符串

3.非捕獲型分組

var r = /(web) say hello (world|js)/;
console.log(r.exec("web say hello world"));
//返回值 (3) ["web say hello world", "web", "world", index: 0, input: "web say hello world", groups: undefined] 
//這里的world其實不需要捕獲，只是用來做一個或匹配的

var r = /(web) say hello (?:world|js)/;
console.log(r.exec("web say hello world"));
//返回值 (2) ["web say hello world", "web", index: 0, input: "web say hello world", groups: undefined]
//這就是非捕獲型匹配

6.貪婪匹配與惰性匹配

var str = '<span>abc</span><span>qwe</span>';
var r = /<span>.*<\/span>/;

r.exec(str);
//執行結果
["<span>abc</span><span>qwe</span>", index: 0, input: "<span>abc</span><span>qwe</span>", groups: undefined] 
//匹配了最長路徑，如果我們只想匹配到前面一部分，需要使用惰性匹配

var str = '<span>abc</span><span>qwe</span>';
var r = /<span>.*?<\/span>/;

r.exec(str);
//執行結果
["<span>abc</span>", index: 0, input: "<span>abc</span><span>qwe</span>", groups: undefined]
//在重復量詞后面加一個?，代表使用惰性匹配，盡可能短的匹配

7.正向前瞻/負向前瞻

var target = 'bg.jgp index.html app.js index.css test.jpg'
//從以上字符串中找出以jpg結尾的文件名,這里就需要用到正向前瞻了

var r = /\b(\w+)\.jpg/g;
console.log(target.match(r));
//["bg.jpg", "test.jpg"]
var r = /\b(\w+)(?=\.jpg)/g;
console.log(target.match(r));
//["bg", "test"]
//正向前瞻語法(?=) 負向前瞻語法(?!)
//正向前瞻表示必須后面跟有指定字符才算匹配成功，負向前瞻相反，必須不匹配指定字符才算匹配成功