JavaScript10-BOM和正则表达式
1.BOM分类
// 1 BOM 浏览器对象模型
// Window 代表浏览器当前窗口
// History 代表浏览器历史记录
// Location 代表浏览器地址栏
// Navigator 代表浏览器信息，如浏览器版本
// Screen 代表设备屏幕信息
// 2 BOM 对象的访问，BOM对象都是window属性，所以可以直接访问。
console.log(history);
console.log(window.history);
console.log(location);
console.log(window.location);
console.log(navigator === window.navigator); // true
console.log(screen === window.screen); // true
2.history
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
document.getElementById('btn01').onclick = function () {
// history 表示浏览器的历史记录，由于隐私问题，history无法访问具体的历史记录，
// 只能进行前后的翻页。
// history.length 当前访问的页面数量。
console.log(history.length);
// history.forward() 切换到前边访问的网站。
//history.forward();
// history.back() 相当与浏览器的回退按钮。
history.back();
// history.go() 跳转到指定的历史记录。
// history.go(1)相当于history.forward()。
history.go(1);
}
}
</script>
</head>
<body>
<button id="btn01">btn01</button>
</body>
</html>
3.location
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
document.getElementById('btn01').onclick = function () {
// location 表示浏览器地址栏信息
console.log(location);
// 获取当前地址的端口
console.log(location.port); // 63342
// 可以通知直接修改location的值来进行网页跳转，但是会产生历史记录。
//location = 'https://www.baidu.com';
// location.assign() 进行网页跳转，和直接修改location一样，都会产生历史记录。
// location.assign('https://www.baidu.com');
// location.replace() 网页跳转，不会产生历史记录，相当与网页替换。
// location.replace('https://www.baidu.com');
// location.reload() 重新加载网页。
// location.reload();
// location.reload(true);参数为是否强制刷新。
location.reload(true);
}
}
</script>
</head>
<body>
<button id="btn01">btn01</button>
</body>
</html>
4.navigator
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-navigator</title>
<script>
window.onload = function () {
document.getElementById('btn01').onclick = function () {
// navigator表示浏览器对象信息
// 可以通过navigator识别出来不同的浏览器，但是有的浏览器不想被识别出来，会修改navigator返回的数据。
// 所以navigator中很多的属性是没有作用的。
// navigator.userAgent，使用代理，浏览器代理我们上网，所以返回浏览器信息
// 各个浏览器返回的信息。
// Chrome
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
// Firefox
// Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0
// IE
// Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 9.9.0)
// IE11
// Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 9.9.0; rv:11.0) like Gecko
let userAgent = navigator.userAgent;
console.log(userAgent);
}
}
</script>
</head>
<body>
<button id="btn01">btn01</button>
</body>
</html>
5.IE浏览器的判断
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
document.getElementById('btn01').onclick = function () {
// IE浏览器中独有ActiveXObject对象。
if (window.ActiveXObject) {
// window.ActiveXObject IE浏览器返回。
/*
function ActiveXObject() {
[native code]
}
*/
alert(window.ActiveXObject);
}
// 1 IE11之前的版本可以使用 if (window.ActiveXObject) {} 来判断是否是IE浏览器。
// 2 IE11对ActiveXObject对象的boolean值计算返回false。
console.log(!!window.ActiveXObject); // false
// 3 对于IE11可以使用 ('ActiveXObject' in window) 来判断是否是IE浏览器。
if ('ActiveXObject' in window) {
alert(window.ActiveXObject);
}
}
}
</script>
</head>
<body>
<button id="btn01">btn01</button>
</body>
</html>
6.正则表达式
// 1 创建正则表达式
// 通过创建对象来创建正则表达式，对象有两个参数：正则表达式 匹配模式
let r01 = new RegExp('a');
// 通过字面量来创建正则表达式。
let r02 = /a/;
// 校验字符串是否匹配正则表达式。
console.log(r01.test('abc')); // true
console.log(r02.test('abc')); // true
console.log(/a/.test('cb')); // false
console.log(/ab/.test('acd')); // false
console.log(/Abc/.test('abc')); // false
// 2 匹配模式，i 忽略大小写匹配。
// /Abc/i等价于 new RegExp('Abc', 'i');
console.log(/Abc/i.test('abc')); // true
7.正则量词
// 1 {m} 正好出现m次。正好出现2次
console.log(/a{2}/.test('aab')); // true
// 2 {m,} 至少出现m次。至少出现2次
console.log(/a{2,}/.test('aaab')); // true
// 3 {m,n} 出现m-n次。正好出现2-3次
console.log(/(ab){2,3}/.test('abab')); // true
// 4 + 至少出现1次，等价于{1,}
console.log(/a+/.test('aab')); // true
// 5 ? 0-1次，等价于{0,1}
console.log(/a?/.test('aa')); // true
// 6 * 0-多次，等价于{0,}
console.log(/a+/.test('aab')); // true
8.正则语法
// 1 | 或
console.log(/a|b/.test('ab')); // true
console.log(/a|b/.test('a')); // true
console.log(/a|b/.test('b')); // true
// 2 [] 出现在[]中的字符都表示或
console.log(/[ab]/.test('a')); // true
console.log(/[ab]/.test('ab')); // true
console.log(/[ab]/.test('b')); // true
// 3 [a-z] 任意小写字母
console.log(/[a-z]/.test('ab')); // true
// 4 [A-Z] 任意大写字母
console.log(/[A-Z]/.test('Ab')); // true
// 5 [0-9] 任意数字
console.log(/[0-9]/.test('0')); // true
// 6 [0-9a-zA-Z] 任意数字、小写字母和大写字母
console.log(/[0-9a-zA-Z]/.test('00')); // true
// 7 [^a] 出现在[]中的^表示除了，[^0-9] 除了数字。
console.log(/[^0-9]/.test('0')); // false
// 8 ^ 检查是否以制定字符开头
console.log(/^a/.test('ba')); // false
console.log(/^a/.test('ab')); // true
// 9 $ 检查是否以制定字符结尾
console.log(/a$/.test('ba')); // true
// 以a开头并且以a结尾，只匹配a
console.log(/^a$/.test('aa')); // false
// 10 使用正则判断字段传中是否含有 .
// . 表示任意字符
console.log(/./.test('aba')); // true
// 11 \. 表示.，在正则中需要使用\对.进行转义。
console.log(/\./.test('.')); // true
// 如果使用字符表示正则，则\也需要转义。
console.log(new RegExp('\\.').test('.')); // true
// 12 \w 任意单词字符，相当与[0-9a-zA-Z_]
console.log(/\w/.test('a')); // true
// \W 除了任意单词字符，相当与[^0-9a-zA-Z_]
console.log(/\W/.test('a')); // false
console.log(/\W/.test('%')); // true
// 13 \d 任意数字，相当与[0-9]；\D 除了数字，相当与[^0-9]
console.log(/\d/.test('0')); // true
console.log(/\D/.test('a')); // true
// 14 \s 空格；\D，除了空格。
console.log(/\s/.test(' ')); // true
console.log(/\S/.test('aa')); // true
// 15 匹配邮箱，前后如果没有加^$，就会在给定的字符中寻找是否有合法的邮箱。
// 前后加^$表示匹配正则。
let r = /^\w+(\.\w)?@[0-9a-z-]+(\.[a-z]{2-5}){1,2}$/;
9.字符串中和正则表达式相关的方法
// 1 search() search用来判断字符串中是否包含制定的正则，
// search() 返回匹配到的内容在字符串中的索引，如果没有匹配到则返回-1。
let s01 = 'abc123456adc';
// 字符串中是否保存数字
console.log(s01.search(/\d/)); // 3
// 2 split() 根据正则将字符串拆分。
let s02 = 'abc123ghk124wz';
console.log(s02.split(/12[3|4]/)); // (3) ['abc', 'ghk', 'wz']
// 3 replace() 根据正则表达式替换，replace默认只会替换第一个匹配的内容。
let s03 = 'abc123ghk124wz';
console.log(s03.replace(/12[3|4]/, '中')); // abc中ghk124wz
// 使用匹配模式替换所有符合正则的内容
console.log(s03.replace(/12[3|4]/g, '中')); // abc中ghk中wz
// 4 匹配模式
// i 忽略大小写
// g 全局匹配
console.log(s03.replace(/12[3|4]/gi, '中')); // abc中ghk中wz
// 5 match() 提取出正则表达式匹配到的字符串，默认只会提取到第一个匹配的内容。
// match() 会返回一个数组，表示提取到的内容。
let s04 = 'abc123ghk124wz';
let match = s04.match(/12[3|4]/);
console.log(match.length); // 1
console.log(match[0]); // 123
// 开启全局匹配，match会返回匹配到的所有的内容
match = s04.match(/12[3|4]/g);
console.log(match.length); // 2
console.log(match[0]); // 123
console.log(match[1]); // 124
浙公网安备 33010602011771号