WebAPI 复习

最新推荐文章于 2024-08-28 15:04:49 发布

BraveShineZ

最新推荐文章于 2024-08-28 15:04:49 发布

阅读量514

点赞数

分类专栏：记录成长 Javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_72473823/article/details/126057360

版权

Javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

记录成长

3 篇文章 1 订阅

订阅专栏

Web API

DOM对象

语法

document.querySelectorAll('css选择器')

参数：

包含一个或多个有效的css选择器字符串

返回值：

css选择器匹配的NodeList对象集合

例如：

document.querySelextorAll('ul li')


// 1、js获取 第一个元素
// let div = document.querySelector('div')
// let div = document.querySelector('.three')
// console.log(div)

// let li = document.querySelector('ul li:last-child')
// console.log(li)
// 2.获取多个元素
let lis = document.querySelector('ul li')
console.log(lis)

总结：

1、获取一个DOM元素我们使用谁？

querySelector()

2、获取多个DOM元素我们使用谁？

querySelectorAll()

3、querySelector()方法能直接操作修改吗？

可以

4、querySelectorAll()方法能直接修改吗？如果不能可以怎么做到修改？

不可以，只能通过遍历的方式一次给里面的元素做修改

获取DOM元素(重点)

选择器获取

document.querySelectorAll('CSS选择器')

得到的是一个伪数组：

1、有长度有索引号的数组

2、但是没有pop()、push()、等数组方法

想要得到里面的每一个对象，则需要遍历（for）的方式获得

注意：

哪怕只有一个元素通过querySelector()获取过来的也是一个伪数组，里面只有一个元素而已

ID获取

// 根据id获取一个元素
document.getElementById('nav')
// 根据 标签获取一类元素  获取页面所有div
document.getElementByTagName('div')
// 根据类名获取元素  获取页面 所有类名为w的
document.getElementByClassName('w')

总结：

1、获取页面中的标签我们最终常用哪两种方式？

①querySelectorAll()

②querySelector()

2、他们两者的区别是什么？

①querySelector()只能选择一个元素，可以直接操作

②querySelectorAll()可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素

3、他们两者小括号里面的参数有什么注意事项？

①里面写css选择器

②必须是字符串，也就是必须加引号

元素.innerText属性/元素.innerHTML属性

1、将文本内容添加/更新到任意标签位置

2、文本中包含的标签会被解析

innerHTML属性
box.innerHTML = '<h3>前端程序员<br>的头发都很多</h3>'

<head>
    <style>
        div {
            width:300px;
            height:300px;
            background-color:pink;
        }
    </style>
</head>

<script>
        // 1、获取标签(元素)
        let box = document.querySelector('div')
        // 2、修改标签(元素)内容 box是对象  innerText 属性
        // 对象.属性 = 值 不识别标签
        // box.innerText = '有点意思'
        box.innerText = '<strong>有点意思</strong>'   // 不能加粗
        box.innerHTML = '<strong>有点意思</strong>'   // 能加粗

</script>

总结：

1、设置/修改DOM元素内容有哪3种方式？

①docement.write()方法

②元素.innerText属性

③元素.innerHTML属性

2、三者的区别是什么？

①document.write()方法，只能追加到body中

②元素.innerText属性 只识别内容，不能解析标签

③元素.innerText属性 能够解析标签

④如果还在纠结到底用谁，你可以选择innerHTML

修改元素样式属性：

操作类名(className)操作CSS

语法：

//  active 是一个css类名
元素.className = 'active'

注意：

1、由于class是关键字，所以使用className去替代

2、className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

classList操作类控制CSS

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法：

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

设置/修改表单元素属性

获取：

DOM对象.属性名

设置：

DOM对象.属性名 = 新值

定时器：

开启定时器

setInterval(函数，间隔时间)

作用：

每隔一段时间调用这个函数

间隔时间单位是毫秒

function repeat() {
        console.log('前端程序员，就是头发多咋滴~~')
}
// 每隔一秒调用repeat函数
setInterval(repeat, 1000)

注意：

1、函数名字不需要加括号

2、定时器返回的是一个id数字

关闭定时器

事件监听

语法

元素.addEventListener('事件'， 要执行的函数)

三要素

1、事件源：

获取dom元素

2、事件：

触发方式，如鼠标单击click、鼠标经过mouseover等

3、调用的函数：

要做什么事

例：

<script>
       // 1、获取按钮元素
       let btn = document.querySelector('button')
       // 2、事件监听   绑定事件   注册事件   事件侦听
       // 3、事件源.addEventListener('click', function(){
          alert('月薪过万')
       })

</script>

DOM节点

DOM树里每一个内容都称之为节点

节点类型：

1、元素节点：

所有的标签，比如body、div

html是根节点

2、属性节点

所有的属性，比如href

3、文本节点

所有的文本

4、其他

父节点查找：

parentNode属性

返回最近一级的父节点找不到返回为null

子元素.parentNode

子节点查找：

childNodes

获得所有子节点、包括文本节点（空格、换行）、注释节点等

children（重点）

仅获得所有元素节点

返回的还是一个伪数组

例

ul.children.length

兄弟节点

下一个兄弟节点
nextElementSibling 属性
上一个兄弟节点
previousElementSibling 属性

增加节点

<script>
        // 二毛   ul.children[1]
        // 1. 创建新的标签节点
        // let div = document.createElement('div')
        // div.className = 'current'
        let ul = document.querySelector('ul')
        let li = document.createElement('li')

        li.innerHTML = '我是xiao ming'
        // 2. 追加节点  父元素.appendChild(子元素) 后面追加
        // ul.appendChild(li)
        // 3. 追加节点  父元素.insertBefore(子元素， 放到那个元素的前面)   
        ul.insertBefore(li, ul.children[0])
    </script>

克隆节点

<ul>
        <li>我是内容11111</li>
    </ul>
    <script>
        let ul = document.querySelector('ul')
        // 括号为空则默认为false 如果是false则不克隆后代节点
        // 如果是true则克隆后代节点
        let newUl = ul.cloneNode(true)
        document.body.appendChild(newUl)
    </script>

删除节点

<body>
    <button>点击</button>
    <ul>
        <li>我是内容11111</li>
    </ul>
    <script>
        // 需求，点击按钮，删除小li
        let btn = document.querySelector('button')
        let ul = document.querySelector('ul')
        btn.addEventListener('click', function () {
            // 删除的语法 父元素.removeChild(子元素)
            ul.removeChild(ul.children[0])
        })
    </script>
</body>

时间对象

实例化

<script>
        // let arr = []
        // let arr = new Array()
        // let obj = {}
        // let obj = new Object()

        // new 实例化 时间对象
        // 小括号为空可以得到当前的时间
        let date = new Date()
        console.log(date)
        // 小括号里面写上时间，可以返回指定的时间 
        let last = new Date('2021-8-29 18:30:00')
        console.log(last)
    </script>

常用方法

<script>

        // new 实例化 时间对象
        // 小括号为空可以得到当前的时间
        let date = new Date()
        console.log(date.getFullYear())
        console.log(date.getMonth() + 1)
        console.log(date.getDate())
        // 时分秒
        console.log(date.getHours())
        console.log(date.getMinutes())
        console.log(date.getSeconds())
        // 星期几
        console.log(date.getDay())

    </script>

显示时间

<script>

        // new 实例化 时间对象
        // 小括号为空可以得到当前的时间
        let date = new Date()
        console.log(date.getFullYear())
        console.log(date.getMonth() + 1)
        console.log(date.getDate())
        // 时分秒
        console.log(date.getHours())
        console.log(date.getMinutes())
        console.log(date.getSeconds())
        // 星期几
        console.log(date.getDay())

    </script>

时间戳

一种特殊的计量时间的方式

三种获取时间戳的方法

1、getTime()方法

// 1、实例化
let date = new Date()
// 2、获取时间戳
console.log(date.getTime())

2、简写 +new Date()

console.log(+new Date())

3、使用Date().now()

console.log(Date.now())

用来倒计时的

<script>
        // 时间戳是总的毫秒数  是独一无二的  
        // 计算倒计时： 核心思想:
        // 将来时间 9.1 12:00   有一个时间戳   2000000
        // 现在的时间 8.29 15:00   有一个时间戳   1000000
        // 可以利用将来的时间戳 减去 现在的时间戳 就是剩余的时间毫秒数
        // 转换为时分秒就是剩余的时间了
        // 1. getTime()
        // let date = new Date()
        // console.log(date.getTime())
        // 2. +new Date()
        console.log(+new Date()) // 当前的时间戳
        console.log(+new Date('2021-8-30 12:00:00'))  // 指定时间的时间戳
        // 3. 只能得到当前的
        // console.log(Date.now())
    </script>

重绘和回流

浏览器是如何进行界面渲染的

1、解析（parser）HTML，生成DOM树（DOM Tree）

2、同时解析（Parser）CSS，生成样式规则（Style Rules）

3、根据DOM树和样式规则，生成渲染树（Render Tree）

4、进行布局Layout(回流/重排)：根据生成的渲染树，得到节点的几何信息（位置，大小）

5、进行绘制Painting（重绘）：根据计算和获取的信息进行整个页面的绘制

6、Display：展示在页面上

重绘和回流

回流（重排）

当Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流

重绘

由于节点（元素）的样式的改变并不影响它在文档流中的位置和文档布局时（比如：color、background-color/outline等），称为重绘。

重点：

重绘不一定引起回流，而回流一定会引起重绘

会导致回流（重排）的操作：

1、页面的首次刷新

2、浏览器的窗口大小发生改变

3、元素的大小或位置发生改变

4、改变字体的大小

5、内容的变化（如：input框的输入，图片的大小）

6、激活css伪类（如：：hover）

7、脚本操作DOM （添加或者删除可见的DOM元素）

简单理解影响到布局了，就会有回流

事件对象

1、

是个对象，对象里有事件触发时的相关信息

2、

在事件绑定的回调函数的第一个参数就是事件对象

部分常用属性

1、type：

获取当前的时间类型

2、clientX/clientY：

获取光标相对于浏览器可见窗口左上角的位置

3、offsetX/offsetY：

获取光标相对于当前DOM元素左上角的位置

4、key：

用户按下键盘的值，现在不提倡使用keycode

事件流

指的是事件完整执行过程中的流动路径

说明：

假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

简单理解：

捕获阶段是从父到子冒泡阶段是从子到父

事件冒泡概念：

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次触发，这一过程被称为事件冒泡

简单理解：

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

<body>
    <div  class="father">
        <div class="son">
            
        </div>
    </div>
    
    
    <script>
        let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('click', function() {
            alert('我是爸爸')
        })
        
        son.addEventListener('click', function() {
            alert('我是儿子')
        })
    </script>
</body>

事件捕获概念：

从DOM的根元素开始去执行对应的时间（从外到里）

事件捕获需要写对应代码才能看到效果

DOM.addEventListener(事件类型，事件函数，是否使用捕获机制)

说明：

1、addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）

2、若传入false代表冒泡阶段触发，默认就是false

3、若是用L0事件监听，则只有冒泡阶段，没有捕获

阻止事件流动

1、因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

2、若想把事件就限制在当前元素内，就需要阻止事件流动

3、阻止事件流动需要拿到事件对象

语法

事件对象.stopPropagation

鼠标经过事件：

1、

mouseover和mouseout会有冒泡效果

2、

mouseenter和mouseleave 没有冒泡效果（推荐）

两种注册事件的区别

<button>点击</button>
    <script>
        let btn = document.querySelector('button')
        // 1.l0 on
        // 多次相同的事件，只执行最后一次
        // btn.onclick = function () {
        //     alert('第一次')
        // }
        // btn.onclick = function () {
        //     alert('第二次')
        // }
        // 解绑事件
        // btn.onclick = null
        // 2. addEventListener
        btn.addEventListener('click', add)
        function add() {
            alert('第一次')
        }
        // btn.addEventListener('click', function () {
        //     alert('第二次')
        // })
        btn.removeEventListener('click', add)
    </script>

阻止默认行为

语法：

事件名 .preventDefault()

<body>
    <a href="http://www.baidu.com">跳转到百度</a>
    <script>
         let a = document.querySelector('a')
         a.addEventListener('click', function(e){
         // 阻止默认行为  方法
             e.preventDefault()
         })
    </script>
</body>

事件委托

<ul>
        <li>我是第1个小li</li>
        <li>我是第2个小li</li>
        <li>我是第3个小li</li>
        <li>我是第4个小li</li>
        <li>我是第5个小li</li>
    </ul>
    <script>
        // 不要每个小li注册事件了  而是把事件委托给他的爸爸 
        // 事件委托是给父级添加事件 而不是孩子添加事件
        let ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            // alert('我点击了')
            // 得到当前的元素
            // console.log(e.target)
            e.target.style.color = 'red'
        })
    </script>

优点

给父级元素加事件（可以提高性能）

原理

事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发

滚动事件、加载事件

滚动事件

事件名：

scroll

监听整个页面滚动：

// 页面滚动事件
window.addEventListener('scroll', function() {
    // 执行的操作
})



<script>
        let div = document.querySelector('div')
        window.addEventListener('scroll', function () {
            console.log(111)
        })
        // div.addEventListener('scroll', function () {
        //     console.log(111)
        // })
</script>

给window或document添加scroll事件

监听某个元素的内部滚动直接给某个元素加即可

加载事件

加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件

事件名

load

监听页面所有资源加载完毕：

给window添加load事件

// 页面加载事件
window.addEventListener('load', function () {
         // 执行的操作
})

注意

不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

DOMContentLoaded事件

事件名

DOMContentLoaded

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

document.addEventListener('DOMContentLoaded', function () {
      // 执行的操作
})

总结

页面滚动事件如何添加？

1、scroll

2、监听整个页面滚动给window或document加

加载事件有哪两个？如何添加

1、load事件

监听整个页面资源给window加

2、DOMContentLoaded

给document加，当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

元素大小和位置

scroll家族

获取宽高

1、获取元素内容总宽高（不包含滚动条）返回值不带单位

2、scrollWidth和scrollHeight

获取位置：

1、获取元素内容往左、往上滚出去看不到的距离

2、scrollLeft和ScrollTop

3、这两个属性是可以修改的

div.addEventListener('scroll', function () {
       console.log(this.scrollTop)
})

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

// 页面滚动事件
window.addEventListener('scroll', function () {
      // document.documentElement.scrollTop 获得当前页面被卷去的头部
      let  num = documentElement.scrollTop
       console.log(num)
})

总结:

1、scrollWidth和scrollHeight是得到元素什么的宽高

①内容

②不包含滚动条

2、被卷去的头部或者左侧用哪个属性？是否可以读取和修改？

1、scrollTop/scrollLeft

2、可以读取，也可以修改（赋值）

3、检测页面滚动的头部距离（被卷去的头部）用哪个属性

1、document.documentElement.scrollTop

offset家族

获取宽高

1、获取元素的自身宽高、包含元素自身设置的宽高、padding、border

2、offsetWidth和offsetHeight

获取位置

1、获取元素距离自己定位父级元素的左、上距离

2、offsetLsft和offsetTop 注意：只读属性

总结

1、offsetWidth和offsetHeight是得到元素什么的宽高？

内容+padding+border

2、offsetTop和offsetLeft得到位置以谁为准？

①带有定位的父级

②如果都没有则以文档左上角为准

client家族

获取宽高

1、获取元素的可见部分宽高（不包含边框、滚动条等）

2、clientWidth和clientHeight

获取位置

1、获取左边框和上边框宽度

2、clientLeft和clientTop 注意：只读属性

总结

offset家族

1、获取元素自身大小：包括自身设置的宽高、padding、border

2、获取元素距离定位父级的左和上距离，只读属性

client家族

1、获取元素可见区域的大小

2、获取元素左、上边框距离只读属性

scroll家族

1、获取元素内容的总大小

2、获取元素向左向上滚出去看不见的距离，可读写属性

BOM

（Browser Object Model）

是浏览器对象模型

window对象

1、window是浏览器内置中的全局对象，我们所学习的所有web apis的知识内容都是基于window对象实现的

2、window对象下包含了navigator、location、document、history、screen5个属性，即所谓的BOM（浏览器对象模型）

注：依附于window对象的所有属性和方法，使用时可以省略window

定时器—延时函数

1、JavaScript内置的一个用来让代码延迟执行的函数，叫setTimeout

2、语法：

setTimeout(回调函数， 等待的毫秒数)

3、setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window

let timer = setTimeout(回调函数， 等待的毫秒数)
clearTimeout(timer)

递归函数

自己调用自己就是递归函数

// 递归函数容易造成死递归，一定要加退出条件
let num = 0
function fn() {
    num++
     console.log(111)
     // 在函数里面，调用自己
     if (num >= 100) {
        return
}
     fn()
}
fn()



<script>
    //利用递归函数  模拟了setinterval
    let div = document.querySelector('div)                         
     setTimeout(fn, 1000)
</script>

JS是单线程

同一个时间只能做一件事

导致的问题：

如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

同步和异步

同步：

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜、炒菜。

异步：

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜、炒菜。

本质区别：

这条流水线上各个流程的执行顺序不同

同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务：

JS的异步是通过回调函数实现的

一般而言，异步任务有以下三种类型：

1、普通事件，如click、resize等

2、资源加载，如load、error等

3、定时器，包括setInterval、setTimeout等

JS执行机制

1、先执行执行栈中的同步任务

2、异步任务放入任务队列中

3、一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

事件循环

由于主线程不断的重复获得任务、执行任务、再执行，所以这种机制被称为事件循环

location

常用属性和方法

href

// 可以得到当前文件url地址
console.log(location.href)
// 可以通过js方式跳转到目标地址
location.href = 'http://www.itcast.cn'

<a href="http://www.itcast.cn">支付成功，<span>5</span> 秒之后跳转首页</a>
    <script>
        let a = document.querySelector('a')
        let num = 5
        let timer = setInterval(function () {
            num--
            a.innerHTML = `支付成功，<span>${num}</span> 秒之后跳转首页`
            if (num === 0) {
                clearInterval(timer)
                // 跳转页面
                location.href = 'http://www.itcast.cn'
            }
        }, 1000)
    </script>

search

获取地址中携带的参数，符号？后面部分

console.log(location.search)

hash

属性获取地址中的哈希值，符号#后面部分

console.log(location.hash)

后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如网易云音乐

reload()

<button>
    刷新
</button>
<script>
    let btn = document.querySelector('button')
    btn.addEventListener('click', function() {
        // reload() 刷新方法   强制刷新  CTRL +f5
        location.reload(true)
    })
</script>

navigator对象

script>
        // 检测 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'
            }
        })()

    </script>

history对象

与浏览器地址栏的操作相对应，如前进/后退/历史记录等

常用属性和方法

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是1前进1个页面，如果是-1后退一个页面

localStorage

存储数据

localStorage.setltem(key,value)

获取数据

localStorage.getltem(key)

删除数据

localStorage.removeltem(key)

存储复杂数据类型

本地只能存储字符串，无法存储复杂数据类型，需要将复杂数据类型转换成JSON字符串，在存储到本地

JSON.stringify（复杂数据类型）

将复杂数据转换成JSON字符串存储到本地存储中

JSON.parse（JSON字符串）

将JSON字符串转换成对象取出时候使用

例

<script>
        // 存储数据 localStorage.setItem('键', '值')
        // localStorage.setItem('uname', 'pink老师')
        // localStorage.setItem('age', 18)
        // 获取数据
        // localStorage.getItem('键')
        // console.log(localStorage.getItem('uname'))
        // 删除数据
        // localStorage.removeItem('uname')
        // 1. 存储复杂数据类型（引用数据类型）
        let obj = {
            uname: '刘德华',
            age: 17,
            address: '黑马程序员'
        }
        // console.log(JSON.stringify(obj))
        //（1） 复杂数据类型一定要转换为json字符串在进行存储 （因为本地存储只能存储字符串）
        localStorage.setItem('obj', JSON.stringify(obj))
        // AJAX
        // JSON 属性和值都是双引号进行包含
        // let obj = {
        //     "uname": "刘德华",
        //     "age": "17",
        //     "address": "黑马程序员"
        // }
        // （2） 取数据  可以使用 JSON.parse()  将json字符串转换为对象
        // console.log(typeof localStorage.getItem('obj'))
        console.log(JSON.parse(localStorage.getItem('obj')))

        let object = {
            age: 18
        }

        // 本地存储只能存储字符串 所以我要转换  转换为JSON格式的字符串
        localStorage.setItem('key', JSON.stringify(object))
        // 获取的过来的值是字符串，不是对象了没有办法直接使用，因此我们首先吧字符串转换为对象
        // JSON.parse()
        console.log(JSON.parse(localStorage.getItem('key')))

    </script>

自定义属性

固有属性：

标签天生自带的属性，比如class id title等，可以直接使用点语法操作

自定义属性：

由程序员自己添加的属性，在DOM对象中找不到，无法使用点语法操作，必须使用专门的API

getAttribute('属性名') // 获取自定义属性

setAttribute('属性名'，'属性值') // 设置自定义属性

removeAttribute('属性名') // 删除自定义属性

<div class="box">
    
</div>
<script>
     let box = doument.querySelector('.box')
     box.setAttribute('myid', 10)
    console.log(box.setAttribute('myid'))
</script>

data-自定义属性：

在标签上一律以data开头

在DOM对象上一律以dataset对象方式获取

正则表达式

1、正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在javascript值班费，正则表达式也是对象

2、通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式

使用场景

1、验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）

2、过滤掉页面内容中的一敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等

表达式语法：

定义正则表达式

const 变量名 = /表达式/

其中// 是正则表达式字面量

判断是否有符合规则的字符串

test（）方法，用来查看正则表达式与指定的字符串是否匹配

语法

regObj.test(被检测的字符串)

检索（查找）符合规则的字符串

exec（）方法在一个指定字符串中执行一个搜索匹配

语法

regObj.exec（被检测字符串）

如果匹配成功，exec（）方法返回一个数组，否则返回null

<script>
     const str = '我们在学习前端，希望前端能高薪就业'
     // 正则表达式使用
     // 1、定义规则
     const ref = /前端/
     // 2、是否匹配
     console.log(log.test(str))  // true
    // 3、exec()
    console.log(log.exec(str))   // 返回数组
</script>

总结：

正则表达式检测查找test方法和exec方法有什么区别？

1、test方法用于判断是否有符合规则的字符串，返回的是布尔值。找到返回true，否则false

2、exec方法用于检索（查找）符合规则的字符串。找到返回数组，否则为null

元字符

是一些具有特殊含义的字符，可以极大提高灵活性和强大匹配功能

例如：规定用户只能输入英文26个英文字母，普通字符的话abcd。。。。

换成元字符写法：[a-z]

参考文档：

MDN：正则表达式 - JavaScript | MDN_

正则测试工具：在线正则表达式测试

分类：

边界符

（表示位置，开头和结尾，必须用什么开头，用什么结尾）

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

量词

（表示重复次数）

字符类

（比如\d 表示0-9）

字符类：

1、[ ]匹配字符集合

后面的字符串只要包含abc中任意一个字符，都返回true

// 只要中括号里面的任意字符出现都返回为true
console.log(/[abc]/.test('andy'))    // true
console.log(/[abc]/.test('baby'))    // true
console.log(/[abc]/.test('cry'))     // true
console.log(/[abc]/.test('die'))     // false

修饰符

替换replace替换

语法

字符串.replace(/正则表达式/,'替换的文本')

总结

1、字符类.(点)代表什么意思？

匹配换行符之外的任何单个字符

2、字符类[]有若干代表什么意思？

1、[abc]匹配abc其中的任何单个字符

2、[a-z]匹配26个小写英文字母其中的任何单个字符

3、[^a-z ]匹配除了26个小写英文字母之外的其他任何单个字符

预定义：

指的是某些常见模式的简写方式

修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写，是否支持多行匹配

语法

/表达式/修饰符

i是单词ignore的缩写，正则匹配时字母不区分大小写

g是单词global的缩写，匹配所有满足正则表达式的结果

console.log(/a/i.test('a'))     // true
console.log(/a/i.test('A'))     // true

替换replace

语法

字符串.replace(/正则表达式/,'替换的文本')
<script>
   const str = 'java是一门编程语言，学完java工资很高'
   const re =  str.replace(/java/ig,'前端')
   consoole.log(re)
</script>

案例

替换敏感词

<textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <div></div>
    <script>
        let btn = document.querySelector('button')
        let textarea = document.querySelector('textarea')
        let div = document.querySelector('div')
        btn.addEventListener('click', function () {
            // 过滤用户输入的内容
            div.innerHTML = textarea.value.replace(/激情|基情/g, '**')

            // div.innerHTML = textarea.value
        })
    </script>