day10-正則表達式
用于匹配字符串中字符組合的模式，主要用來驗證客戶端的輸入數(shù)據(jù)。
用戶填寫完表單單擊按鈕之后鱼鸠，表單就會被發(fā)送到服務(wù)器榆苞，在服務(wù)器端通常會用PHP稳衬、ASP.NET等服務(wù)器腳本對其進行進一步處理。因為客戶端驗證坐漏，可以節(jié)約大量的服務(wù)器端的系統(tǒng)資源薄疚，并且提供更好的用戶體驗。
-
創(chuàng)建方式
-
1.字面量創(chuàng)建正則;
var reg = /./;
-
2.構(gòu)造函數(shù)形式創(chuàng)建正則;
var reg = new RegExp();
區(qū)別：用字面量創(chuàng)建的正則赊琳，規(guī)則已經(jīng)確定不會改變街夭；如果規(guī)則存在改變的可能，那么必須使用構(gòu)造函數(shù)創(chuàng)建正則表達式躏筏。
修飾符 描述 g 全局匹配 i 大小寫不敏感 m 多行匹配 -
-
刪除字符串中的大小寫a
var str = "abcAbCAabc"; str = str.replace(/a/gi,""); console.log(str); -
復(fù)制正則表達式
var reg = /a/g; var reg1 = new RegExp(reg.source, reg.flags); console.log(reg === reg1); //false -
test()
判斷字符串中是否有符合正則規(guī)則的字符板丽，返回
true或false。var reg = /a/; console.log(reg.test("bfAg")); //false -
exec();
以數(shù)組的形式顯示字符串中符合正則規(guī)則的字符寸士，包括索引檐什、下標和原字符；否則返回null
-
match
字符串查找方法 => 按照規(guī)則查找并以數(shù)組形式返回查找結(jié)果;
math匹配的數(shù)組：【1】是匹配到的元素弱卡，【2】是元素所在的下標乃正，【3】捕獲組數(shù)組 或undefined（如果沒有定義命名捕獲組）。- 如果沒有任何修飾符婶博，效果與exec相同
console.log(str.match(/a/g));var str = "吳彥祖張彥祖李彥祖劉彥祖"; console.log(str.match(/吳彥祖/))瓮具； //匹配的是“吳彥祖”3個字 console.log(str.match([/吳彥祖/]))； //匹配是的“吳”或者“彥”或者“祖”程序本性是懶惰的,只要匹配到任意一個滿足條件的就會立即終止程序;
- 如果使用群組凡人，math可以區(qū)分群組
var str = "ab12ca3d4eA2f4g"; console.log(str.match(/(2)([a-z])/g)); //2c 2f 如果使用群組名党，match還可以區(qū)分群組- 查找字符串中的“c.t”
var str = "cotdogc.tcat"; console.log(str.match(/c\.t/g/)); //轉(zhuǎn)義字符\.表示字符串".";\\表示\ console.log(str.match(/c[.]t/));//把原字符放在中括號內(nèi)會失效，[.]相當于字符"."- 查找字符串中的cat和cot
var str = "cotdogc.tcat"; console.log(str.match(/c[oa]t/g)); //[]內(nèi)代表任意一個字符 console.log(str.match(/c[A-Z]t/g)); //任意大寫字母A-Z之間的一個字符 console.log(str.match(/c[a-Z]t/g)); //報錯挠轴，a(97) > Z(90) console.log(str.match(/c[A-z]t/g)); //不會報錯传睹，但是包含了90-97之間的字符 console.log(str.match(/[a-zA-Z]/)); //任意字母之間的一個字符 console.log(str.match(/[a]/)); // [a]等同于a- 取反
console.log(str.match(/[^0-9]/)); //除了字母 console.log(str.match(/[a-z^abc]/));//如果[]里^不是第一位，這個則表示^字符 console.log(str.match(/[^^]/)); //不要上箭頭岸晦，等同于[^\^]- 貪婪匹配
console.log("aaaaaaaaaa".match(/a{2,4}/g)); //["aaaa", "aaaa", "aa"] console.log("colour".match(/colou{0,1}/g)); //["colou"] console.log("aaaaaa bb aabb".match(/a{0,4}/g)); //["aaaa", "aa", "", "", "", "", "aa", "", "", ""] //第二個bb前面的第一個空格欧啤，第二個bb中間的一個空格睛藻，第二個bb后面一個空格 console.log("abaabaaaaaaa".match(/a{2,}/g));//無上限 ["aa", "aaaaaaa"] -
search
如果匹配成功，則
search()返回正則表達式在字符串中首次匹配項的索引;否則邢隧，返回 -1店印。注：僅能查找到第一個滿足規(guī)則的字符下標，不能進行全局查找
var pattern = /good/ig; var str = 'good good study!倒慧，day day up!'; console.log(str.search(pattern)); //返回第一個匹配到的good索引的下標：0 -
replace
替換匹配到的數(shù)據(jù)
str.replace(regexp|substr, newSubStr|function) 可以指定一個函數(shù)作為第二個參數(shù);- 通過正則修飾符全局替換所有滿足規(guī)則的字符
var str = "ab12ca3d4eAfg"; str = str.replace(/[df]/gi,"z"); // 將字母替換為字母z console.log(str); //ab12ca3z4eAzg- 第二個參數(shù)按摘，可以是函數(shù)
var num = 0; var str = "abcdefg" str = str.replace(/[a-z]/gi,function(item,index){ return ++num; }) console.log(str); //1234567image.pngvar pattern = /Good/ig; var str = 'good good study!，day day up!'; console.log(str.replace(pattern, 'hard'));//hard hard study!纫谅，day day up! var str = "hello world"; //replace每次替換的都是函數(shù)的返回值 var res = str.replace(/o/g, function(){ //將o換成一個或者兩個** console.log(1); return Math.random() > 0.5 ? "*" : "**"; }) -
字符匹配
\s 空白字符 \S 除了空白字符 \d 數(shù)字[0-9] [0-9] \D 非數(shù)字[^0-9] =>65535-10 = 65525個 [^0-9] \w 字母數(shù)字下劃線 [0-9a-zA-Z] \W 除了字母數(shù)字下劃線 [^0-9a-zA-Z] . 任意字符[^\n\r] .* 任意個任意字符 .+ 一個以上任意字符 注意：[.]代表匹配一個"." ; 而沒有元字符的"."炫贤，代表匹配任意字符
var str = ["盧本偉", "張本偉", "a本偉", "b本偉", "!本偉", "\n本偉", "\r本偉", "本偉", "趙夢玥", "天佑", "李本偉", "馬飛飛", "PGONE", "喬碧蘿"].join(","); var reg1 = /.本偉/g; //除了\n和\r之外，任意字符開頭的本偉 var reg2 = /[^\n\r]本偉/g // [\s\S] 真正的全部字符 , 會匹配到回車符和換行符; var reg3 = /[\s\S]本偉/g; console.log(str.match(reg1)); // ["盧本偉", "張本偉", "a本偉", "b本偉", "!本偉", ",本偉", "李本偉"] console.log(str.match(reg2)); // ["盧本偉", "張本偉", "a本偉", "b本偉", "!本偉", ",本偉", "李本偉"] console.log(str.match(reg3)); // ["盧本偉", "張本偉", "a本偉", "b本偉", "!本偉", "?本偉", "本偉", ",本偉", "李本偉"] -
匹配次數(shù)問題
符號 匹配次數(shù) * 表示任意次 0 或多次 付秕？ 表示匹配1次或0次 + 表示至少1次 {m,n} 表示m次到n次 {m,} 表示至少m次 *照激？ 表示非貪婪匹配（匹配到符合內(nèi)容的字符串時，會盡快地結(jié)束匹配） 盹牧？ 當該字符緊跟在任何一個其他限制符（,+,?俩垃，{n}，{n,}汰寓，{n,m}）后面時口柳，匹配模式是非貪婪*的。非貪婪模式盡可能少地匹配所搜索的字符串有滑，而默認的貪婪模式則盡可能多地匹配所搜索的字符串跃闹。例如，對于字符串“oooo”毛好，“o+”將盡可能多地匹配“o”望艺，得到結(jié)果[“oooo”]，而“o+?”將盡可能少地匹配“o”肌访，得到結(jié)果 ['o', 'o', 'o', 'o'] -
非貪婪匹配
一般用在左邊或者右邊有內(nèi)容 找默，并且使用了*+這種可以匹配任意多個內(nèi)容，可以利用非貪婪匹配查找某個內(nèi)容之間最少的結(jié)果吼驶。
var str = "3[abc]2[cde]5[ce]"; var str = str.match(/\d+\[[a-zA-Z]+\]/g).reduce(function(value, item) { var arr = item.match(/(\d+)\[([a-zA-Z]+?)\]/).slice(1); return value + arr[1].repeat(Number(arr[0])); }, ""); console.log(str);//abcabcabccdecdecececececevar str = "5[abc]2[cde]"; str = str.match(/\d+\[[a-zA-Z+?]\]/g).reduce(function(value,item){ item.match(/\d+\[([a-zA-Z]+?)\]/);//加（）表示群組惩激，讓它在數(shù)組中獨立地顯示出來 },""); console.log(str); -
起始和結(jié)束
^代表起始，$代表結(jié)束
console.log("concat".match(/^c.t$/g)); //null -
預(yù)查
- 肯定預(yù)查——緊隨其后
蟹演？= n 匹配任何一個其后緊跟n的字符串
console.log("abacad".replace(/a(?=c)/g,"z"));//abzcad- 否定預(yù)查
? ! n 匹配任何其后沒有緊接指定字符串 n 的字符串风钻。
console.log("abacad".replace(/a(?!c)/g,"z"));//zbaczd- 反向預(yù)查
console.log("abacaddc".replace(/(?<=a)c/g,"z"));//abazaddc- 反向否定預(yù)查
console.log("abacaddc".replace(/(?<!a)c/g,"z"));//abacaddz -
{}中代表重復(fù)的次數(shù)
console.log("abcaabcaaabc".match(/a{3}/g)); //aaa console.log("abcaabcaaabc".match(/a{0}/g)); //打印長度為13的數(shù)組，每一項為空字符酒请，{0}代表""字符 console.log("abaabaaaaa".match(/a{0,}/g))//["a", "", "aa", "", "aaaaa", ""] -
兩個||骡技，中間匹配的是空字符串
console.log("abcdef".match(/a||b/g)); //錯誤的，后面的b永遠也匹配不到["a", "", "", "", "", "", ""] -
匹配第一個雙引號中的內(nèi)容
console.log('hac"hack"abc"www"ppp'.match(/\"[^\"]*\"/)); //"hack" -
取出句子中的指定內(nèi)容
var str = "中國有四大名著,分別是<西游記>羞反、<水滸傳>布朦、<紅樓夢>毛萌、<三國演義>。"; var att = str.match(/\<[^\<\>]+\>/g).map(function(item){ return item.slice(1,-1); }); console.log(att); //["西游記", "水滸傳", "紅樓夢", "三國演義"] -
[1-31]代表什么含義喝滞？
代表1，2膏秫，3右遭；不是1至31
/^[1-9]$|^[12][0-9]$|^3[01]$/.test(input.value) -
驗證手機號
var phoneReg = /^1[3-9]\d{9}$/; var phoneReg1 = /^(13[0-9]|14[3579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/; phoneReg.test(phoneValue); -
驗證當前頁面是否為html結(jié)尾
var htmlReg = /.*\.html$/ console.log(htmlReg.test(location.href)); -
驗證郵箱
var reg = /^[0-9a-zA-Z_.-]{4,20}+[@]+[0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/; -
驗證姓名
var name = /^[\u4e00-\u9fa5]{2,6}$/; -
驗證年月日
<input type="text"><span></span> init(); function init() { var input = document.querySelector("input"); var span = document.querySelector("span"); input.span = span; input.addEventListener("input", inputHandler); } function inputHandler(e) { if (this.ids) return; this.ids = setTimeout(function(input) { clearInterval(input.ids); input.ids = 0; getRightText(input); }, 500, this) } function getRightText(input) { if (/^[12]\d{3}\-(0[1-9]|[0-2])\-(0[1-9]|[12][0-9]|3[01])$/.test(input.value)) { input.span.textContent = "正確"; input.span.style.color = "green"; } else { input.span.textContent = "錯誤"; input.span.style.color = "red"; } } -
拼接className，并且去重
<div class="div0 div1 div2"></div>var div = document.querySelector("div"); addClassName1(div," div4 div5 div3");trim() 去除字符串的頭尾空格:
-
方法一
function addClassName1(elem,className){ var arr = elem.className.trim().split(/\s+/); var arr1 = className.trim().split(/\s+/); arr.forEach(function(item){ if(arr.indexOf(item) < 0) arr.push(item); }); elem.className = arr.join(" "); } -
方法二
function addClassName2(elem,className){ var arr1 = className.trim().split(/\s+/); elem.className = elem.className.trim().split(/\s+/).reduce(function(value,item){ return arr1.indexOf(item) > -1 ? value : value.concat(item); },[]).concat(arr1).join(" "); } -
方法三
function allClassName3(elem,className){ var arr1 = className.trim().split(/\s+/); elem.className = elem.className.trim().split(/\s+/).filter(function(item){ return arr1.indexOf(item) < 0; //把沒找到的返回 }).concat(arr1).join(" "); }
-
-
removeClassName
//把沒有的返回出去缤削，拼接上 function removeClassName(elem,className){ var arr1 = className.trim().split(/\s+/); elem.className = elem.className.trim().split(/\s+/).filter(function(item){ return arr1.indexOf(item) < 0; //把沒找到的返回 }).join(" "); } -
將手機號中間4位變?yōu)?
var tel = "18812345678"; console.log(tel.replace(/^(\d{3})(\d{4})(\d{4})$/,"$1****$3")); 實現(xiàn)trim()方法
- 方法一
這里的*表示匹配0個或者多個窘哈，此時我們需要考慮兩種情況:一個是前面存在空格，另一個是后面存在空格亭敢。所以我們使用|來進行匹配滚婉。
var trim = str => str.replace(/(^\s*)|(\s*$)/g, "");
var str = " abc d e fgh ";
console.log(trim(str));
- 方法二
這里replace中的第二個參數(shù)
$1，對應(yīng)正則表達式中的(.*?)部分帅刀，匹配字符串中让腹，除了前后空格之外的任意字符
function trim(str){
let reg = /^\s*(.*?)\s*$/g;
return str.replace(reg, "$1");
}
var str = " abc d e fgh ";
console.log(trim(str));
- 方法三
利用match方法，取匹配值的第二項參數(shù)
(.*?)扣溺，原理同上;
function trim(str) {
str = str || "";
if (str.length <= 0) return str;
str = str.match(/(^\s*)(.*?)(\s*)$/);
//match非全局匹配中的第【0】項是本身骇窍，第【1】項對應(yīng)(^\s*)
//第【2】項對應(yīng)(.*?])，第【3】項對應(yīng)(\s*)
return (str && str[2]) ?? '';
}
var str = " abc d e fgh ";
console.log(trim(str))
