JavaScript入门:WEBAPIs DOM BOM
通过本篇将了解 如何通过 js 控制 html 里面的元素，做各种网页交互效果的梳理。
操作 DOM BOM
主要了解
- DOM 获取元素，修改属性
- DOM 实践基础 包括注册时间。tab栏切换等
- DOM 事件对象、事件委托等
- DOM 节点操作 轮播图
- DOM 操作浏览器，本地存储，插件等
- 正则表达式
Web API 基本认识
Web API
作用： 使JS操作html 元素以及浏览器
分类：
- DOM(文档对象模型，操作html元素，或者xml)、
- BOM(浏览器对象模型，操作浏览器（如alert prompt等)
DOM简介
DOM树（文档树）：
- 将HTML标签用树状图的方式展现出来
- 整个html对象 属于 document 文档
- 文档最大的标签就是 html文档
- html 标签里面 一个 head标签一个body标签
- ……
整个标签/元素 如果倒过来分析，会认为是一种倒过来的树形结构，非常直观的体现了标签与标签之间的关系
DOM 对象
浏览器/执行引擎将html标签 根据 htmll标签生成JS对象
所有标签都可以映射成一个JS对象
所有标签的属性与方法也被映射到对象上
const div = document.querySelector(‘div’)
console.dir(div)
- 之后就通过js 来操控这些对象的属性实现动态的交互
- document是DOM中最大的对象，所有网页的内容都可以用document控制，如document.write()
获取DOM元素
根据CSS选择器来获取DOM元素 (重点) (为什么较CSS选择器呢，因为CSS里面的style也是通过这种方式确认选择的元素的)
选择匹配的第一个元素, 千万记得加引号
- document.querySelector(‘div’) // 选取标签 标签选择器
document.querySelector(‘.box’) // 以类名获取 类名选择器
document.querySelector(‘#nav’) // 以id获取 id选择器
- documnet.querySelector(‘[type=search]’) // 属性选择器
document.querySelector(‘ul li: first-child’)
CSS 选择器 匹配 的第一个元素，是一个HTMLElement 对象,如果没有匹配到就返回空值
选择匹配多个元素
- document.querySelectorAll(‘ul li’)
- 通过 这种方式获取的数组其实是一种伪数组，没有pop(),push() 方法
注意：获取一个DOM元素时，可以直接进行修改操作，但是获取多个dom元素时不能直接修改，只能通过遍历的方式修改。
<body>
<div class = 'box'>abc</div>
<p id = "nav">导航栏</p>
<ul>
<li>测试1</li>
<li>测试2</li>
</ul>
<script>
</script>
</body>- 其他获取DOM元素方法（了解）
- document.getElementById(‘nav’)
- document.getElementsByTagName(‘div’)
- document.getElementsByClassName(‘w’)
- ……
操作元素内容
操作元素文本属性
- 方式一： 对象.innerText 属性
- 方式二： 对象,innerHTML属性
元素.innerText 属性
不是赋值时，作用是获取标签之间的元素
赋值时是更改元素内容
- const box = document.queySelector(‘.box’)
- console.log(box.innerText)
- box.innerText = ‘更改后。。。’
- 但是请注意，如果文字内容里面加了标签，执行器不会解析标签！！！
元素.innerHTML 属性
- 与上面的最大区别就是会解析标签
操作元素属性
操作元素常用属性
如 img 的 src alt 属性
如 url 的 href 属性
<div>
<img src="./images/1.webp" alt="ddd">
</div>
<h1>Hello World</h1>
<script>
const im_i = document.querySelector('img');
function random(M = 1, N = 1) {
let rad = Math.floor(Math.random() * (M + N - 1)) + M;
return rad;
}
const rad = +random(1, 2);
console.log(rad)
im_i.src = `./images/${rad}.webp`; // 注意必须要用反引号表示模板字符串
</script>操作元素的样式
通过 style 属性操作CSS
对象.style.样式属性 = 新值
box.style.width=
200px注意：
修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位
操作类名(className) 操作CSS
- 元素.className = ‘类名’；
- 注意 再 style属性里面必须有 对应的类型
元素.className = '类名1 类名2'
- 通过 classList 操作类控制CSS
- className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
- 如：
元素.classList.add('类名')元素.classList.remove('类名')元素.classList.toggle('类名')//切换一个类
操作表单属性
- input （txt/password）
- value 属性是输入的值，可以获取或者设置值
- type 当 为 txt 格式、他是可见的 当为 password属性 是 不可见的
- input (checkbox)
- 通过disabled、checked、selected 等属性 获取 其是否可用？是否被选中等等
- button
- 通过disabled 获取是否可以被禁用
<body>
<input type="text" value="请输入">
<button disabled>按钮</button>
<input type="checkbox" name="" id="" class="agree">
<script>
// 1. 获取元素
let input = document.querySelector('input')
// 2. 取值或者设置值 得到input里面的值可以用 value
// console.log(input.value)
input.value = '小米手机'
input.type = 'password'
// 2. 启用按钮
let btn = document.querySelector('button')
// disabled 不可用 = false 这样可以让按钮启用
btn.disabled = false
// 3. 勾选复选框
let checkbox = document.querySelector('.agree')
checkbox.checked = false
</script>
</body>自定义属性
标准属性：标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
<div>
<div class="box" data-hhhhh = "ssss"></div>
</div>
<script>
const box = document.querySelector(".box")
console.log(box.dataset.id)
</script>DOM 事件基础
间歇函数
setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
<script>
// 1. 定义一个普通函数
function repeat() {
console.log('不知疲倦的执行下去....')
}
// 2. 使用 setInterval 调用 repeat 函数
// 间隔 1000 毫秒，重复调用 repeat
setInterval(repeat, 1000)
</script>关闭 clearInterval(timer)
<script>
let timer = setInterval(function(){
console.log('hi')
},1000)
clearInterval(timer)
</script>事件监听（绑定）
语法
元素对象.addEventListener('事件类型',要执行的函数)
事件监听三要素
- 事件源：元素对象
- 事件类型：以什么什么方式（被）触发 ： 如（被）点击 click， （被）鼠标经过 mouseover
- 事件调用的函数：要做什么事
事件监听版本
- DOM L0
事件源.on事件 = function() { }
- DOM L2
事件源.addEventListener(事件， 事件处理函数)
区别：
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
发展史：
DOM L0 ：是 DOM 的发展的第一个版本； L：level
DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
DOM L2：使用addEventListener注册事件
DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型
事件类型
鼠标事件（鼠标触发）
- click 鼠标点击
- mouseover 鼠标经过
- mouseleave 鼠标离开
焦点事件（表单获得光标）
- focus 获得焦点
- blur 失去焦点
键盘事件（键盘触发）
- Keydown 按键按下触发
- Keyup 按键抬起触发
文本事件（表单输入触发）
- input 用户输入事件
更改事件
- change 常用于 input 等 内容发生变化时
事件对象
事件对象：事件触发时生成的一个对象，这个对象里有事件触发时的相关信息，如鼠标的位置信息等
获取事件对象
再事件绑定的回调函数中，第一个参数就是事件对象
一般命名为event、 或者 ev 或者e
元素.addEventListener('click',function(e))
事件对象的属性
type
- 获取当前的事件类型
clientX/clientY
- 获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置
key
用户按下的键盘键的值
- 空格 Enter 可以识别 大小写键盘之后的
现在不提倡使用keyCode
环境对象(this 对象)
环境对象：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】 是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window
每个函数都隐含了this，普通函数里面指向的是 window
function fn(){
console.log(this) // 输出Window
}
// 上述函数等价于
window.fn()对于事件调用的函数，this指向的是事件源对象
const btn = documnet.querySelector('button')
btn.addEventListener('click',function(){
console.log(this) //输出 btn 对象
})事件流
事件流指的是事件完整执行过程中的流动路径
主要有捕获和冒泡两个阶段
- 捕获阶段是 从父到子 冒泡阶段是从子到父；实际工作都是使用事件冒泡为主
事件捕获
从DOM的根元素开始去执行对应的事件 (从外到里)
事件捕获需要写对应代码才能看到效果
当使得一个事件触发时 会从 根元素 依次 执行到子元素绑定的事件
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获
事件冒泡
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解：
当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
l 事件冒泡是默认存在的
l L2事件监听
addEventListener第三个参数是 false，或者默认都是冒泡
阻止冒泡
我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转
e.stopPropagation() 其实是阻止传播，必须必须要之间对象来调用
阻止默认行为
什么是默认行为
- 对于 form 标签里的 input(type=submit) ，当点击时（对应的行为是‘触发事件是 submit’），会默认将表单数据提交到 form标签action队形的url 地址里
- 对于a标签 点击文字时 会默认跳转到 href 网址里面 当点击文本内容时（默认行为 ‘click’） 会默认跳转到 href 的网址
阻止元素默认行为如何做？
在对应默认行为中绑定事件，事件里面写e.preventDefault()
解绑事件
on事件方式，直接使用null覆盖偶就可以实现事件的解绑
btn.onclick=function(){...}
btn.onclick=nulladdEventListener方式，必须使用:removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])
function fn(){
alert('点击了')
}
btn.addEventListener('click',fn)
btn.removeEventListener('click',fn)注意：匿名函数无法被解绑
鼠标经过事件的区别
鼠标经过事件：
mouseover 和 mouseout 会有冒泡效果 (相当于认为子标签不属于当前标签)
mouseenter 和 mouseleave 没有冒泡效果 (推荐)
事件委托
假设一个ul 标签 里面所有的 li标签都需要添加同一个点击事件
- 如果是之前，我们会遍历所有 li 给他添加点击事件
- 但现在我们采用冒泡的思想，将点击事件转移到父标签 ul上面
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
通过 e.target.tagName 获取真正的触发事件的标签类型，但必须大写！！！
优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点。
其他事件
页面加载事件
- 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
- PS:老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到, 导致报错
- 这时就可以在script 脚本中添加 window.load表示整个 页面加载完毕后执行回调函数
window.addEventListener('load',function(){ })
- 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、
document.addEventListener('DOMContentLoaded',function(){ })
元素滚动事件
- 滚动条在滚动的时候持续触发的事件
- 很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
window.addEventListener('scroll',function(){ })- 可以使用scroll 来检测滚动的距离
- 适用于有滚动条的标签、元素等
- 页面滚动事件-获取位置：scrollLeft和scrollTop
- 获取元素内容已经滚动的位置
- 一般同 scroll 事件里面获取
- 也可以用来设置，等价于 scrollTo()
window.addEventListener('scroll',function(){
console.log(this.srollTop)
})
// 对于任意 overflow = 'scroll' 的元素都可以这样获取，除了整个 html 标签除外
// 对于 整个 html 标签获取其滚动值比较特殊
window.addEventListener('scroll',function(){
const n = document.documnetElement.scrollTop
console.log(n)
})
页面尺寸事件
会在窗口尺寸改变的时候触发事件
resize
或者获取页面尺寸、元素的宽和高
window.addEventListener('resize',function(){
})
// 检测屏幕宽度
window.addEventListener('resize',function(){
let w = document.documnetElement.clientWith
console.log(w)
})元素尺寸于位置
获取宽高：
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取出来的是数值,方便计算
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
获取位置：
获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop 注意是只读属性
M端事件（移动端）
移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
| 触屏事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开时触发 |
DOM节点操作
DOM树里每一个内容都称之为节点
- 元素节点 比如 div标签
- 属性节点 比如 class属性 id 属性
- 文本节点 比如标签里面的文字
- 其他节点
查找节点
节点关系：针对的找亲戚返回的都是对象
- 父节点：
子元素.parentNode找不到则为 null 子节点:
父元素.children获得所有子节点- 得到的是一个伪数组
兄弟节点
nextElementSibling属性previousElementSibling属性
增删节点
增加节点
分两步，先创建，后追加
- 创建节点
const div11 = documnet.createElement('div')
- 追加节点(两种方式)
父元素.appendChild(div)
父元素.insert(div)
- 克隆节点
const div = div11.cloneNode(布尔值)
若为true，则代表克隆时会包含后代节点一起克隆；若为false，则代表克隆时不包含后代节点；默认为false
删除节点
父元素.removeChild(要删除的元素)
如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
BOM
window 对象（最大）
BOM对象（浏览器对象模型）
BOM(Browser Object Model ) 是浏览器对象模型
BOM指的时浏览器对象，它包含了document文本，所以他其实包含了DOM
- window对象是一个全局对象，也可以说是JavaScript中的顶级对象
- 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。（window.document.document）
- 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法（window.var变量）
- window对象下的属性和方法调用的时候可以省略window
定时器-延时函数
JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
setTimeout(回调函数，等待毫秒数)
setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
清除延时函数
let timer = setTimeout(回调函数，等待毫秒数)
clearTimeout(timer)
延时函数VS间歇函数
- 延时函数: 执行一次 常用于5秒钟之后消失的广告等场景
- 间歇函数:每隔一段时间就执行一次,除非手动清除
JS执行机制
左边 ： 1 3 2
右边 ： 1 3 2
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事.
如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步
同步任务
同步任务都在主线程上执行，形成一个执行栈
异步任务
JS 的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型:
1、普通(监听)事件，如 click、resize 等，因为不知道什么时候时间发生
2、资源加载，如 load、error 等
3、定时器，包括 setInterval、setTimeout 等
异步任务相关添加到任务队列中（任务队列也称为消息队列）。
JS 执行机制
- 先执行执行栈中的同步任务。
- 异步任务放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop ） 。
console.log(1)
document.addEventListener('click', function () {
console.log(4)
})
console.log(2)
setTimeout(function () {
console.log(3)
}, 3000)1 2 4 3 或者 1 2 3 4
执行栈先执行同步任务 1 2
把异步任务推给浏览器执行，浏览器是这里实现多线程 监听 执行，可能是时间先到 或者 先点击 ，执行完第一个异步任务后将结果推给任务队列，任务队列获取结果
二年为队列执行完后 反馈到执行执行栈 开始执行？
这里还是没搞明白，后面搞懂了再整理整理。。。
location对象
location对象与 document 对象同一级别 都属于 window对象
- location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
- location对象的常用属性/方法是：
- location.href : js 常用它来跳转页面
location.href='baidu.com' - location.search : 属性获取当前窗口地址中携带的参数，符号 ？后面部分 （包括？）
- location.hash ： 获取地址中的哈希值 ， 符号 # 后面部分 （包括#）
- location.reload() : 刷新页面，功能类似于页面中按下了F5 刷新按键，location.reload(true) : 强制刷新，相当于 ctrl + F5
- location.href : js 常用它来跳转页面
navigator对象
navigator对象与 document 对象同一级别 都属于 window对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
navigator对象的常用属性/方法是：
- navigator.userAgent ： 检测浏览器的版本及平台
// 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn' }
})()
// ps : !(function(){})() 是匿名函数的一种写法history对象
navigator对象与 document 对象同一级别 都属于 window对象
history 的数据类型是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
常用history 对象的方法：
- back()
- forward()
- go(参数) ：2 是前进 2个页面 -3 是后退3个页面
本地存储
之前我们学的变量等数据，他都放在内存里面，一刷新就没有了，有些数据我们是不想丢失的，如cookie（一般我们会把令牌等东西放在cookie里面作为身份识别等功能），所以我们相当于在浏览器在硬盘里开辟了空间帮我们进行永久性存储
本地存储分
- sessionStorage
- localStorage
每一个大概都是5M左右
localStorage
作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
特性：
可以多窗口（页面）共享（同一浏览器可以共享，跨域不行）
以键值对的形式存储使用
语法：
localStorage.setItem("key", "value")
localStorage.getItem("key")
localStorage.removeItem("key")
PS: 进一步探索会发现，只要在当前域名下 如这里的B站域名下，相关的 键值对都可以访问到，但是如果站换到其他域名，如baidu.com就访问不到了这就是跨域问题
sessionStorage
特性：
生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
用法跟localStorage 基本相同
存储复杂数据类型
本地只能存储字符串,无法存储复杂数据类型（数组或者对象）存是可以存，但是取出来不能用
解决方案：需要将复杂数据类型转换成JSON字符串,在存储到本地
存：JSON.stringify(复杂数据类型)
取：JSON.parse(JSON字符串)
正则表达式
定义与使用
定义
声明一个RegExp有两种方式：
// 方式一
var re=new RegExp(pattern,modifiers);
// 方式二
var re =/pattern/modifiers;pattern（模式）： 描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配，具体有 i 、g 和 m 三类,这三类也可以自由组合也可以不添加修饰符。
修饰符可以省略
| 修饰符 | 释义 |
|---|---|
| i | 代表忽略大小写 |
| g | 代表全局匹配 |
| m | 执行多行匹配 |
示例：
1）var re=new RegExp(pattern,modifiers);
var re1=new RegExp("\\w{2}");
var re2=new RegExp("\\w{2}","i");
2）var re =/pattern/modifiers;
var re3=/\w{2}/;
var re4=/\w{2}/ig;使用
test() 方法 用来查看正则表达式与指定的字符串是否匹配，返回true 或者false
regexp.test(被检测的字符串)exec()方法 检索（查找）符合规则的字符串：
regexp.exec(被检测的字符串)exec() 将检索字符串 string，从中得到与正则表达式 regexp 相匹配的文本。如果 exec() 找到了匹配的文本，它就会返回一个结果数组。否则，返回 null。这个返回数组的第 0 个元素就是与表达式相匹配的文本。第 1 个元素是与 regexp 的第一个子表达式相匹配的文本（如果存在）。第 2 个元素是与 regexp 的第二个子表达式相匹配的文本，以此类推。通常，数组的 length 属性声明的是数组中的元素个数。除了数组元素和 length 属性之外，exec() 还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性指的就是 string。在调用非全局 RegExp 对象的 exec() 方法时，返回的数组与调用方法 String.match() 返回的方法相同。
元字符
边界符
^ 表示 以什么为 开头
$ 表示 以什么为 结尾
如果 ^ 和 $ 在一起，表示必须是精确匹配
<body>
<script>
// 元字符之边界符
// 1. 匹配开头的位置 ^
const reg = /^web/
console.log(reg.test('web前端')) // true
console.log(reg.test('前端web')) // false
console.log(reg.test('前端web学习')) // false
console.log(reg.test('we')) // false
// 2. 匹配结束的位置 $
const reg1 = /web$/
console.log(reg1.test('web前端')) // false
console.log(reg1.test('前端web')) // true
console.log(reg1.test('前端web学习')) // false
console.log(reg1.test('we')) // false
// 3. 精确匹配 ^ $
const reg2 = /^web$/
console.log(reg2.test('web前端')) // false
console.log(reg2.test('前端web')) // false
console.log(reg2.test('前端web学习')) // false
console.log(reg2.test('we')) // false
console.log(reg2.test('web')) // true
console.log(reg2.test('webweb')) // flase
</script>
</body>量词
量词用来设定某个模式重复次数
注意： 逗号左右两侧千万不要出现空格
<body>
<script>
// 元字符之量词
// 1. * 重复次数 >= 0 次
const reg1 = /^w*$/
console.log(reg1.test('')) // true
console.log(reg1.test('w')) // true
console.log(reg1.test('ww')) // true
console.log('-----------------------')
// 2. + 重复次数 >= 1 次
const reg2 = /^w+$/
console.log(reg2.test('')) // false
console.log(reg2.test('w')) // true
console.log(reg2.test('ww')) // true
console.log('-----------------------')
// 3. ? 重复次数 0 || 1
const reg3 = /^w?$/
console.log(reg3.test('')) // true
console.log(reg3.test('w')) // true
console.log(reg3.test('ww')) // false
console.log('-----------------------')
// 4. {n} 重复 n 次
const reg4 = /^w{3}$/
console.log(reg4.test('')) // false
console.log(reg4.test('w')) // flase
console.log(reg4.test('ww')) // false
console.log(reg4.test('www')) // true
console.log(reg4.test('wwww')) // false
console.log('-----------------------')
// 5. {n,} 重复次数 >= n
const reg5 = /^w{2,}$/
console.log(reg5.test('')) // false
console.log(reg5.test('w')) // false
console.log(reg5.test('ww')) // true
console.log(reg5.test('www')) // true
console.log('-----------------------')
// 6. {n,m} n =< 重复次数 <= m
const reg6 = /^w{2,4}$/
console.log(reg6.test('w')) // false
console.log(reg6.test('ww')) // true
console.log(reg6.test('www')) // true
console.log(reg6.test('wwww')) // true
console.log(reg6.test('wwwww')) // false
// 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败
</script>范围
表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围
<body>
<script>
// 元字符之范围 []
// 1. [abc] 匹配包含的单个字符， 多选1
const reg1 = /^[abc]$/
console.log(reg1.test('a')) // true
console.log(reg1.test('b')) // true
console.log(reg1.test('c')) // true
console.log(reg1.test('d')) // false
console.log(reg1.test('ab')) // false
// 2. [a-z] 连字符 单个
const reg2 = /^[a-z]$/
console.log(reg2.test('a')) // true
console.log(reg2.test('p')) // true
console.log(reg2.test('0')) // false
console.log(reg2.test('A')) // false
// 想要包含小写字母，大写字母 ，数字
const reg3 = /^[a-zA-Z0-9]$/
console.log(reg3.test('B')) // true
console.log(reg3.test('b')) // true
console.log(reg3.test(9)) // true
console.log(reg3.test(',')) // flase
// 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
const reg4 = /^[a-zA-Z0-9_]{6,16}$/
console.log(reg4.test('abcd1')) // false
console.log(reg4.test('abcd12')) // true
console.log(reg4.test('ABcd12')) // true
console.log(reg4.test('ABcd12_')) // true
// 3. [^a-z] 取反符
const reg5 = /^[^a-z]$/
console.log(reg5.test('a')) // false
console.log(reg5.test('A')) // true
console.log(reg5.test(8)) // true
</script>
</body>字符类
某些常见模式的简写方式，区分字母和数字
[]匹配字符集合, 如 [ade][]里面加上 - 连字符 [a-c][]里面加上 ^ 取反符号 表示 不取
.匹配除换行符之外的任何单个字符
日期格式：
/^\d{4}-\d{1,2}-\d{1,2}$/
替换和修饰符
replace 替换方法，可以完成字符的替换
语法
字符串.replace(/正则表达式/,'替换的文本')<body>
<script>
// 替换和修饰符
const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
// 1. 替换 replace 需求：把前端替换为 web
// 1.1 replace 返回值是替换完毕的字符串
// const strEnd = str.replace(/前端/, 'web') 只能替换一个
</script>
</body>修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- g 是单词 global 的缩写，匹配所有满足正则表达式的结果
<body>
<script>
// 替换和修饰符
const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
// 1. 替换 replace 需求：把前端替换为 web
// 1.1 replace 返回值是替换完毕的字符串
// const strEnd = str.replace(/前端/, 'web') 只能替换一个
// 2. 修饰符 g 全部替换
const strEnd = str.replace(/前端/g, 'web')
console.log(strEnd)
</script>
</body>
