1.正則的概念
? ? JS誕生的目的是什么桑李?
? ? 就是為了做表單驗證踱蛀。
?? ?在JS未出現(xiàn)以前,表單的信息驗證需要傳輸給后臺贵白,讓后臺做數(shù)據(jù)驗證處理之后率拒,再返回給前端頁面處理的結果。在帶寬有限的情況下禁荒,整個驗證過程非常復雜猬膨,且耗時。
? ? 在使用JS做驗證的過程中呛伴,一個簡單的驗證規(guī)則的實現(xiàn)非常的麻煩勃痴。
?? ?如:從雜亂的字符串中找數(shù)字
? ? var str =?"asd68asd687as6da78sd123123zcacas"
?? ?var linshi='';
?? ?var arr=[]
?? ?for(var i = 0 ; i < str .length ; i ++){
? ? ?? ?if(str.charAt(i)>=0&&str.charAt(i)<=9){
? ? ? ? ?? ?linshi+=str.charAt(i)
? ? ?? ?}else{
? ? ? ? ?? ?if(linshi!=''){
? ? ? ? ? ? ?? ?arr.push(linshi) ? ??
? ? ? ? ?? ?}
? ? ?? ?}
?? ?}
?? ?if(linshi!=''){
? ?? ?? arr.push(linshi) ? ??
?? ?}
?? ?console.log(arr)
? ? 如果使用正則的方式:
? ? var arr = str.match(/\d+/g);
? ?就可以完成功能
?? ?什么是正則?
? ? 正則表達式(regular expression)是一個描述字符規(guī)則的對象热康≌僭牛可以用來檢查一個字符串是否含有某個字符,將匹配的字符做替換或者從某個字符串中取出某個條件的子串等褐隆。
? ? 正則表達式:
?? ?正則表達式其實就是一種規(guī)則污它,其實把正則稱作規(guī)則表達式更為恰當。正則的語法基于一種古老的perl語言庶弃。
? ? 為什么要用正則:
? ? 前端往往有大量的表單數(shù)據(jù)校驗工作衫贬,采用正則表達式會使得數(shù)據(jù)校驗的工作量大大減輕。常用效果:郵箱歇攻,手機號固惯,身份證號等(使用熟練的情況下)
? ? 正則的使用理念:
? ? 任何程序都可以不用正則表達式寫出來,但根據(jù)懶人原則缴守,怎么做不言而喻葬毫。
2.創(chuàng)建方式
? ? 正則的創(chuàng)建方式:
? ? 1.構造函數(shù)方式
?? ?? ? var reg1 = new?RegExp("a");
?? ?? ? var str =?"adassdfsd";
?? ?? ? console.log(str.match(reg1))?? ?? ? //輸出匹配a的字符
? ? 2.字面量方式,古老的perl語言風格
?? ?? ? var reg2 = /a/;
?? ?? ? console.log(str2.match(reg2));? ? ? //輸出匹配a的字符
?? ?? / / 是正則表達式的標識符
?? ?? " " 是字符串的標識符
?? ?? [ ] 是數(shù)組的標識符
?? ?? { } 是對象的標識符
? ? 正則中的修飾符屡穗,寫在正則表達式后面/的后面:
? ? g表示全局匹配贴捡,查找所有
? ? i表示忽略大小寫
? ? 課程目標:郵箱的規(guī)則
?? ?? ? 數(shù)字+英文+@+英文+.+英文
? ? 正則的驗證:
? ? var reg = /[0-9]/;
? ? reg.test(str)? ? //返回為true表示驗證成功,false表示失敗
4.字符串.replace(oldstr, newstr)函數(shù) 和 字符串.match(正則)函數(shù)
? ?字符串的replace函數(shù)的功能:將老字符串替換成新字符串
? ?可以利用此函數(shù)村砂,將老字符串表示成正則表達式烂斋,對字符串進行替換
? ? 如:字符串中的abc替換成“哈哈”,如果正則后面沒有g,則只替換一個汛骂,如果沒有i罕模,則大寫不會替換
? ? var str =?“abc123abc456abbcdABCefaacbcdbcabc";
?? var reg = /abc/g;
? ? console.log(str.replace(reg,"哈哈"));
? ??字符串match函數(shù)的功能:提取所有的想要的東西
? ? 返回一個數(shù)組,包含所有符合條件的字符
? ?\d? ? 匹配所有的數(shù)字
? ? var reg = /\d/g;
? ? console.log(str.match(reg))? ? //打印字符串中所有的數(shù)字
+? ? ?若干帘瞭,量詞淑掌,表示多少個都可以,至少1個蝶念,無上限
? ? var reg = /\d+/g;
? ? console.log(str.match(reg))? ? //打印字符串中所有的數(shù)字,連續(xù)
? ? |? ? ?或抛腕,類似于js中的 ||
? ? var reg = /abc|bbc|cbc|dbc/g
? ? console.log(str.match(reg));? ?//打印字符串中的abc,bbc祸轮,cbc,dbc
? ? var reg = /[a-c]bc/g
? ?[ ]? ? 中元符
? ? var reg = /[a-z]/?? ??? ??? ?? //匹配所有字母
? ? [0-9] == \d
? ? ^? ? ?排除(除了)
? ? var reg = /[^0-9]/?? ??? ??? ??//表示除了數(shù)字之外所有
? ? .?? ? 代表所有侥钳,不建議使用
? ? var reg = /<.+>/g
? ? console.log(str.replace(reg,""))? ??? ??? ?? ?//過濾适袜,表示尖括號里面的東西不要,但是舷夺?
? ? 正則的貪婪定律:
? ? var reg = /<[^<>]+>/g
?? ?console.log(str.replace(reg,"”)) ? ??? ??? ?? //表示尖括號里面的東西不要苦酱,真
? ? 轉義字符:
? ? \d ? ?——?? ?[0-9]? ? ? ? ?數(shù)字
? ? \w ? ?——?? ?[a-z0-9_]?? ??數(shù)字,字母给猾,下劃線
? ? \s ? ?—— ?? 空白字符(空格)? ?
? ? \D? ??——? ? [^0-9]?? ?? ? 非數(shù)字
? ? \W? ??——? ? [^a-z0-9_]? ? 非數(shù)字疫萤,字母,下劃線
? ? \S? ??—— ? ?非空白字符
? ? 量詞:限定符敢伸,可以指定正則表達式的一個給定組扯饶,必須要出現(xiàn)多少次才能滿足匹配
? ? * ? ? 匹配前面的子表達式零次或多次
? ? +? ? ?匹配前面的子表達式至少一次或多次
? ? ?? ? ?匹配前面的子表達是零次或一次
? ? {n}? ?匹配確定n次
? ? {n,}? 至少匹配n次
? ? {n,m}?至少匹配n次,最多匹配m次
? ? 注:在限定符后緊跟池颈?尾序,則由貪婪匹配變成非貪婪匹配
? ? qq號驗證規(guī)則:
? ? var reg?=?/[1-9]\d{4,10}/
? ? 固化的規(guī)則:0411-6666888
? ? 開頭為0或者2的或者三位數(shù)字加上-開頭為非零的八位數(shù)字,結尾是1到4的分機號
? ? var reg =/(0\d{2,3}-)?[1-9]\d{7}(-\d{1,4})?/
?? 復雜郵箱的規(guī)則:英文數(shù)字下劃線@一串英文或數(shù)子.一串英文
? ? var reg =/\w+@[a-z0-9]+\.[a-z]+/i
? ? 想要校驗怎么辦躯砰?在正則轉義字符前加上\
正則的方法
? ??正則.test(字符串)方法每币,返回值是true和false
? ? 正則.test(字符串)有一個特性,就是只要字符串的一部分符合要求琢歇,那么就會返回true
解決方法:
^開始
$結束
exec()找到了返回數(shù)組兰怠,找不到反回null
?? ?小練習:
? ? 刪除多余空格 ?
? ? str.replace(/\s+/g,'');
? ? 刪除首尾空格
? ? str.replace(/^\s+/,'');
? ? str.replace(/\s+$/,'');
? ? 檢查郵政編碼 ?共 6 位數(shù)字,第一位不能為 0
? ? /^[1-9]\d{5}$/
http://tool.oschina.net/uploads/apidocs/jquery/regexp.html
正則表達式手冊
常用檢測方式:
1.中文檢測
?? ?unicode編碼中文監(jiān)測:/^[\u2E80-\u9FFF]+$/
2.用戶名檢測
?? ?正則:/^[a-z0-9_-]{3,16}$/
3.郵箱檢測
?? ?/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
?? ??可以多次出現(xiàn)?(字母數(shù)字下劃線.-)@可以出現(xiàn)多個(數(shù)字字母.-).2到6位字母或.
?? ?/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
可以有多個(字母數(shù)字)可有多個可無(.多個(字母數(shù)字))@可以多個(數(shù)字字母可 ? 有1次可無(-數(shù)字字母))可以有多個(1或2個.多個字母)
abc123@123abc.com
4.URL檢測
?? ?/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/
有1次或0次(http有1次或0次s : //) 可以多個(數(shù)字字母.-) . 2到6位(字母.) 可多個或0個 (可以多個或0個 /數(shù)字字母下劃線.-) 可0或1次/
?? ?http://sh.op-ta.l.baidu.com
5.HTML標簽檢測
?? ?/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
<多個(字母)可多個或0個(除了<的所有字符) ?/>
<多個(字母)可多個或0個(除了<的所有字符)>多個任意字符 ? </重復第一部分的多個字母>
自定義的html標簽
/<[^<>]+>/g