正則表達(dá)式
- 描述字符串規(guī)則的表達(dá)式
- /pattern/attrs //直接量
- new RegExp(pattern,attrs) //對(duì)象構(gòu)造
/13566669999/
/jerry/i //i表示不區(qū)分大小寫
regexObj.test(str)
- 測(cè)試正則表達(dá)式與指定字符串是否匹配
/13566669999/.test('1356666999'); //false
/13566669999/.test('13566669999'); //true
/13566669999/.test('x13566668888y');//true
//test只需要這個(gè)字符串里包含了正則所描述的格式就為true
<input type = "text" onblur = "check(this)" onfocus = "reset(this)">
<script>
function check(mobileInput){
var value = mobileInput.value;
if(!/13566669999/.test(value)){
mobileInput.style.borderColor = 'red';
}
}
function reset(mobileInput){
mobileInput.style.borderColor = '';
}
</script>
錨點(diǎn)
- 匹配一個(gè)位置
- ^：起始位置 以/^http:/為起始的字符串
- $ : 匹配結(jié)尾位置 以/.jpg$/結(jié)尾的字符串
- \b : 單詞邊界 /\bis\b/
/^13566669999$/
/^13566669999$/.test('x13566669999y');//false
if(!/^13566669999$/.test(value)){
mobileInput.style.borderColor = 'red';
}
字符類
- 匹配一類字符中的一個(gè)
- . :任一字符(換行除外)
/[0-9]/.test('123')
true
/[0-9]/.test('abc')
false
/[^0-9]/.test('abc')
true
/[a-z]/.test('abc')
true
/./.test('abcd')
true
/./.test('123')
true
匹配手機(jī)號(hào)碼
/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/
/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test('13512345678')
if(!/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test(value)){
mobileInput.style.borderColor = 'red';
}
元字符
- 具有特殊意義的字符
- ^祖屏、$办成、\b
- \d:0-9數(shù)字
- \D:[^\d]非數(shù)字
- \s:空白符
- \S:[^\s]
- \w:[A-Za-z0-9_]組成單詞字符或程序中變量字符
- \W:[^\w]非單詞字符
/\d/.test('123')
true
/\d/.test('1ab')
true
/\D/.test('1ab')
true
/\D/.test('123')
false
匹配手機(jī)號(hào)碼
/^1\d\d\d\d\d\d\d\d\d\d$/
/^1\d\d\d\d\d\d\d\d\d\d$/.test('13512345678');//true
量詞
- 出現(xiàn)的次數(shù)
- {m,n}:m到n次
- *: {0,}0到任意次
- ?: {0,1}0到1次
- +: {1,}1到任意次
/\d*/.test('abc')
true
/\d+/.test('abc')
false
/\d+/.test('1abc')
true
/https?:/.test('http://www.163.com')
true
/https?:/.test('https://www.163.com')
true
/https?:/.test('httpss://www.163.com')
false
匹配手機(jī)號(hào)碼
/^1\d{10}$/
if(!/^1\d{10}$/.test(value)){
mobileInput.style.borderColor = 'red';
}
正則表達(dá)式中，量詞的貪婪模式與惰性模式有什么區(qū)別佳簸？
書寫區(qū)別：
屬于貪婪模式的量詞求晶，包括： “{m,n}”吓笙、“{m,}”映屋、“?”、“*”和“+”膊升。
在貪婪模式的量詞后加上“?”怎炊，即變成非貪婪模式的量詞，包括： “{m,n}?”廓译、“{m,}?”评肆、“??”、“*?”和“+?”非区。
含義區(qū)別：
貪婪模式——在匹配成功的前提下瓜挽，盡可能多的去匹配
惰性模式——在匹配成功的前提下，盡可能少的去匹配
舉例：第一個(gè)貪婪模式征绸，第二個(gè)是惰性模式
轉(zhuǎn)義符
- 需要匹配的字符是元字符
/^http:\/\//
/@163\.com$/
/http:\/\//.test('http://www.163.com')
true
/@163\.com/.test('abc@163.com')
false
/@163.com/.test('abc@163acom')
false
多選分支
- 或
/thi(c|n)k/ === /thi[cn]k/
//匹配圖片文件
/\.(png|jpg|jpeg|gif)$/
<label>郵箱：</label>
<input type="text" onblur="checkNetEase(this)" onfocus="reset(this)" placeholder="網(wǎng)易郵箱">
<script>
function checkNetEase(mobileInput){
var value = mobileInput.value;
if(!/^(.+)@(163|126|188)\.com$/.test(value)){
mobileInput.style.borderColor = 'red';
}
}
function reset(mobileInput){
mobileInput.style.borderColor = '';
}
</script>
捕獲
- 保存匹配到的字符串久橙，日后再用
- ()：捕獲 /^(.+)@(163|126|188).com$/
- (?:) : 不捕獲 /^(.+)@(?:163|126|188).com$/
- 使用：
- $1,$2,...
- api參數(shù)或返回值
str.match(regexp)
- 獲取匹配的字符串
var url = 'http://blog.163.com/album?id=1#comment';
//var reg = /^(https?:)\/\/([^\/]+)(\/[^\?]*)?(\?[^#]*)?(#.*)?$/;
var reg = /(https?:)\/\/([^\/]+)([^\?]*)([^#]*)(.*)/
var arr = url.match(reg);
//["http://blog.163.com/album?id=1#comment", "http:", "blog.163.com", "/album", "?id=1", "#comment", index: 0, input: "http://blog.163.com/album?id=1#comment"]
var protocol = arr[1];//協(xié)議
var host = arr[2];//主機(jī)
var pathname = arr[3];//路徑名
var search = arr[4];//搜索
var hash = arr[5];//散列
str.replace(regexp/substr,replacement)//替換
- 替換一個(gè)子串
var str = 'The price of tomato is 5.';
str.replace(/(\d+)/,'$1.00');
var str = 'The price of tomato is 5,the price of apple is 10.';
str.replace(/(\d+)/,'$1.00');
//The price of tomatoes is 5.00,the price of apple is 10.
str.replace(/(\d+)/g,'$1.00');
//The price of tomatoes is 5.00,the price of apple is 10.00.
<div id="container"></div>
<script>
var container = document.getElementById('container');
var html = '<label>網(wǎng)址：</label><input placeholder="以http://起始">';
html = html.replace(/[<>]/g,function(m0){
switch(m0){
case '<':
return '<';
case '>':
return '>';
}
});
console.log(html);
container.innerHTML = html;
</script>
regexpObj.exec(str)
- 更強(qiáng)大的檢索
- 更詳盡的結(jié)果：index
- 過(guò)程的狀態(tài)：lastIndex
var reg = /(.)(\d+)/g;
var scores = 'Tom $88,Nicholas ￥100,jack ￡38.';
var result;
while(result = reg.exec(scores)){
console.log(result);
console.log(reg.lastIndex);
}
//結(jié)果
["$88", "$", "88", index: 4, input: "Tom $88,Nicholas ￥100,jack ￡38."]0: "$88"1: "$"2: "88"index: 4input: "Tom $88,Nicholas ￥100,jack ￡38."length: 3__proto__: Array[0]
VM140:6 7
VM140:5 ["￥100", "￥", "100", index: 17, input: "Tom $88,Nicholas ￥100,jack ￡38."]
VM140:6 21
VM140:5 ["￡38", "￡", "38", index: 27, input: "Tom $88,Nicholas ￥100,jack ￡38."]
VM140:6 30
