正則之基本入門

以前看了許許多多的正則教程，收貨并不多，往往都是蜻蜓點水，一點就過。事實上，正則用處真的超級大，比如匹配innerHTML的內容，以及表單驗證，也是非他莫屬。這里，我結合js，對正則進行一個簡單的介紹吧。 如有紕漏歡迎指出，希望大家多多包涵。

js與正則的關系

在js中定義一個正則有兩種方法，一個是實例化，一個是字面量。分別看一下:

//實例化
var re = /\w+/;   //這兩者等價
//字面量
var re = new RegExp('\\w+');

如果想添加一些flags也是沒有問題的。比較常用的flag有。/i,/g,/ig,/m.

/i (忽略大小寫,ignore)
/g (全文查找出現的所有匹配字符,global)
/m (多行查找,multiLine)
/ig(全文查找、忽略大小寫,ignore+global)

所以, 使用flag之后可以這樣寫.

var reg = ^\d{5,12}\i$  ;//表示忽略大小寫,匹配;
//或者
var reg = new RegExp(^\d{5,12}\i$);

正式入門正則

正則其實就是用來匹配字符串的。他用一個簡潔表達了，完成了你需要寫很多代碼的事，就和md(markdown)語法是一個道理。 用的人多了，自然成標準，這也是規則吧。

正則預定字符

預定字符，就是用程序比較難表達的一些字符，比如回車鍵，tab鍵(通過空格來區分達到的效果).常用的有:

恩，大部分就是這幾個了。 上面提到 \r和\n，他們到底有什么卻別。 沒錯，看字面量，感覺return 不就是換行嗎？ 其實，這樣說沒錯，但是得區分系統，在Unix為擴展的系統，在每行的結尾只有"\n",而在window下則是:"\n\r"(順序不能換). 所以，為了解決系統的差異，就出現了兩種: \r || \n.所以一般，我們匹配換行需要使用.\r||\n一起使用.

var reg = /[\r\n]/g;

這樣就能保證系統的兼容性.

字符類

所謂的字符類同樣也是將你平常要花很多時間做出來的，集成為一個簡潔表達。(相當于寫庫)。常用的字符類有如下幾個。

來我們看幾個例子

console.log(/\s+/.test("     "));  //true
console.log(/\d+/.test("1234231"));  //true
console.log(/\D+/.test("  "));  //true

其他的如上。

錨字符

這個應該算是正則里面，取名最好理解的一個。使用正則就是停船一樣，你需要設置你停的位置，我也需要設置我的邊界。常用的有一下幾個:

這幾個應該算是我平常用的最多的幾個吧。如果你想匹配整個字符串，就可以組合使用"^ $";

var reg = /^\d+$/;  //匹配整個字符串為數字

量詞字符

"望文生義",這類字符使用來限定某某出現的次數的。常用的有:

這個應該不用多說了。 直接看例子吧

console.log(/^\d+$/.test("123")); //true

上面說了這么多內置的字符，那我想使用特定字符類怎么辦嘞。其實也很簡單。使用"\"轉義字符。比如我想匹配大括號."{}".我可以這樣用:

console.log(/\{.+\}/.test("{123}")); //true

console.log(/.+/.test("abcd"));  //true

console.log(/\d+?/.test("1fjkdf"));  //true

var str = "blablablabla";
console.log(str.match(/(b.*a)/g));  //["blablablabla"]

console.log(str.match(/(b.*?a)/g));  //["bla", "bla", "bla", "bla"]

正則: /\d*+/;

var reg = /[abc]/;
console.log(reg.test("a"));  //true

console.log(/[^abc]/.test("c"));  //false

\d => [0-9]
\w => [0-9a-zA-Z_]
\S => [^\t\n\x0B\f\r]  (\f標識分頁符)
...

console.log(/[\u4e00-\u9fa5]{1}/.test("艸")); //true

console.log(/(jimmy)+/.test("jimmy"));  //true

var name = "My name is Jimmy";
console.log(name.match(/(Jimmy)/g));  //["Jimmy"]

var name = "My name is Jimmy Jimy";
console.log(name.match(/(Jimm?y)/g));  //["Jimmy", "Jimy"]

var name = "My name is Jimmy sam";
var reg = /(jimmy|sam)+?/ig;
console.log(name.match(reg)); //["jimmy","sam"]

var reg = /(100)\1/;
var reg2 = /(100)(99)(101)\1\2\3/; //1=>100,2=>99,3=>101

var reg = /(100) (99)/;
var str = "100 99";
console.log(str.replace(reg,"$2 $1")); //99 100

var str=` <div class="pin">
            <div class="box">
                <img src="https://simg.open-open.com/show/d104cb79b036edf9ccaadc1d8de1766d.jpg" />
            </div>
        </div>`;
var reg = /<div(?:.|\r|\n)*div>/gi;
console.log(str.match(reg));

<div class="pin">
            <div class="box">
                <img src="https://simg.open-open.com/show/d104cb79b036edf9ccaadc1d8de1766d.jpg" />
            </div>
        </div>

<div class="pin">
            <div class="box">
                <img src="https://simg.open-open.com/show/d104cb79b036edf9ccaadc1d8de1766d.jpg" />
            </div>

var str = "happied boring";
var reg1 = /happ(?=ied)/g;
var reg2 = /bor(?!ied)/;
console.log(str.match(reg1)); //["happ"]
console.log(str.match(reg2)); //["bor"]

var str=` <div class="pin">
            <div class="box">
                <img src="https://simg.open-open.com/show/d104cb79b036edf9ccaadc1d8de1766d.jpg" />
            </div>
        </div>`;
var reg = /<(?!img)(?:.|\r|\n)*?>/gi;
console.log(str.replace(reg,""));
//得到的結果為:
<img src="https://simg.open-open.com/show/d104cb79b036edf9ccaadc1d8de1766d.jpg" />

var str = "he is an interested person";
var reg = /\b\w+(?=ed\b)/ig;
console.log(str.match(reg)); //["interest"]