Skip to content

Commit 01b4f0e

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
修改正则表达式知识点
1 parent 894788f commit 01b4f0e

2 files changed

Lines changed: 125 additions & 9 deletions

File tree

‎2 常用操作/08-正则表达式.html‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
</head>
6-
<body>
7-
<script type="text/javascript">
3+
<head>
4+
<meta charset="utf-8">
5+
</head>
6+
<body>
7+
<script type="text/javascript">
88
/**
99
* 【正则表达式】
1010
*/
1111
/**
1212
* 【1 正则定义】
1313
*/
1414
//1.内置对象法 new RegExp("正则表达式",模式);
15+
// new RegExp(pattern, attributes);
1516
var reg1 = new RegExp(/abc/);
17+
var reg3 = new RegExp("abc","g");
1618
//2.字面量[]{}/a/
1719
var reg2 = /def/;
20+
var reg4 = /abc/g;
1821
console.log(reg2);
1922
console.log(typeof reg2);
2023

@@ -24,20 +27,42 @@
2427
//test() 使用正则对象去匹配字符串，如果匹配成功返回ture，否则返回false
2528
console.log(reg1.test("abc"));//true
2629
console.log(/abc/.test("sun"));//false
27-
//exec() 根据正则表达式去查找字符串符合规则的内容
30+
//exec() 根据正则表达式去查找字符串符合规则的内容，返回数组，没有匹配项返回null
2831
//查找出三到四个字符组成的单词。
2932
var str ="sun jian feng sunshine studio";
3033
var reg = /\b[a-z]{3,4}\b/gi;
3134
var line ="";
3235
while((line = reg.exec(str))!=null){
3336
document.write(line+"<br/>");//sun jian feng
3437
}
38+
console.log(reg.exec(str));// ["sun", index: 0, input: "sun jian feng sunshine studio"]
39+
// match() 根据正则表达式去查找字符串符合规则的内容，返回数组，没有匹配项返回null
40+
console.log(str.match(reg));// ["sun", "jian", "feng"]
41+
42+
// 比较exec和match
43+
// 1. exec是正则表达式方法，参数为字符串；match是字符串方法，参数为正则表达式
44+
// 2. 正则表达式有无子表达式(如/abc(\s*)/中(\s*))，是否定义为非全局匹配
45+
// 2.1. 无子表达式，非全局匹配，二者相同，返回第一个匹配的字符串内容
46+
// 2.2. 无子表达式，全局匹配，若存在多处匹配，exec返回第一处匹配的单元素数组，match返回多元素数组
47+
console.log(reg.exec(str));// ["sun", index: 0, input: "sun jian feng sunshine studio"] 只返回第一处匹配项
48+
console.log(str.match(reg));// ["sun", "jian", "feng"]
49+
// 3. 有子表达式，非全局匹配，二者相同
50+
var reg = new RegExp("a(b(c))");//模式0:abc，模式1:bc，模式2:c
51+
var str = "1abc2,3abc4";
52+
console.log(reg.exec(str));//["abc", "bc", "c", index: 1, input: "1abc2,3abc4"]
53+
console.log(str.match(reg));//["abc", "bc", "c", index: 1, input: "1abc2,3abc4"]
54+
// 4. 有子表达式，全局匹配，match忽略子表达式，只查找模式0并返回所有内容
55+
var reg = new RegExp("a(b(c))","g");//模式0:abc，模式1:bc，模式2:c
56+
var str = "1abc2,3abc4";
57+
console.log(reg.exec(str));//["abc", "bc", "c", index: 1, input: "1abc2,3abc4"]
58+
console.log(str.match(reg));//["abc", "abc"]
3559

3660
/**
3761
* 【3 模式】
3862
*/
3963
// g 全局模式（global）（全文查找出现的所有pattern）
4064
// i 不区分大小写（ease-insensitive）（忽略大小写）
65+
// m 执行多行匹配
4166

4267
/**
4368
* 【4 使用一：五大内部类】
@@ -115,8 +140,12 @@
115140
//()括号提高运算优先级
116141
console.log(/(abc)|(xyz)/.test("xy")); //false
117142
console.log(/(abc)|(xyz)/.test("abcd")); //true
118-
119-
</script>
143+
console.log("------------- 贪婪匹配/懒惰匹配 -------------");
144+
// 量词默认为贪婪匹配(匹配最长串)，量词+"?"可转化为懒惰匹配模式(匹配最短串)
145+
// a.*?b匹配最短的以a开始b结束的字符串
146+
console.log("aabab".match(/a.*?b/g)); //["aab", "ab"] 懒惰匹配
147+
console.log("aabab".match(/a.*b/g)); //["aabab"] 贪婪匹配
120148

121-
</body>
149+
</script>
150+
</body>
122151
</html>

‎5 进阶/csxiaoyao-判断数据类型总结.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
</head>
6+
<body>
7+
<script>
8+
// typeof、instanceof、constructor、prototype、$.type()/jquery.type()
9+
var a = "csxiaoyao";
10+
var b = 1993;
11+
var c = true;
12+
var d = undefined;
13+
var e = null;
14+
var f = new Date();
15+
var g= [1,2,3];
16+
var h = function(){alert("sunshine");};
17+
18+
// 1. typeof (返回的类型为字符串形式)
19+
console.log(typeof a); // string
20+
console.log(typeof b); // number
21+
console.log(typeof c); // boolean
22+
console.log(typeof d); // undefined
23+
console.log(typeof e); // object
24+
console.log(typeof f); // object
25+
console.log(typeof g); // object
26+
console.log(typeof h); // function
27+
console.log(typeof a == "string"); // true
28+
console.log(typeof a == String); // false　
29+
30+
// 2. instanceof (判断已知对象类型的方法)
31+
// console.log(e instanceof null); // Right-hand side of 'instanceof' is not an object
32+
console.log(f instanceof Date); // true
33+
console.log(g instanceof Array); // true
34+
console.log(h instanceof Function); // true
35+
36+
// 3. constructor (根据对象的constructor判断)
37+
console.log(f.constructor === Date); // true
38+
console.log(g.constructor === Array); // true
39+
console.log(h.constructor === Function); // true
40+
// 注意：constructor 在类继承时会出错
41+
function A(){};
42+
function B(){};
43+
A.prototype = new B(); //A继承自B
44+
var aObj = new A();
45+
console.log(aObj.constructor === A);// false
46+
console.log(aObj.constructor === B);// true
47+
// instanceof没有问题
48+
console.log(aObj instanceof A);// true
49+
console.log(aObj instanceof B);// true
50+
// 解决construtor的问题通常让对象的constructor手动指向自己
51+
aObj.constructor = A; //将自己的类赋值给对象的constructor属性
52+
console.log(aObj.constructor === A);// true
53+
console.log(aObj.constructor === B);// false
54+
55+
// 4. prototype(通用但很繁琐的方法)
56+
console.log(Object.prototype.toString.call(a) === '[object String]')// true
57+
console.log(Object.prototype.toString.call(b) === '[object Number]')// true
58+
console.log(Object.prototype.toString.call(c) === '[object Boolean]')// true
59+
console.log(Object.prototype.toString.call(d) === '[object Undefined]')// true
60+
console.log(Object.prototype.toString.call(e) === '[object Null]')// true
61+
console.log(Object.prototype.toString.call(f) === '[object Date]')// true
62+
console.log(Object.prototype.toString.call(g) === '[object Array]')// true
63+
console.log(Object.prototype.toString.call(h) === '[object Function]')// true
64+
// 大小写不能写错，比较麻烦，但胜在通用
65+
66+
// 5. jquery.type() (万能方法)
67+
// 如果对象是undefined或null，则返回相应的“undefined”或“null”
68+
jQuery.type( undefined ) === "undefined"
69+
jQuery.type() === "undefined"
70+
jQuery.type( window.notDefined ) === "undefined"
71+
jQuery.type( null ) === "null"
72+
// 如果对象有一个内部的[[Class]]和一个浏览器的内置对象的 [[Class]] 相同，返回相应的 [[Class]] 名字
73+
jQuery.type( true ) === "boolean"
74+
jQuery.type( 3 ) === "number"
75+
jQuery.type( "test" ) === "string"
76+
jQuery.type( function(){} ) === "function"
77+
jQuery.type( [] ) === "array"
78+
jQuery.type( new Date() ) === "date"
79+
jQuery.type( new Error() ) === "error" // as of jQuery 1.9
80+
jQuery.type( /test/ ) === "regexp"
81+
// 其他一切都将返回类型“object”
82+
83+
// 总结：通常情况下用typeof判断，遇到预知Object类型的情况可以选用instanceof或constructor方法
84+
85+
</script>
86+
</body>
87+
</html>

0 commit comments

Comments
 (0)