RegExp

正则表达式

• 描述字符串规则的表达式
  • /pattern/attrs //直接量
  • new RegExp(pattern,attrs) //对象构造

/13566669999/
/jerry/i //i表示不区分大小写

regexObj.test(str)

• 测试正则表达式与指定字符串是否匹配

/13566669999/.test('1356666999'); //false
/13566669999/.test('13566669999'); //true
/13566669999/.test('x13566668888y');//true
//test只需要这个字符串里包含了正则所描述的格式就为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>

锚点

• 匹配一个位置
  • ^：起始位置 以/^http:/为起始的字符串
  • $ : 匹配结尾位置 以/.jpg$/结尾的字符串
  • \b : 单词边界 /\bis\b/

/^13566669999$/
/^13566669999$/.test('x13566669999y');//false

if(!/^13566669999$/.test(value)){
     mobileInput.style.borderColor = 'red';
}

字符类

• 匹配一类字符中的一个
  • . :任一字符(换行除外)

/[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

匹配手机号码

/^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数字
  • \D:[^\d]非数字
  • \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

匹配手机号码

/^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

量词

• 出现的次数
  • {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

匹配手机号码

/^1\d{10}$/

if(!/^1\d{10}$/.test(value)){
     mobileInput.style.borderColor = 'red';
}

正则表达式中，量词的贪婪模式与惰性模式有什么区别？

书写区别：
属于贪婪模式的量词，包括： “{m,n}”、“{m,}”、“?”、“*”和“+”。

在贪婪模式的量词后加上“?”，即变成非贪婪模式的量词，包括： “{m,n}?”、“{m,}?”、“??”、“*?”和“+?”。

含义区别：
贪婪模式——在匹配成功的前提下，尽可能多的去匹配
惰性模式——在匹配成功的前提下，尽可能少的去匹配
举例：第一个贪婪模式，第二个是惰性模式

转义符

• 需要匹配的字符是元字符

/^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="网易邮箱">
<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参数或返回值

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];//协议
var host = arr[2];//主机
var pathname = arr[3];//路径名
var search = arr[4];//搜索
var hash = arr[5];//散列

str.replace(regexp/substr,replacement)//替换

• 替换一个子串

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>网址：</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)

• 更强大的检索
  • 更详尽的结果：index
  • 过程的状态：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);
}
//结果
["$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