12.正则
概念:匹配有规律的字符串,匹配上则正确
1.正则的创建方式
构造函数创建
// 修饰符 igm
// i 忽视 ignore
// g global 全球 全局
// m 换行
var reg=new RegExp("匹配的内容","修饰符")
var str = "this is a Box";
var reg = new RegExp("box", "igm");
console.log(reg.test(str));//true
字面量的创造
var reg = /box/igm;
console.log(reg.test("this is a Box"));//true
2.正则的方法
test()条件满足,返回true,否则返回false
exec()条件满足,返回数组,不满足返回null
注意:参数为要匹配的字符串
3.字串符匹配正则的方法(4个)
- search()条件满足返回下标,不满足返回-1
- match()条件满足返回数组,条件不满足返回null
- split()切割,返回新的数组
- replace()替换.返回新的字符串
4.元字符
-
点(.) :代表除了换行以为的所有单个字符(一个点,表示一个字符)
-
星号(*):配合其他字符使用,可以让其他字符出现任意多次
-
[]:表示字符可以出现的范围
[a-z]*表示任意0到多个a-z的字母
-
(非字符):取反[0-9]可以有任意多个非0-9的字符
-
+:表示至少出现一次
5.元符号
- \w*::匹配任意多个数字字母下划线 , \w : 等价于[a-zA-Z0-9_]
- \d*:\d 代表数字, 等价于 [0-9],\d* 表示任意多个数字
- \D:匹配非数字, 相当于[^0-9]
- \D{7,}: 匹配至少7个非数字, 相当于[^0-9]{7,}
6.锚元字符
- /^ 匹配开始,从头开始匹配
- $/ 匹配结尾,从结尾开始匹配
- \s 匹配空格
- 使用或模式匹配: |, | 代表或者的意思, 匹配其中一种字符串
- 分组模式匹配: (), ()加上小括号, 将内容进行分组, 可以作为一个整体进行多次匹配
案例
不可见区域的高度获取(封装一个getScroll方法) 固定导航栏案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
11<br>
11
<script>
//onscroll 滚动条事件 document.documentElement.scrollTop Left
//<!DOCTYPE html>声明头使用document.documentElement.scrollTop
//不带DTD 使用document.body.scrollTop
//ie9+ 使用window.pageYoffset
//ie678
// '获取'不可见区域的兼容写法
function getScroll() {
// 不管有没有DTD都可以使用,如果不是ie9+.执行false
if (window.pageYOffset != undefined) {
return {
left: window.pageXOffset,
top: window.pageYOffset
}
// 带有DTD
} else if (document.compatMode === "CSS1Compat") {
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
// 不带DTD(声明头 <!DOCTYPE html>)
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
document.onscroll = function () {
console.log(document.compatMode);//带有CSS1Compat,不带DTD BackCompat
var obj = getScroll();
console.log(obj);
}
</script>
</body>
</html>```
