l正則的概念
n正則表達式(regular expression)是一個描述字符規則的對象。我們可以通過RegExp 類（構造函數）創建正則表達式，同時String 和 RegExp 都定義了使用正則表達式進行強大的模式匹配和文本檢索與替換的方法。
n前端正則表達式主要用來驗證客戶端的輸入數據，因爲客戶端驗證，可以提供用戶體驗和節約大量的服務器端的系統資源。
l創建正則的兩種方式
n使用RegExp這個對象
var reg = new RegExp('study', 'ig');
第一個參數就是我們的模式字符串（變量）
第二個參數可選，模式修飾符
i 表示忽略大小寫
g 表示全局匹配
m 表示多行匹配
n還可以用字面量方式直接聲明（如果正則表達式中有變量則不可用此方式）;
var reg = /study/ig;
lRegExp下面測試正則表達式的兩個方法
ntest(str)方法在字符串中查找是否存在指定的正則表達式並返回布爾值，如果存在則返回 true，不存在則返回 false。
nexec()方法對一個指定的字符串執行一個正則表達式，簡言之，就是在一個字符串中執行匹配檢索。如果它沒有找到任何匹配返回null，如果找到一個匹配，它將返回一個數組。
l可以配合正則使用的字符串方法
n使用 match 方法獲取匹配內容，返回數組
n使用 search 來查找匹配數據，和全局沒有關係，查找第一個匹配值的位置。(-1)
n使用 replace 替換匹配到的數據,2個參數：1代表正則，2代表用來替換的字符*****
n使用 split 拆分成字符串數組
lexec和match的區別：
n定義爲非全局匹配時，exec和match執行的結果是一樣
nexec與全局是否定義無關係，而match則於全局相關聯
l獲取控制
字符類：單個字符和數字
元字符/元符號 匹配情況
. 匹配除換行符外的任意字符
[a-z0-9] 匹配括號中的字符集中的任意一個字符（小寫字母和數字）
[^a-z0-9] 匹配任意不在括號中的字符集中的字符
\d 匹配數字[0-9],中括號表示範圍。
\D 匹配非數字，同[^0-9]相同
\w 匹配字母和數字及_
\W 匹配非字母和數字及_
字符類：空白字符
元字符/元符號 匹配情況
\b 匹配單詞邊界 \B（非單詞邊界）
b匹配的只是一個位置，這個位置的一側是構成單詞的字符，另一側爲非單詞字符、字符串的開始或結束位置。“\b”是零寬度的。
\n 匹配換行符
\s 匹配空白字符、空格、製表符和換行符
\S 匹配非空白字符
字符類：錨字符
元字符/元符號 匹配情況
^ 行首匹配 以及 取反
$ 行尾匹配
字符類：重複字符
元字符/元符號 匹配情況
x? 匹配0個或1個x
x* 匹配0個或任意多個x
x+ 匹配至少一個x
(xyz)+ 匹配至少一個(xyz)
x{m,n} 匹配最少m個、最多n個x
字符類：替代字符
元字符/元符號 匹配情況
this|where|logo 匹配this或where或logo中任意一個
l正則的常見應用
1.郵政編碼檢測/郵件格式檢測
2.手機號檢測/身份證檢測/qq號碼檢測
3.日期檢測/中文檢測
4.字符串過濾(敏感詞過濾)
5.密碼強度驗證
6.字符串首尾去空格
l應用
1．查找和替換
2．輸入一個字符串，中文字符佔兩個長度，其他的佔一個長度，統計總的字符長度。
3．利用正則去重和統計字符個數
l綜合應用
1．掌握正則的封裝
2．掌握綜合表單驗證
1.<body>
請輸入手機號碼：<input type="text" /><span></span>
<script type="text/javascript">
var oInput=document.querySelector('input');
var oSpan=document.querySelector('span');
oInput.οnfοcus=function(){
oSpan.innerHTML='請輸入手機號碼';
oSpan.style.color='#333';
}
oInput.οnblur=function(){
var reg=/^1[3|5|6|8]\d{9}$/; //定義規則
if(reg.test(oInput.value)){
oSpan.innerHTML='√';
oSpan.style.color='green';
}else{
oSpan.innerHTML='你輸入的手機號碼有誤!';
oSpan.style.color='red';
}
}
</script>
</body>
2. <body>
<script type="text/javascript">
//1.構造函數創建--new RegExp(規則,修飾符)--規則是字符串和變量
//修飾符：i:忽略大小寫 g:全局匹配 m:多行匹配
/*var reg=new RegExp('hello','i');//reg:正則對象 RegExp：構造函數
var str='abchelloaaa';
var str1='abchellaaa';
var str2='abcHElloaaa';*/
//alert(reg.test(str));//true
//alert(reg.test(str1));//false
//alert(reg.test(str2));//true
//2.字面量創建正則--規則一定是字符串
//var reg=/hello/ig; //ig:忽略大小寫，同時全局匹配
//var str='abchelloaaa';
//alert(reg.test(str));
//正則的方法：
//test():ntest(str)方法在字符串中查找是否存在指定的正則表達式並返回布爾值，如果存在則返回 true，不存在則返回 false。
</script>
</body>
3. <body>
<script type="text/javascript">
/*
1.[]：範圍，代表一個值。
[0-9]:數字
[0-9a-z]：數字和小寫字母
[0-9a-zA-Z]：數字和大小寫字母。
[^0-9a-zA-Z]:非數字和大小寫字母。
2.匹配的數量。
+：匹配一個或者多個 例如：[0-9]+ 匹配一個或者多個數字
*：匹配0個或者多個
?：匹配0個或者1個
3.字符的認識
\d:數字
\D:非數字
\w:數字字母和下劃線
\W:非數字字母和下劃線
\s:匹配空白字符、空格。
4.行首和行尾匹配
^ 行首匹配 以及 取反的意義，取反放在中括號裏面。
$ 行尾匹配
5.(xyz)+ 匹配至少一個(xyz)
6.x{m,n} 匹配最少m個、最多n個x
x{m} 匹配m個
x{m,} 匹配至少m個
7.this|where|logo 匹配this或where或logo中任意一個
*/
</script>
<script type="text/javascript">
//字符串方法
//1.使用 match 方法獲取匹配內容，返回數組
//var str='921jfkd948945dfskjk49590fdsg89sdg7sdfa78gf9d8g9fdsg';
//var reg=/[0-9]+/g; //匹配一個數字。
//console.log(str.match(reg));
//["921", "948945", "49590", "89", "7", "78", "9", "8", "9"]
//var str='我hehadf234asdf喜歡dsffoptire324你';
//var reg=/[\u4e00-\u9fa5]+/g;
//console.log(str.match(reg));
//2.使用 search 來查找匹配數據，和全局沒有關係，查找第一個匹配值的索引位置。(-1)
//var str='abc5abc';
//alert(str.search(/[0-9]/));//3
//alert(str.search(/[A-Z]/));//-1
//3.使用 replace 替換匹配到的數據,2個參數：1代表正則，2代表用來替換的字符*****
//輸入一個字符串，中文字符佔兩個長度，其他的佔一個長度，統計總的字符長度。
//var str='woshi正則表達式hehe'; //19
//console.log(str.replace(/[\u4e00-\u9fa5]/g,'XX').length);
//屏蔽敏感詞
//var str='這件衣服是你媽的，還是你妹的，我猜是你大爺的';
//console.log(str.replace(/[媽|妹|大爺]/g,'*****'));
//4.使用 split 拆分成字符串數組
//var str='a1b2c3d4e5f6g';
//console.log(str.split(/[0-9]/g));
/*var reg=/^hello$/i; //全等，行首必須h,行尾必須是$;
var str='hello';
alert(reg.test(str));//true*/
/*var reg=/^xyz+$/;//+是針對z的，
var str='xyzzzzzzzzzzzzzzz';
alert(reg.test(str));*/
/*var reg=/^(xyz)+$/;//+是正對xyz的
var str='xyzxyz';
alert(reg.test(str));*/
/*var reg=/^(xyz){2,4}$/;//{}指前面的一個字符的個數
var str='xyzxyzxyzxyz';
alert(reg.test(str));*///true
</script>
4.<body>
<script type="text/javascript">
//轉義符合：\
/*var reg=new RegExp('\\d','g'); //\d:字符d,不是數字
var reg1=/\d/g; //\d當作數字
var str='abcd123abcd';
console.log(str.replace(reg,'*'));//abc*123abc*
console.log(str.replace(reg1,'*'));//abc*123abc**/
/*var reg=new RegExp('\\d\a','g');
var str='abcd123abcd';
console.log(str.replace(reg,'*'));*/
/*var reg1=/\./g; //\.:點字符，而不是任意的字符。
var str='abcd123.abcd';
console.log(str.replace(reg1,'*'));*/
//匹配\
//var reg=new RegExp('\\\\','g'); //匹配雙斜槓
//var reg1=new RegExp('\\/','g'); //匹配單斜槓
//var reg2=/\/\//;
//var str='abcd//123\abcd';
//console.log(str.replace(reg2,'*'));
//總結:匹配特殊的符號,添加轉義字符'\'
//如果是採用構造函數定義正則,採用'\\'進行轉義.
//如果是採用字面量定義，採用'\'進行轉義,如果輸出多個特殊字符，一個一個匹配。 (var reg2=/\/\//)
//構造函數正則定義帶有\的元字符，需要再添加一個'\'. \\d \\s \\w
</script>
</body>
5.
<body>
<fieldset id="" style="width:600px;">
<legend>用戶註冊</legend>
<form action="http://www.baidu.com" class="form1">
<p>用戶姓名：<input type="text" class="username" /><span></span></p>
<p>用戶密碼：<input type="password" class="password" /><span></span></p>
<p>電子郵箱：<input type="text" class="email" /><span></span></p>
<input type="submit" value="註冊" class="registor" />
</form>
</fieldset>
<script type="text/javascript">
var form1 = document.querySelector('.form1');
var username = document.querySelector('.username');
var password = document.querySelector('.password');
var email = document.querySelector('.email');
var registor = document.querySelector('.registor');
var aSpan = document.querySelectorAll('span');
var userstop = true;
var passstop = true;
var emailstop = true;
//驗證用戶名
username.onfocus = function() {
if(this.value == '') {
aSpan[0].innerHTML = '中英文均可，最長14個英文或7個漢字';
aSpan[0].style.color = '#333';
}
}
username.onblur = function() {
if(this.value != '') {
var reg1 = /^[a-zA-Z]{6,14}$/;
var reg2 = /^[\u4e00-\u9fa5]{2,7}$/;
if(reg1.test(username.value) || reg2.test(username.value)) {
aSpan[0].innerHTML = '√';
aSpan[0].style.color = 'green';
userstop = true;
} else {
aSpan[0].innerHTML = '用戶名格式有誤';
aSpan[0].style.color = 'red';
userstop = false;
}
} else {
aSpan[0].innerHTML = '請輸入用戶名';
aSpan[0].style.color = 'red';
userstop = false;
}
if(this.value == '') {
aSpan[0].innerHTML = '中英文均可，最長14個英文或7個漢字';
aSpan[0].style.color = '#333';
}
}
//驗證密碼
password.onfocus = function() {
if(this.value == '') {
aSpan[1].innerHTML = '長度爲6-14個字符';
aSpan[1].style.color = '#333';
}
}
password.onblur = function() {
if(this.value != '') {
aSpan[1].innerHTML = '√';
aSpan[1].style.color = 'green';
passstop = true;
} else {
aSpan[1].innerHTML = '請輸入密碼';
aSpan[1].style.color = 'red';
passstop = false;
}
}
password.oninput = function() {/.oninput表示只要輸入有變化就發生事件
if(this.value.length>=6 && this.value.length<=14){
var reg = /^[\w\W]+$/;
if(reg.test(password.value)) {
//弱(1)中(2-3)強(4)
var count = 0; //計算密碼的字符種類
var regnum = /\d+/;
var regupper = /[A-Z]+/;
var reglower = /[a-z]+/;
var other = /\W+/;
if(regnum.test(password.value)) {
count++;
}
if(regupper.test(password.value)) {
count++;
}
if(reglower.test(password.value)) {
count++;
}
if(other.test(password.value)) {
count++;
}
switch(count) {
case 1:
aSpan[1].innerHTML = '弱';
aSpan[1].style.color = 'red';
passstop = true;
break;
case 2:
case 3:
aSpan[1].innerHTML = '中';
aSpan[1].style.color = 'orange';
passstop = true;
break;
case 4:
aSpan[1].innerHTML = '強';
aSpan[1].style.color = 'green';
passstop = true;
break;
}
} else {
aSpan[1].innerHTML = '密碼格式有誤';
aSpan[1].style.color = 'red';
passstop = false;
}
}else{
aSpan[1].innerHTML = '密碼長度不符合';
aSpan[1].style.color = 'red';
passstop = false;
}
}
//驗證電子郵箱
email.onfocus = function() {
if(this.value == '') {
aSpan[2].innerHTML = '請輸入正確的電子郵箱';
aSpan[2].style.color = '#333';
}
}
email.onblur = function() {
if(this.value != '') {
var reg = /^([\w][\w\-\_\.]+)\@([\w][\w\-\_\.]+)\.([\w][\w\-\_\.]+)$/;
//var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(reg.test(email.value)) {
aSpan[2].innerHTML = '√';
aSpan[2].style.color = 'green';
emailstop = true;
} else {
aSpan[2].innerHTML = '郵箱格式有誤';
aSpan[2].style.color = 'red';
emailstop = false;
}
} else {
aSpan[2].innerHTML = '請輸入郵箱';
aSpan[2].style.color = 'red';
emailstop = false;
}
}
form1.onsubmit = function() { //表單提交事件。
if(username.value == '') {
aSpan[0].innerHTML = '請輸入用戶名';
aSpan[0].style.color = 'red';
userstop = false;
}
if(password.value == '') {
aSpan[1].innerHTML = '請輸入密碼';
aSpan[1].style.color = 'red';
passstop = false;
}
if(email.value == '') {
aSpan[2].innerHTML = '請輸入電子郵箱';
aSpan[2].style.color = 'red';
emailstop = false;
}
if(!userstop ||!passstop || !emailstop) {
return false; //阻止默認事件
}
}
</script>
</body>
6.<body>
<textarea name="" rows="" cols=""></textarea>
<script type="text/javascript">
/*var str='hello\nworld';
var reg=/o$/m; //多行匹配
var reg1=/^w/m; //多行匹配
alert(reg.test(str));//true
alert(reg1.test(str));//true*/
/*var oT=document.querySelector('textarea');
oT.οnblur=function(){
console.log(oT.value.split('\n'));
}*/
</script>
</body>
7.<body>
<script type="text/javascript">
//exec()方法對一個指定的字符串執行一個正則表達式，簡言之，就是在一個字符串中執行匹配檢索。如果它沒有找到任何匹配返回null，如果找到一個匹配，它將返回一個數組。
/*var reg=/\d+/;
var str='abc123def456ghi';
console.log(reg.exec(str));//["123"]
console.log(str.match(reg));//["123"]
var reg=/\d+/g;
var str='abc123def456ghi';
console.log(reg.exec(str)); //["123"]
console.log(str.match(reg));// ["123", "456"]*/
/*exec和match的區別：
n 定義爲非全局匹配時，exec和match執行的結果是一樣
exec與全局是否定義無關係，而match則於全局相關聯*/
//分組--()
//exec和match除了輸出匹配的值，輸出分組的值。
/*var reg=/(a)(b)(c)(d)/;
var str='123abcdefg456';
console.log(reg.exec(str));//["abcd", "a", "b", "c", "d"]*/
//var reg=/([a-z])([a-z])([a-z])/;
//var str='123abcdefg456';
//console.log(reg.exec(str));//["abc", "a", "b", "c"]
//正則的屬性 RegExp.$1 第一個分組 $1-$9
//如果想使用上面的屬性，必須讓正則執行一次。
//console.log(RegExp.$1);//a
//console.log(RegExp.$2);//b
//console.log(RegExp.$3);//c
//var reg=/([a-z]+)\s([a-z]+)/;
//var str='hello world';
//reg.test(str);
//console.log(RegExp.$2 , RegExp.$1);
//console.log(str.replace(reg,'$2 $1'));
//var str='帥不帥先生問好不好小姐，悄一悄問神僧，女兒美不美';
//如果分組寫入正則的規則中，\1-\9 分別代表第一個到第九個分組。
//var reg=/([\u4e00-\u9fa5])[\u4e00-\u9fa5]\1/g;
//console.log(str.match(reg));
//利用正則去重和統計字符個數
//var str='safhkgeurokzbdhfkjequroihajfkdfequreuywqiufhadskbcznvbeuiwr';
//str=str.split('').sort().join('');
//console.log(str);
//aaabbbcdddeeeeefffffghhhhiiijjkkkkknooqqqrrrrssuuuuuuvwwyzz
//var reg=/([a-z])\1*/g //匹配至少一個重複的字符
//str.replace(reg,function(result,group){
//console.log(result);//匹配的結果，返回一個類數組
//console.log(group);//分組的值
//console.log(group+':'+result.length);
//});
/*var str='get-element-by-id'; //getElementById
var reg=/(\-\w)/g;
console.log(str.replace(reg,function(a){
console.log(a);
return a.substring(1).toUpperCase();
}));*/
/*var str1='They are students';
var str2='aeous';
console.log(str1.replace(/[aeous]/g,''));//Thy r tdnt*/
/*var str='?a=1&b=2&c=3&d=4';
str=str.substring(1);//a=1&b=2&c=3&d=4
console.log(eval('({'+str.replace(/\&/g,',').replace(/\=/g,':')+'})'));*/
/*var str='?a=zhangsan&b=李四&c=3&d=4';
str=str.substring(1);
console.log(JSON.parse('{'+str.replace(/\&/g,',').replace(/\=/g,':').replace(/([\w]+|[\u4e00-\u9fa5]+)/g, function(result){
return '"'+result+'"';
})+'}'));*/
</script>
</body>
8.
<body>
請輸入查找的字符：<input type="text" class="search" />
<input type="text" class="replace" /> <button>替換</button>
<p>
【環球網報道 記者 張飛揚】俄羅斯駐阿富汗特使週一(12日)透露，塔利班和美國除了在卡塔爾公開討論如何結束阿富汗戰爭外，兩者還“祕密舉行了10輪會談”，美媒12日披露了這一消息。
報道稱，俄羅斯駐阿富汗特使扎米爾·卡布洛夫說：“我們被告知他們(塔利班)與美國人進行了大約10次祕密磋商。這是一個正常的進程，我們願意相信，一些國家試圖在沒有先決條件的情況下，促成塔利班和阿富汗政府坐上談判桌。”
報道稱，自7月以來，外界僅得知美國與塔利班代表在所謂的“多哈政治辦公室”舉行了兩次會談。最近一次是在上個月，新上任的美國阿富汗問題特使扎勒邁·哈利勒扎德率領美國代表團。
報道稱，卡布洛夫還提到了上週五舉行的“阿富汗問題國際大會”。他表示，在莫斯科舉行的多邊會議是一個“獨特的”和廣泛的國際論壇，塔利班代表17年來首次公開參加會議，與阿富汗官方代表團在會議桌上交換意見。
他強調，這次會議的目標不是尋求阿富汗交戰各方之間的直接談判，而是“朝着這個方向邁出溫和的第一步”。
</p>
<script type="text/javascript">
//1.身份證規則
//var reg=/^\d{17}[xX0-9]$/;
/*var reg=/^\d{6}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])\d{3}[xX0-9]$/;
if(reg.test('362330198410263275')){
alert('ok');
}else{
alert('錯誤');
}*/
//2.字符串首尾去空格
/*var str=' dasf dasf dfsaf ';
console.log(str);
console.log(str.trim());
var reg=/^\s+|\s+$/g;
console.log(str.replace(reg,''));*/
//3.查找和替換
var search=document.querySelector('.search');
var place=document.querySelector('.replace');
var oP=document.querySelector('p');
var oBtn=document.querySelector('button');
var content=oP.innerHTML;
search.οninput=function(){
var reg=new RegExp(search.value,'g');
if(search.value!=''){
oP.innerHTML=content.replace(reg,'<mark>'+search.value+'</mark>');
}else{
oP.innerHTML=content.replace(reg,'');
}
};
oBtn.οnclick=function(){
var aMark=document.querySelectorAll('mark');
if(search.value!=''){
if(place.value!=''){
for(var i=0;i<aMark.length;i++){
aMark[i].innerHTML=place.value;
}
}else{
for(var i=0;i<aMark.length;i++){
aMark[i].innerHTML=search.value;
}
}
}else{
alert('請輸入查找的字符');
}
}
</script>
</body>