一、正則表達(dá)式的基本語法

var expression = /pattern(模式)/flags(標(biāo)識符);

二、如何創(chuàng)建正則表達(dá)式

1.字面量創(chuàng)建

代碼如下：

//匹配字符串中所有“at”的實例
var e = /at/g;
//匹配第一個“bat”或“cat”,不區(qū)分大小寫
var e = /[bc]at/i;

2.RegExp構(gòu)造函數(shù)創(chuàng)建

RegExp構(gòu)造函數(shù)接收兩個參數(shù)，第一個參數(shù)是要匹配的字符串模式，第二個是可選的標(biāo)識符字符串。 代碼如下：

//匹配第一個“bat”或“cat”,不區(qū)分大小寫
var e = new RegExp("[bc]at","i");

兩種創(chuàng)建方式的比較：

在ECMAScript3中，字面量創(chuàng)建和RegExp對象創(chuàng)建區(qū)別是：字面量創(chuàng)建始終會共享同一個RegExp實例，而構(gòu)造函數(shù)創(chuàng)建的每一個RegExp實例都是一個新實例 ECMAScript5明確規(guī)定：使用正則表達(dá)式字面量必須像直接調(diào)用RegExp構(gòu)造函數(shù)一樣，每次都創(chuàng)建新的RegExp實例。IE9+、Firefox 4+和Chrome都做出了修改。

需要注意的是，正則表達(dá)式中的元字符必須轉(zhuǎn)義。元字符有：

( [ { \ ^ $ | ) ? * + . ] }

例如：

//匹配第一個“[bc]at”,不區(qū)分大小寫
var e = /\[bc\]at/i;
//在RegExp構(gòu)造函數(shù)創(chuàng)建時，元字符需要雙重on轉(zhuǎn)義
var e = new RegExp("\\[bc\\]at","i");

三、RegExp實例的屬性和方法

RegExp 實例屬性

• ignoreCase 返回布爾值，表示RegExp對象是否具有標(biāo)志 i
• global 返回布爾值，表示RegExp對象是否具有表示 g
• multiline 返回布爾值，表示RegExp對象是否具有表示 m
• lastIndex 一個整數(shù)，標(biāo)識開始下一次匹配的字符位置
• soure 返回正則表達(dá)式的原文本 （不包括反斜杠）
• i 執(zhí)行對大小寫不敏感的匹配
• g 執(zhí)行全局匹配 （查找所有匹配而非在找到第一個匹配后停止）
• m 執(zhí)行多行匹配

字符類匹配

• [...]查找方括號之間的任何字符
• [^..]查找任何不在方括號之間的字符
• [a-z]查找任何從小寫a到小寫z的字符
• [A-Z]查找任何從大寫A到大寫Z的字符
• [A-z]查找任何從大寫A到小寫z的字符
• . 查找單個字符，除了換行和行結(jié)束符
• \w 查找單詞字符，等價于 [a-zA-Z0-9]
• \W 查找非單詞字符，等價于 [^a-zA-Z0-9]
• \s 查找空白字符
• \S 查找非空白字符
• \d 查找數(shù)字，等價于[0-9]
• \D 查找非數(shù)字字符，等價于[^0-9]
• \b 匹配單詞邊界
• \r 查找回車符
• \t 查找制表符
• \0 查找NULL字符
• \n 查找換行符

重復(fù)字符匹配

• {n,m}匹配前一項至少n次，但不能超過m次
• {n,}匹配前一項n次或更多次
• {n}匹配前一項n次
• n?匹配前一項0次或者1次，也就是說前一項是可選的，等價于{0,1}
• n+匹配前一項一次或多次，等價于{1,}
• n*匹配前一項0次或多次，等價于{0，}
• n$匹配任何結(jié)尾為n的字符串
• ^n匹配任何開頭為n的字符串
• ？=n匹配任何其后緊接指定字符串n的字符串
• ?!n匹配任何其后沒有緊接指定字符串n的字符串

匹配特定數(shù)字

• ^[1-9]\d*$ 匹配正整數(shù)
• ^-[1-9]\d*$ 匹配負(fù)整數(shù)
• ^-?[0-9]\d*$ 匹配整數(shù)
• ^[1-9]\d*|0$ 匹配非負(fù)整數(shù)（正整數(shù) + 0）
• ^-[1-9]\d*|0$ 匹配非正整數(shù)（負(fù)整數(shù) + 0）
• ^[1-9]\d*.\d*|0.\d*[1-9]\d*$ 匹配正浮點數(shù)
• ^-([1-9]\d*.\d*|0.\d*[1-9]\d*)$ 匹配負(fù)浮點數(shù)
• ^-?([1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0)$ 匹配浮點數(shù)
• ^[1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0$ 匹配非負(fù)浮點數(shù)（正浮點數(shù) + 0）
• ^(-([1-9]\d*.\d*|0.\d*[1-9]\d*))|0?.0+|0$ 匹配非正浮點數(shù)（負(fù)浮點數(shù) + 0）

四、正規(guī)則表達(dá)式有哪些方法？

1.exec()方法

exec()方法為模式的捕獲組而設(shè)計的，該方法接收一個參數(shù)，即要匹配的字符串，該方法返回一個包含捕獲組的數(shù)組Array,如果沒有捕獲組匹配返回null。返回的數(shù)組Array中，第一項是與整個模式匹配的字符串，其他項是與模式中的捕獲組匹配到的字符串。數(shù)組Array中還有兩個參數(shù)input(返回要匹配的字符串)，index(返回匹配項在字符串中的位置) 模式中的捕獲組就是指圓括號中的字符串。

例如：

var e = /do(es)(d)?/;
e.exec("ssdoesdo");
/**
array[0]:"doesd",
array[1]:"es",
array[2]:"d",
index:2,
input:"ssdoesdo"
**/

例子中，模式中包含兩個捕獲組”es”、”d”，即圓括號中的字符串。

2.test()方法

test()方法檢索字符串中指定的值，該方法接收一個參數(shù)，如果字符串中含有與模式匹配的文本則返回true，否則返回false。

例如：

var e = /do(es)?/;
e.test("doesdo");
//true

如果正則表達(dá)式中帶有g(shù)標(biāo)識符,則每一次調(diào)用test方法和exec方法都從上一次匹配結(jié)束位置開始匹配；如果正則表達(dá)式中沒有g(shù)標(biāo)識符，則每次調(diào)用方法都從字符串起始位置開始匹配。

例如：

var e = /do(es)?/g;
e.exec("ssdoesdoesdoes");
/*
array[0]:"does",
array[1]:"es",
index:2,
input:"ssdoesdoesdoes"
*/
e.exec("ssdoesdoesdoes");
/*
array[0]:"does",
array[1]:"es",
index:6,
input:"ssdoesdoesdoes"
*/

var e = /do(es)?/g;
console.log(e.test("ssdoesdoesdoes"));
console.log(e.lastIndex);
//true
//6
console.log(e.test("ssdoesdoesdoes"));
console.log(e.lastIndex);
//true
//10
console.log(e.test("ssdoesdoesdoes"));
console.log(e.lastIndex);
//true
//14

var e = /do(es)?/;
console.log(e.test("ssdoesdoesdoes"));
console.log(e.lastIndex);
//true
//0
console.log(e.test("ssdoesdoesdoes"));
console.log(e.lastIndex);
//true
//0

五、常用的幾種正則校驗表達(dá)式

1.匹配手機號

/^1[34578]\d{9}$/

2.匹配正整數(shù)

/^[0-9]\d*$/

3.匹配ip地址

/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/

4.匹配郵箱

/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/

5.匹配身份證

/^(\d{14}|\d{17})(\d|[xX])$/

其他：

el-input中不允許輸入特殊字符

const handleInput = (data: any) => {
    data.name = data.name.replace(
        /[-~#（）|【-】· (){}+=*^&%$@!.,，。<>;:：；‘'“”、'"?`\\/\\]/g,
        '',
    );
};

總結(jié) 

到此這篇關(guān)于VUE正則表達(dá)式的文章就介紹到這了,更多相關(guān)VUE正則表達(dá)式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論