JS高级学习历程-14
昨天内容回顾
1. 面向对象的私有成员、静态成员
私有成员：在构造函数里边定义局部变量，就是私有成员。
静态成员：在js里边，函数就是对象，可以通过给函数对象声明成员方式声明静态成员。
2. 原型继承
关键字：prototype
单一成员继承： 函数.prototype.成员名称= 值;
对象继承：函数.prototype = 对象;
原型链继承：许多构造函数可以一一继承，形成一个继承链条，这个链条就是“原型链”
原型链的顶端是Object，对象可以访问的属性constructor、方法 hasOwnProperty() 都是Object对象拥有的。
3. 复制继承、冒充继承
复制继承：
函数.prototype.extend = function(obj){
遍历obj对象，把这个obj的成员都复制一份给当前的对象cat
}
var cat = new 函数();
cat.extend(对象);
冒充继承：
function f1(){}
function f2(){
f1.call(this); //通过这种方式把f1函数来执行一次，并且其内部的this被当前对象dog冒充。
}
var dog = new f2();
4. 异常
try-catch-finally
异常类型：ReferenceError 引用异常 (使用了一个未声明的变量)
RangeError 范围异常 (new Array(-5))
TypeError 类型异常 (new 10())
自定义抛出异常：throw {msg:’异常错误信息’,linenumber:错误行号，posnumber:错误列号};
5. 正则的组成内容、模式修正符
组成内容：
① 普通字符
② 定义字符集 ([0-9] [a-z] [pwscv] [a-zA-Z0-9])
③ 特别字符集 + * ? ^ $ \ |
() ：小括号，设置模式表达式优先级关系
赛选子级内容出来
模式修正符：
var reg = /模式内容/模式修正符;
i ： 忽略大小写
g : 全局匹配
m : 把被匹配目标字符串当作多行处理(字符串内部有\n关键字)
【正则表达式】
1 ()小括号使用
作用：① 提高表达式优先级关系
② 提取子字符串内容
模式单元，每个小括号都算作一个模式单元内容，按照内容的下标可以给小括号计数。
var reg = /([0-9]+)-([0-9]+)-[0-9]+/; //2014-06-21
上边的正则模式，其中2014是模式单元1内容，06是模式单元2内容
③ 模式单元重复匹配
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>01-正则-模式单元重复匹配</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script type="text/javascript"> 10 //()小括号模式单元 重复匹配 11 //var reg = /[0-9]+-[0-9]+-[0-9]+ [0-9]+:[0-9]+:[0-9]+/; 12 //\1 表示重复匹配前边模式单元1内容 13 //\2 表示重复匹配前边模式单元2内容 14 //\n 表示重复匹配前边模式单元n内容 15 //要求：重复内容与模式单元内容完全一致 16 //var reg = /[0-9]+-[0-9]+-([0-9]+) \1:\1:\1/; 17 var reg = /([0-9]+)-([0-9]+)-([0-9]+) \3:\3:\3/; 18 var str = "2014-06-21 21:21:21"; 19 20 var reg = /([0-9]+)-([0-9]+)-([0-9]+,)\1-\2-\3\1-\2-\3/;//ok 21 //以下字符串三个单元内容完全一致，才给匹配 22 var str = "2014-06-21,2014-06-21,2014-06-21,"; 23 24 var reg = /([0-9]+-[0-9]+-[0-9]+,)+/; 25 var str = "2014-06-21,2014-06-21,2014-06-21,"; 26 27 var reg = /([0-9]+-[0-9]+-[0-9]+,)+/; 28 //以下内容不一致，也给匹配 29 var str = "2014-06-21,1998-12-30,2008-08-08,"; 30 31 var rst = str.match(reg); 32 console.log(rst); 33 </script> 34 35 <style type="text/css"> 36 </style> 37 </head> 38 39 40 <body> 41 42 </body> 43 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>02-正则-模式单元重复匹配</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script type="text/javascript"> 10 //以下情况必须通过+号方式进行 重复匹配 11 var reg = /([a-z]+@)+/; 12 var str = "hello@world@china@"; 13 14 //以下情况“模式单元重复匹配” 和 “+号重复匹配”都可以使用 15 var reg = /([a-z]+@)\1\1/; 16 var reg = /([a-z]+@)+/; 17 var str = "hello@hello@hello@"; 18 19 var rst = str.match(reg); 20 console.log(rst); 21 </script> 22 23 <style type="text/css"> 24 </style> 25 </head> 26 27 28 <body> 29 30 </body> 31 </html>
2 组成字符
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>03-正则-组合字符</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script type="text/javascript"> 10 //组合字符 11 //\d 是[0-9]的另一个表示方法,0-9之间任意一个数字 12 var reg = /\d+/; 13 var str = "2014-6-21"; 14 15 //\D 取非，除了0-9的数字，其他内容都给匹配 16 var reg = /\D+/;//["kfdifuuoidfdf)(*^$%%&^(Y*&"] 17 var str = "kfdifuuoidfdf)(*^$%%&^(Y*&111444666lsjdlksjlk"; 18 19 //\w 匹配字母(忽略大小写)、数字、下划线中的任意一个 20 // [a-zA-Z0-9_] 21 var reg = /\w+/;//["hello1997_hongkongChina"] 22 var str = "hello1997_hongkongChina!#@sljdlsjkd"; 23 24 //\W 取非，除了字母(忽略大小写)、数字、下划线，其他的都给匹配 25 var reg = /\W+/;//["&^$%#$%^&*&^*&%------"] 26 var str = "lsjds2382__jds&^$%#$%^&*&^*&%------slkjdlksjd876872kjdhs"; 27 28 //\s 匹配空格 29 var reg = /[a-z]+\s+[a-z]+/; 30 var str = "hello world"; 31 32 //\S 取非，不给匹配空格，其他都给匹配 33 var reg = /\S+/;//["sljdlksjdlks(*&^%^$^%T762t87w872"] 34 var str = "sljdlksjdlks(*&^%^$^%T762t87w872 sljdlks876t7"; 35 36 //\b 匹配单词边界(空格表示单词边界) 37 var reg = /\bis\b/g; 38 var str = "this is tom,and he is very good student"; 39 //this is ---------> this was 40 var new_str = str.replace(reg,"was"); 41 //console.log(new_str); 42 43 //\B 匹配单词内部 44 var reg = /\Bis\b/; 45 var str = "is it jack, ok , this is jack"; 46 //this is -------->that is 47 var new_str = str.replace(reg,'at'); 48 console.log(new_str);//is it jack, ok , that is jack 49 50 var rst = str.match(reg); 51 console.log(rst); 52 </script> 53 54 <style type="text/css"> 55 </style> 56 </head> 57 58 59 <body> 60 61 </body> 62 </html>
3 限定字符
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>04-正则-限定字符</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script type="text/javascript"> 10 //限定字符 11 //{m} 前边单元严格出现m次 12 var reg = /beijin{4}g/; 13 var str = "beijinnnng is shoudu"; 14 15 //{m,} 前边的单元至少出现m次，至多不限制 16 var reg = /beijin{4,}g/; 17 var str = "beijinnnnnnnnnnnnnng is shoudu"; 18 19 //{m,n} 前边的单元至少出现m次，至多出现n次 20 var reg = /beijin{4,7}g/; 21 var str = "beijinnnnnnng is shoudu"; 22 23 var reg = /^\d{11}$/; //目标字符串内容从开始到结束严格出现11次 24 var str = "135786523419"; 25 26 //[^uipr] 除了给定的4个字母，其他都给匹配 27 var reg = /[^uipr]+/; //["*&^*&^___---ba"] 28 var str = "*&^*&^___---baipu is ok"; 29 30 //[^a-f] 除了abcdef，其他字符都给匹配 31 //[^2-5] 除了2345，其他字符都给匹配 32 33 var rst = str.match(reg); 34 console.log(rst); 35 </script> 36 37 <style type="text/css"> 38 </style> 39 </head> 40 41 42 <body> 43 44 </body> 45 </html>
4 正向、反向预查
正向预查：查找内容在辅助条件的前边
反向预查：查找内容在辅助条件后边
注意：辅助条件不是结果的一部分
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>05-正则-正向预查</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script type="text/javascript"> 10 //正向预查 11 //http://web.0421.com/javascript/index.php?name=tom&age=21&addr=beijing 12 //把以上请求地址里边的get变量的"名称"给获得到 13 //() 14 15 var reg = /((\w+)=\w+&?)+/; 16 var str = "http://web.0421.com/javascript/index.php?name=tom&age=21&addr=beijing"; 17 18 19 var rst1 = str.match(reg); 20 var str1 = rst1[0];//"name=tom&age=21&addr=beijing" 21 22 var reg = /[a-z]+=/g; 23 var rst2 = str1.match(reg); 24 console.log(rst2);//["name=", "age=", "addr="] 25 </script> 26 27 <style type="text/css"> 28 </style> 29 </head> 30 31 32 <body> 33 34 </body> 35 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>06-正则-正向预查</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script type="text/javascript"> 10 //正向预查 11 //http://web.0421.com/javascript/index.php?name=tom&age=21&addr=beijing 12 //把以上请求地址里边的get变量的"名称"给获得到 13 var str = "http://web.0421.com/javascript/index.php?name=tom&age=21&addr=beijing"; 14 15 //正向预查(正向匹配、正向不匹配) 16 //对内容进行查找，该内容后边可以由辅助信息，该辅助信息不是结果的一部分 17 //上边url地址的get变量有统一的特点，每个名字后边有"=等号"信息 18 19 //正向预查-正向匹配 20 // var reg = /寻找内容(?=pattern)/ 21 //寻找内容后边与pattern模式的内容有结合 22 var reg = /[a-z]+(?==)/g; 23 24 var rst = str.match(reg); 25 console.log(rst);//["name", "age", "addr"] 26 27 28 //正向预查-正向不匹配 29 //var reg = /[a-z]+(?!=pattern)/; 30 //匹配的内容后边不能与pattern模式内容结合 31 //var str = "hello123"; //nook 32 var str = "hello###"; //ok 33 var reg = /hello(?!\d+)/; 34 35 var rst = str.match(reg); 36 console.log(rst); 37 38 39 40 </script> 41 42 <style type="text/css"> 43 </style> 44 </head> 45 46 47 <body> 48 49 </body> 50 </html>
1 <?php 2 3 //反向预查(反向匹配、反向不匹配) 4 //反向匹配 5 $str = "2014beijing"; //ok 6 $str = "163@beijing"; //nook 7 $reg = "/(?<=(\d)+)beijing/"; //beijing的前边需要连接数字信息 8 9 10 //反向不匹配 11 $str = "2014beijing"; //nook 12 $str = "163@beijing"; //ok 13 $reg = "/(?<!(\d)+)beijing/"; //beijing的前边不能连接数字信息 14 15 //$out 接收匹配到的内容 16 preg_match($reg, $str, $out); 17 18 print_r($out);
贪婪匹配
1 <?php 2 3 //贪婪匹配、非贪婪匹配 4 5 $str = "<a href='http://www.baidu.com'>baidu</a>"; 6 7 //贪婪匹配<a href='http://www.baidu.com'>baidu</a> 8 //$reg = "/<.*>/"; 9 10 11 //避免贪婪匹配 12 //<a href='http://www.baidu.com'> 13 $reg = "/<.*>/U"; 14 15 preg_match($reg,$str,$out); 16 17 print_r($out);
【正则案例】
1 匹配手机号码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>07-正则案例-匹配手机号码</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script type="text/javascript"> 10 //正则案例-匹配手机号码 11 //var reg =/^1(3|5|8)[0-9]{9}$/; 12 /* 13 要求： 14 ① 从头到尾全部是数字 15 ② 以13 15 18(0 4 5 6)开始 16 ③ 位数是11位 17 */ 18 var reg = /^((1[35]\d{9})|(18[0456]\d{8}))$/; 19 var str = "13598705421"; 20 var str = "18065478932"; 21 22 var rst = str.match(reg); 23 console.log(rst); 24 25 26 27 </script> 28 29 <style type="text/css"> 30 </style> 31 </head> 32 33 34 <body> 35 36 </body> 37 </html>
2 匹配邮箱
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>08-正则案例-匹配邮箱</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script type="text/javascript"> 10 //正则案例-匹配邮箱 11 /** 12 要求： 13 ① 有@符号 14 15 298493484@qq.com 16 tom@163.com 17 tom2014@163.com 18 jack_2008@sohu.com 19 linken_100@163.com.cn 20 */ 21 //\w @ [a-z0-9].[a-z]+ 22 23 var reg = /^\w+@[a-z0-9]+(\.[a-z]+)+$/; 24 var str = "jack_2008@sohu.com"; 25 var str = "linken_100@163.com.cn"; 26 var str = "9273982738@qq.com"; 27 28 29 var rst = str.match(reg); 30 console.log(rst); 31 32 33 34 </script> 35 36 <style type="text/css"> 37 </style> 38 </head> 39 40 41 <body> 42 43 </body> 44 </html>
3 匹配ip地址
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>09-正则案例-匹配ip地址</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script type="text/javascript"> 10 //正则案例-匹配ip地址 11 /** 12 192.168.23.57 13 第一个位置：1-223之间 14 1-9 [1-9] 15 10-99 [1-9]\d 16 100-199 1\d\d 17 200-219 2[01]\d 18 220-223 22[0-3] 19 20 reg = /^([1-9]|[1-9]\d|1\d\d|2[01]\d|22[0-3])$/ 21 /^(([1-9][0-9]?)|(1[0-9][0-9])|(2[0-1][0-9])|(22[0-3]))$/ 22 23 第二、三、四个位置：0-255之间 24 0-9 \d 25 10-99 [1-9]\d 26 100-199 1\d\d 27 200-249 2[0-4]\d 28 250-255 25[0-5] 29 30 reg = /^\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/; 31 */ 32 //var reg = /^([1-9]|[1-9]\d|1\d\d|2[01]\d|22[0-3])$/; 33 //var str = "213"; 34 35 var ipreg = /^([1-9]|[1-9]\d|1\d\d|2[01]\d|22[0-3])(\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])){3}$/; 36 37 var ip = "192.168.100.234"; 38 var ip = "192.168.100.256"; //null 39 var ip = "My ip is 192.168.23.9"; //null 40 41 var rst = ip.match(ipreg); 42 console.log(rst); 43 </script> 44 45 <style type="text/css"> 46 </style> 47 </head> 48 49 50 <body> 51 52 </body> 53 </html>
4 验证表单域信息
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>10-register</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script type="text/javascript"> 10 window.onload = function(){ 11 var fm = document.getElementsByTagName('form')[0]; 12 fm.onsubmit = function(evt){ 13 //对用户名和密码进行验证 14 //用户名：字母和数字组成 15 //手机号码：13 15 18开始的 16 var name = document.getElementById('username').value; 17 var tel = document.getElementById('usertel').value; 18 //校验用户名 19 //var name_reg = /^[a-z]+[0-9]+$/; 20 var name_reg = /^([a-z]+[0-9]+[a-z]*)+$/; 21 var name_rst = name.match(name_reg); 22 if(name_rst === null){ 23 alert('用户名不合法'); 24 evt.preventDefault(); 25 } 26 //校验手机号码 27 var tel_reg = /^((1[35]\d{9})|(18[0456]\d{8}))$/; 28 var tel_rst = tel.match(tel_reg); 29 if(tel_rst === null){ 30 alert("手机号码不合法"); 31 evt.preventDefault(); 32 } 33 } 34 } 35 </script> 36 37 <style type="text/css"> 38 </style> 39 </head> 40 41 42 <body> 43 <form method="post" action="10.php"> 44 用户名：<input type="text" id="username" /><br /> 45 手机号码：<input type="text" id="usertel" /><br /> 46 <input type="submit" value="注册" /> 47 </form> 48 </body> 49 </html>
总结：
- ()小阔号模式单元重复匹配 \1 \2 \3 \n
- 正则组合字符组成
\d \D \w \W \s \S \b \B
- 正则限制字符组成
{m} {m,} {m,n}
4. 正向、反向预查
正向匹配 ：内容(?=pattern)
正向不匹配：内容(?!pattern)
反向匹配：(?<=pattern)内容
反向不匹配：(?<!pattern)内容
5.案例（ip、邮箱、手机号码、表单域验证）
