正则表达式总结

什么是正则表达式

• 正则表达式(Regular Expression)是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。

正则表达式

• 描述字符串规则的表达式
  • 直接量
    • /12345/
    • /yym/i
  • var reg = new RegExp
• RegExp实例对象有五个属性
  • g:global：是否全局搜索，默认是false
  • i:ignoreCase：是否大小写敏感，默认是false
  • m:multiline：多行搜索，默认值是false
  • lastIndex：是当前表达式模式首次匹配内容中最后一个字符的下一个位置，每次正则表达式成功匹配时，lastIndex属性值都会随之改变
  • source：正则表达式的文本字符串

regexObj.test(str)

• 测试字符串参数中是否存正则表达式模式，如果存在则返回true，否则返回false

var reg = /\d+\.\d{1,2}$/g;

reg.test('123.45'); //true
reg.test('0.2'); //true

reg.test('a.34'); //false
reg.test('34.5678'); //false

/1352648/.test('1352648')  //true
/1352648/.test('13526478')  //false
/1352648/.test('x1352648y')  //true 为什么是true呢?
/^1352648$/.test('x1352648y')   //false

看一个示例:

//获取焦点
<input type="text" onblur="check(this)" onfocus="reset(this)">
<script>
    function check(mobileInput){
        //用户输入的值
        var value = mobileInput.value;
        //判断是否等于用户输入的值
        if(!/13566668888/.test(value)){
            mobileInput.style.borderColor = 'red';
        }
    }

    function reset(mobileInput){
        mobileInput.style.borderColor = '';
    }
</script>

---

锚点(边界)

• 匹配一个位置
  • ^ :起始位置
  • $ :结尾位置
  • \b :单词边界
  • \B :非单词边界

/^http:/.test("http://www.163.com")  //true
/^http:/.test("ahttp://www.163.com")  //false
/^http:/.test("ht//www.163.com")  //false

/\.jpg$/.test('a.jpg')  //true
/\.jpg$/.test('a.jpg abc')  //false

  //单词边界就是看起来像一个独立的单词
/\bis\b/.test('this')  //false is没有边界
/\bis\b/.test('that is yym')  //true is有单词边界
('that is yym').match(/\bis\b/)  //["is", index: 5, input: "that is yym"]
('this').match(/\bis\b/)  //null

question:
var str = 'header clearfix active header-fixed'
str.match(/(^|\s)header($|\s)/g)    //["header "]

看一个示例

<input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
<script>
    function check(mobileInput){
        var value = mobileInput.value;
        //和上面示例的区别多了锚点^ $,测试开头和结尾
        if(!/^13566668888$/.test(value)){
            mobileInput.style.borderColor = 'red';
        }
    }

    function reset(mobileInput){
        mobileInput.style.borderColor = '';
    }
</script>

---

字符类

• 匹配一类字符中的一个
  • [abc]: a或b或c
  • [0-9]: 一个数字
    • [^0-9]:非数字的一个字符,^写在[]表示非
  • [a-z]: 一个字母
  • . : 点号任一字符(换行除外)
• 使用元字符[]来构建一个简单的类

/[0-9]/.test('123')  //true
/[0-9]/.test('123ab')  //true
/[0-9]/.test('abc')  //false
/[^0-9]/.test('abc')  //true

/[a-z]/.test("abc")  //true
/[a-z]/.test("123")  //false

/./.test("123abc")  //true
/./.test("%%$$&&**")  //true

学了字符类,我们看看我们上面你的例子怎么写

<input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
<script>
    function check(mobileInput){
        var value = mobileInput.value;
        //这样我们就可以测试用户输入的任意数字了,但是是不是太多了?
        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';
        }
    }

    function reset(mobileInput){
        mobileInput.style.borderColor = '';
    }
</script>

---

元字符

• ^ $ .

字符	等价类	含义
\d	[0-9]	数字字符
\D	[^0-9]	非数字字符
\s	[\t\n\x0B\f\r]	空白符
\S	[^\t\n\x0B\f\r]	非空白符
\w	[a-zA-Z_0-9]	单词字符，字母、数字下划线
\W	[^a-zA-Z_0-9]	非单词字符

/\d/.test("123")  //true
/\d/.test("123abc")  //true
/\D/.test("123abc")  //true
/\D/.test("123")  //false
/\s/.test('\t')  //true
/\s/.test('   ')  //true
/\s/.test('123abc')  //false
/\S/.test('\t')  //false
/\S/.test('abc123')  //true
/\S/.test('$%^&')  //true
/\w/.test('$%^')  //false
/\w/.test('ABaz')  //true
/\w/.test('123')  //true
/\W/.test('123')  //false
/\W/.test('$%^')  //true

看上一个例子,又可以变成下面这样:

<input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
<script>
    function check(mobileInput){
        var value = mobileInput.value;
        //用元字符/\d/来表示数字,简单了一些
        if(!/^1\d\d\d\d\d\d\d\d\d\d$/.test(value)){
            mobileInput.style.borderColor = 'red';
        }
    }

    function reset(mobileInput){
        mobileInput.style.borderColor = '';
    }
</script>

---

量词

• 出现的次数

字符	含义
?	出现零次或一次（最多出现一次）
+	出现一次或多次（至少出现一次）
*	出现零次或多次（任意次）
{n}	出现n次
{n,m}	出现n到m次
{n,}	至少出现n次

/\d*/.test("abc")  //true
/\d+/.test("abc")  //false
/\d+/.test("abc1")  //true
/https?:/.test("http://www.163.com")  //true
/https?:/.test("https://www.163.com")  //true
/https?:/.test("httpsss://www.163.com")  //false

上面那个例子,学了量词,又能写成什么样子呢?

<input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
<script>
    function check(mobileInput){
        var value = mobileInput.value;
        //使用量词,代码少了
        if(!/^1\d{10}$/.test(value)){
            mobileInput.style.borderColor = 'red';
        }
    }

    function reset(mobileInput){
        mobileInput.style.borderColor = '';
    }
</script>

---

chrome测试
chrome测试
chrome测试

---

global(全局)

/./g

转义符

• \

多选分支(或)

• |

/thi(c|n)k/   ===   /thi[cn]k/
/\.jpg|png|jpeg|gif/    //可选jpg结尾的图片格式,也可以是png和其它两种
/(.+)@(163|126|188)\.com$/    //网易邮箱163或126或188都可以

捕获(分组)

• 保存匹配到的字符串,日后再用
• () : 捕获
• (?:) : 不捕获

我们希望使用量词的时候匹配多个字符，而不是像上面例子只是匹配一个，比如希望匹配Byron出现20次的字符串，我们如果写成 Byron{20} 的话匹配的是Byro＋n出现20次

Byron{20}

怎么把Byron作为一个整体呢？使用()就可以达到此目的，我们称为分组

(Byron){20}

str.search(reg)

• search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串
• search() 方法不执行全局匹配，它将忽略标志g，它同时忽略正则表达式对象的lastIndex属性，并且总是从字符串的开始进行检索，这意味着它总是返回字符串的第一个匹配的位置

'a1b2c3'.search(/\d/g); //1
'a1b2c3'.search(/\d/); //1

str.match(RegExp)

• 获取匹配的字符串

var url = 'http://blog.163.com/album?id=1#comment';
    var arr = url.match(/(https?:)\/\/([^\/]+)(\/[^\?]*)?(\?[^#]*)?(#.*)?/);
    // var arr = url.match(/(https?:)\/\/([^\/]+)([^\?]*)([^#]*)(.*)/);
    console.log(arr);

str.replace(regexp,replacement)

• 替换一个字符串

'abcabcabc'.replace('bc','X'); //aXabcabc
'abcabcabc'.replace(/bc/g,'X'); //aXaXaX
'abcaBcabC'.replace(/bc/gi,'X'); //aXaXaX

str.split(reg)

• 使用split方法把字符串分割为字符数组

'a,b,c,d'.split(','); //["a", "b", "c", "d"]
'a1b2c3d'.split(/\d/); //["a", "b", "c", "d"]