好程序員web前端培訓分享JavaScript學習筆記之正則

  好程序員web前端培訓分享JavaScript學習筆記之正則,正則表達式,又名 “規則表達式”
  由我們自己來書寫 “規則”,專門用來檢測 字符串 是否符合 “規則” 使用的
  我們使用一些特殊的字符或者符號定義一個 “規則公式”,然後用我們定義好的 “規則公式” 去檢測字符串是不是合格
var reg = /d+/var str1 = '123'var str2 = 'abc'console.log(reg.test(str1)) // trueconsole.log(reg.test(str2)) // false
上面的變量 reg 就是定製好的規則
檢測 str1 這個字符串的時候,符合規則
檢測 str2 這個字符串的時候,不符合規則
創建一個正則表達式
想制定 “規則”,必須要按照人家要求的方式來制定
把一些字母和符號寫在 // 中間的東西,叫做正則表達式,比如 /abcdefg/
創建正則表達式有兩個方式 字面量 和 構造函數創建
字面量創建
// 下面就是字面量創建一個正則表達式var reg = /abcdefg/
這個正則表達式就可以去檢測字符串了
構造函數創建
// 下面就是構造函數創建一個正則表達式var reg = new RegExp('abcdefg')console.log(reg) // /abcdefg/
使用構造函數方式創建的和字面量創建的,得到的結果一樣
正則表達式裏面的符號
知道了怎麼創建一個正則表達式以後,我們就來詳細的說一下正則表達式裏面涉及到的一些符號了
元字符
. : 匹配非換行的任意字符
 : 轉譯符號,把有意義的 符號 轉換成沒有意義的 字符,把沒有意義的 字符 轉換成有意義的 符號
s : 匹配空白字符(空格/製表符/...)
S : 匹配非空白字符
d : 匹配數字
D : 匹配非數字
w : 匹配數字字母下劃線
W : 匹配非數字字母下劃線

有了元字符我們就可以簡單的制定一些規則了
var reg = /s/var str = 'a b'var str2 = 'ab'console.log(reg.test(str)) // trueconsole.log(reg.test(str2)) // falsevar reg = /d/var str = 'abc1'var str2 = 'abc'console.log(reg.test(str)) // trueconsole.log(reg.test(str2)) // falsevar reg = /w/var str = 'a1'var str2 = '#@$'console.log(reg.test(str)) // trueconsole.log(reg.test(str2)) // false
限定符
* : 前一個內容重複至少 0 次,也就是可以出現 0 ~ 正無窮 次
+ : 前一個內容重複至少 1 次,也就是可以出現 1 ~ 正無窮 次
? : 前一個內容重複 0 或者 1 次,也就是可以出現 0 ~ 1 次
{n} : 前一個內容重複 n 次,也就是必須出現 n 次
{n,} : 前一個內容至少出現 n 次,也就是出現 n ~ 正無窮 次
{n,m} : 前一個內容至少出現 n 次至多出現 m 次,也就是出現 n ~ m 次

限定符是配合元字符使用的
// 下面正則表示驗證數字出現 0 ~ 正無窮次都可以var reg = /d*/var str = 'abc'var str2 = 'abc1'var str3 = 'abc123'console.log(reg.test(str)) // trueconsole.log(reg.test(str2)) // trueconsole.log(reg.test(str3)) // true// 下面正則表示驗證數字出現 1 ~ 正無窮次都可以var reg = /d+/var str = 'abc'var str2 = 'abc1'var str3 = 'abc123'console.log(reg.test(str)) // falseconsole.log(reg.test(str2)) // trueconsole.log(reg.test(str3)) // true// 下面正則表示驗證數字出現 0 ~ 1 次都可以var reg = /d?/var str = 'abc'var str2 = 'abc1'console.log(reg.test(str)) // trueconsole.log(reg.test(str2)) // true// 下面正則表示驗證數字必須出現 3 次var reg = /d{3}/var str = 'abc'var str2 = 'abc1'var str3 = 'abc123'console.log(reg.test(str)) // falseconsole.log(reg.test(str2)) // falseconsole.log(reg.test(str3)) // true// 下面正則表示驗證數字出現 3 ~ 正無窮次var reg = /d{3,}/var str = 'abc'var str2 = 'abc1'var str3 = 'abc123'var str4 = 'abcd1234567'console.log(reg.test(str)) // falseconsole.log(reg.test(str2)) // falseconsole.log(reg.test(str3)) // trueconsole.log(reg.test(str4)) // true// 下面正則表示驗證數字只能出現 3 ~ 5 次var reg = /d{3,5}/var str = 'abc'var str2 = 'abc1'var str3 = 'abc123'var str4 = 'abc12345'console.log(reg.test(str)) // falseconsole.log(reg.test(str2)) // falseconsole.log(reg.test(str3)) // trueconsole.log(reg.test(str4)) // true
邊界符
^ : 表示開頭
$ : 表示結尾

邊界符是限定字符串的開始和結束的
// 下面表示從開頭到結尾只能有數字,並且出現 3 ~ 5 次var reg = /^d{3,5}$/var str = 'abc'var str2 = 'abc123'var str3 = '1'var str4 = '1234567'var str5 = '123'var str6 = '12345'console.log(reg.test(str)) // falseconsole.log(reg.test(str2)) // falseconsole.log(reg.test(str3)) // falseconsole.log(reg.test(str4)) // falseconsole.log(reg.test(str5)) // trueconsole.log(reg.test(str6)) // true
特殊符號
() : 限定一組元素
[] : 字符集合,表示寫在 [] 裏面的任意一個都行
[^] : 反字符集合,表示寫在 [^] 裏面之外的任意一個都行
- : 範圍,比如 a-z 表示從字母 a 到字母 z 都可以
| : 或,正則裏面的或 a|b 表示字母 a 或者 b 都可以

現在我們就可以把若干符號組合在一起使用了
// 下面是一個簡單的郵箱驗證// 非_$開頭,任意字符出現至少6次,一個@符號,(163|126|qq|sina)中的任意一個,一個點,(com|cn|net)中的任意一個var reg = /^1.{6,}@(163|126|qq|sina).(com|cn|net)$/
標示符
i : 表示忽略大小寫
這個 i 是寫在正則的最後面的
/w/i
就是在正則匹配的時候不去區分大小寫

g : 表示全局匹配
這個 g 是寫在正則的最後面的
/w/g
就是全局匹配字母數字下劃線
正則表達式的方法
正則提供了一些方法給我們使用
用來檢測和捕獲字符串中的內容的
test
test 是用來檢測字符串是否符合我們正則的標準
語法: 正則.test(字符串)
返回值: boolean
console.log(/d+/.test('123')) // trueconsole.log(/d+/.test('abc')) // false
exec
exec 是把字符串中符合條件的內容捕獲出來
語法: 正則.exec(字符串)
返回值: 把字符串中符合正則要求的第一項以及一些其他信息,以數組的形式返回
var reg = /d{3}/var str = 'hello123world456你好789'var res = reg.exec(str)console.log(res)/ ["123", index: 5, input: "hello123world456你好789", groups: undefined] 0: "123" groups: undefined index: 5 input: "hello123world456你好789" length: 1 __proto__: Array(0)/
數組第 0 項就是匹配到的字符串內容
index 屬性表示從字符串的索引幾開始是匹配的到字符串
字符串的方法
字符串中有一些方法也是可以和正則一起使用的
search
search 是查找字符串中是否有滿足正則條件的內容
語法: 字符串.search(正則)
返回值 : 有的話返回開始索引,沒有返回 -1
var reg = /d{3}/var str = 'hello123'var str2 = 'hello'console.log(str.search(reg)) // 5console.log(str2.search(reg)) // -1
match
match 找到字符串中符合正則條件的內容返回
語法: 字符串.match(正則)
返回值 : 
沒有標示符 g 的時候,是和 exec 方法一樣
有標示符 g 的時候,是返回一個數組,裏面是匹配到的每一項
var reg = /d{3}/var str = 'hello123world456'var str2 = 'hello'console.log(str.match(reg)) // ["123", index: 5, input: "hello123wor456", groups: undefined]console.log(str2.match(reg)) // nullvar reg = /d{3}/gvar str = 'hello123world456'var str2 = 'hello'console.log(str.match(reg)) // ["123", "456"]console.log(str2.match(reg)) // null
replace
replace 是將字符串中滿足正則條件的字符串替換掉
語法: 字符串.replace(正則,要替換的字符串)
返回值 : 替換後的字符串
var reg = /d{3}/var str = 'hello123world456'var str2 = 'hello'console.log(str.replace(reg)) // hello666world456console.log(str2.replace(reg)) // hellovar reg = /d{3}/gvar str = 'hello123world456'var str2 = 'hello'console.log(str.replace(reg)) // hello666world666console.log(str2.replace(reg)) // hello


  1. _$
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章