Window对象
BOM（浏览器对象模型）
- BOM（Browser Object Model）是浏览器对象模型
- window对象是一个全局对象，也可以说是JavaScript中的顶级对象
- 像document alert() console.log()这些都是window的属性，基本BOM的属性和方法都是window的
- 所有通过var定义在全局作用域中的变量，函数都会变成window对象的属性和方法
- window对象下的属性和方法调用的时候可以省略window
// document.querySelector()
// window.document.querySelector()
function fn(){
console.log(11)
}
window.fn()
var num=10
console.log(window.num)定时器-延时函数
- JavaScript内置的一个用来让代码延迟执行的函数，叫setTimeout‘
- 语法：
setTimeout(回调函数，等待的毫秒数)- setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window
- 清除延时函数 ：
let timer=setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)注意：
- 延时器需要等待，所以后面的代码先执行
- 每一次调用延时器都会产生一个新的延时器
两种定时器对比：执行的次数
- 延时函数：执行一次
- 间歇函数：每隔一段时间就执行一次，除非手动清除
5秒钟之后消失的广告
需求：5秒钟之后，广告自动消失
分析：
- 设置延时函数
- 隐藏元素
// 1.获取元素
const img=document.querySelector('img')
setTimeout(function(){
img.style.display='none'
},5000)JS执行机制
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
这是因为Javascript这门脚本语言诞生的使命所致---JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的，比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加，之后再删除
单线程就意味着，所有的任务需要排队，前一个任务结束，才会执行后一个任务，这样所导致的问题是：如果JS执行的时间过长，就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，于是，JS中出现了同步和异步。
同步任务
同步任务都是在主线程上执行，形成一个执行栈。
异步任务
JS的异步是通过回调函数实现的
一般而言，异步任务有以下三种类型：
1.普通事件，如click，resize等
2.资源加载，如load，error等
3.定时器，包括setInterval、setTimeout等
异步任务相关添加到任务队列中（任务队列也成为消息队列）
执行顺序(事件循环)
- 先执行执行栈中的同步任务
- 异步任务放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕，系统就会按照次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
console.log(1)
console.log(2)
setTimeout(function(){
console.log(3)
})
console.log(4) 
由于主线程不断的重复获得任务，执行任务，再获取任务，再执行，所以这种机制被称为事件循环（evenloop）
location对象
location的数据类型是对象，它拆分并保存了URL地址的各个组成部分
常用属性和方法：
- href属性获取完整的URL地址，对其赋值时用于地址的跳转
<script>
// console.log(location)
// console.log(location.href)
// 1.href经常用href 利用js的方法去跳转页界
location.href='http://www.baidu.com'
</script>上面代码在浏览器渲染时会自动跳转至百度页面
- search属性获取地址中携带的参数，符号?后面的部分
<body>
<form action="">
<input type="text" name="username">
<input type="password" name="pwd">
<button>提交</button>
</form>
<script>
console.log(location.search)
</script>
</body>
- hash属性获取地址中的哈希值，符号#后面部分
<a href="#/my">我的</a>
<a href="#/friend">关注</a>
<a href="#/download">下载</a> 
点击我的a链接之后就会显示哈希值，即#号后面的部分
- reload方法用来刷新当前页面，传入参数true时表示强制刷新
5秒之后跳转的页面
需求：用户点击可以跳转，如果不点击，则5秒钟后会自动跳转，要求里面有倒计时。
// 1.获取元素
const a=document.querySelector('a')
// 2.开启定时器
// 3.声明倒计时变量
let num=5
let timerID=setInterval(function(){
num--
a.innerHTML=`支付成功<span>${num}</span>秒钟之后跳转到首页`
// 如果num===0 则停止定时器 并且完成跳转功能
if(num===0){
clearInterval(timerID)
// 4.跳转页面
location.href='http://www.itcast.cn'
}
},1000)navigator对象
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'
}
})();
// !(function () { })();
!function () { }()
</script>常用属性和方法：
通过userAgent检测浏览器的版本及平台
history对象
history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进，后退，历史记录等
常用属性和方法：
| history | 作用 |
|---|---|
| back() | 可以后退功能 |
| forward() | 前进功能 |
| go(参数) | 前进后退功能 参数如果是1 前进1个页面，如果是-1 后退1个页面 |
const back=document.querySelector('button:first-child')
const forward=back.nextElementSibling//back的下一个兄弟
back.addEventListener('click',function(){
//后退一步
// history.back()
history.go(-1)
})
forward.addEventListener('click',function(){
//前进一步
history.forward()
history.go(1)
})本地存储
介绍
之前写出的页面数据刷新之后页面就没有了
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量数据，HTML5规范提出了相关解决方案
- 数据存储在用户浏览器中
- 设置，读取方便，甚至页面刷新不丢失数据
- 容量较大，sessionStorage和localStorage约5M左右
分类
localStorage
作用：可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在
特性：
- 可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
语法：
存储数据：
localStorage.setltem(key,value) // 存储一个名字 'uname' '名字'
localStorage.setItem('uname','名字')
// 获取方式 都加引号
console.log(localStorage.getItem('uname'))
// 删除本地存储 只删除名字
localStorage.removeItem('uname')
// 改 如果原来有这个键，就改，如果没有就增
localStorage.setItem('uname','red老师')
// 存一个年龄
// 本地存储只能存储字符串数据类型
localStorage.setItem('age',18)
console.log(localStorage.getItem('age'))sessionStorage
特性：
- 生命周期为关闭浏览器窗口
- 在同一个窗口（页面）下数据可以共享
- 以键值对的形式存储使用
- 用法和localStorage基本相同
存储复杂数据类型
本地只能存储字符串，无法存储复杂数据类型
解决：需要将复杂数据类型转换成JSON字符串，再存储到本地
语法：JSON.stringify(复杂数据类型)
因为本地存储里面取出来的是字符串，不是对象，无法直接使用，故还要将字符串转为对象
// 1.复杂数据类型存储必须转换为JSON字符串存储
localStorage.setItem('obj',JSON.stringify(obj))
// JSON对象 属性和值有引号 而且引号统一是双引号
// {"uname":"pink老师","age":18,"gender":"女"}
// 取
console.log(localStorage.getItem('obj'))
console.log(typeof localStorage.getItem('obj'))//string
// 2.把JSON字符串转换为对象
console.log(JSON.parse(localStorage.getItem('obj')))综合案例---学生就业统计表
需求：录入学生信息，页面刷新数据不丢失
渲染业务
根据持久化数据渲染页面
核心步骤：
1.读取localstorage本地数据
- 如果有数据则转换为对象放到变量里面一会使用它渲染页面
- 如果没有则用默认空数组[]
- 为了测试效果，可以先把initData存入本地存储看效果·
2.根据数据渲染页面，遍历数组，根据数据生成tr，里面填充数据，最后追加给body
字符串拼接新思路：（效率更高，开发常用的写法）
利用map()和join()数组方法实现字符串拼接
数组中map()方法 迭代数组
使用场景：
- map可以遍历数组处理数据，并且返回新的数组
- map也称为映射。映射是个术语，指两个元素的集之间元素相互”对应“的关系
- map重点在于有返回值，forEach没有返回值
const arr=['red','blue','green'] const newArr=arr.map(function(ele,index){ console.log(ele)//数组元素 console.log(index)//数组索引号 return ele+'颜色' }) console.log(newArr)//['red颜色','blue颜色','green颜色']数组中join方法
作用：
join()方法用于把数组中的所有元素转换一个字符串
语法：
const arr=['red颜色','blue颜色','green颜色'] console.log(arr.join(''))//red颜色 blue颜色 green颜色参数：
数组元素是通过参数里面指定的分隔符进行分隔的，
空字符串（''）,则所有元素之间都没有任何字符，
括号为空则默认逗号分隔
数组中map+join方法渲染页面思路：
map遍历数组处理数据生成tr，返回一个数组
利用map和join渲染页面新思路：
2.根据数据渲染页面，遍历数组，根据数组生成tr，里面填充数据，最后追加给tbody
- 渲染业务要封装成一个函数render
- 我们使用map方法遍历数组，里面更换数据，然后会返回有数据的tr数组
- 通过join方法把map返回的数组转换为字符串
- 把字符串通过innerHTML赋值给tbody
function render() {
// (1). 利用map遍历数组，返回对应tr的数组
const trArr = arr.map(function (ele, index) {
return `
<tr>
<td>${ele.stuId}</td>
<td>${ele.uname}</td>
<td>${ele.age}</td>
<td>${ele.gender}</td>
<td>${ele.salary}</td>
<td>${ele.city}</td>
<td>${ele.time}</td>
<td>
<a href="javascript:" data-id="${index}">
<i class="iconfont icon-shanchu"></i>
删除
</a>
</td>
</tr>
`
})
console.log(trArr)
// (2). 把数组转换为字符串 join
// (3). 把生成的字符串追加给tbody
tbody.innerHTML = trArr.join('')
// 显示共计有几条数据
document.querySelector('.title span').innerHTML = arr.length
}
render()新增业务
点击新增按钮，页面显示新的数据
核心步骤：
- 给form注册提交事件，要阻止默认提交事件（阻止默认行为）事件对象.preventDefault()
- 非空判断如果年龄，性别，薪资有一个值为空，则return返回’输入不能为空‘中断程序
- 给arr数组追加对象，里面存储表单获取过来的数据
- 渲染页面，重置表单（reset()方法）
const info = document.querySelector('.info')
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const salary = document.querySelector('.salary')
const gender = document.querySelector('.gender')
const city = document.querySelector('.city')
// 2.1 form表单注册提交事件，阻止默认行为
info.addEventListener('submit', function (e) {
e.preventDefault()
// 2.2 非空判断
if (!uname.value || !age.value || !salary.value) {
return alert('输入内容不能为空')
}
// 2.3 给 arr 数组追加对象，里面存储 表单获取过来的数据
arr.push({
// 处理 stuId：数组最后一条数据的stuId + 1
stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
uname: uname.value,
age: age.value,
salary: salary.value,
gender: gender.value,
city: city.value,
time: new Date().toLocaleString()//得到当前时间
})
// 2.4 渲染页面和重置表单（reset()方法）
render()
this.reset() // 重置表单
// 2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储
localStorage.setItem('data', JSON.stringify(arr))
})删除业务
点击删除按钮，可以删除对应的数据
核心步骤：
- 采用事件委托的形式，给tbody注册点击事件
- 得到当前点击的索引号，渲染数据的时候，动态给a链接添加自定义属性data-id="0"
- 根据索引号，利用splice删除数组这条数据
- 重新渲染页面
- 把最新arr数组存入本地存储
// 3. 删除业务
// 3.1 采用事件委托形式，给 tbody 注册点击事件
tbody.addEventListener('click', function (e) {
// 判断是否点击的是删除按钮 A 链接
if (e.target.tagName === 'A') {
// alert(11)
// 3.2 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定义属性例如 data-id="0"
console.log(e.target.dataset.id)
// 确认框 确认是否要真的删除
if (confirm('您确定要删除这条数据吗？')) {
// 3.3 根据索引号，利用 splice 删除数组这条数据
arr.splice(e.target.dataset.id, 1)
// 3.4 重新渲染页面
render()
// 3.5 把最新 arr 数组存入本地存储
localStorage.setItem('data', JSON.stringify(arr))
}
}
})关于stuid的处理
- 新增加序号应该是最后一条数据的stuid+1
- 但是要判断，如果没有数据则是直接赋值为1，否则就采取上面的做法
stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1总代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>学生就业统计表</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<h1>学生就业统计表</h1>
<form class="info" autocomplete="off">
<input type="text" class="uname" name="uname" placeholder="姓名" />
<input type="text" class="age" name="age" placeholder="年龄" />
<input type="text" class="salary" name="salary" placeholder="薪资" />
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">
<i class="iconfont icon-tianjia"></i>添加
</button>
</form>
<div class="title">共有数据<span>0</span>条</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>录入时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>迪丽热巴</td>
<td>23</td>
<td>女</td>
<td>12000</td>
<td>北京</td>
<td>2099/9/9 08:08:08</td>
<td>
<a href="javascript:">
<i class="iconfont icon-shanchu"></i>
删除
</a>
</td>
</tr> -->
</tbody>
</table>
<script>
// 参考数据
const initData = [
{
stuId: 1,
uname: '迪丽热巴',
age: 22,
salary: '12000',
gender: '女',
city: '北京',
time: '2099/9/9 08:08:08'
}
]
// localStorage.setItem('data', JSON.stringify(initData))
// 1. 渲染业务
// 1.1 先读取本地存储的数据
// (1). 本地存储有数据则记得转换为对象然后存储到变量里面，后期用于渲染页面
// (2). 如果没有数据，则用 空数组来代替
const arr = JSON.parse(localStorage.getItem('data')) || []
console.log(arr)
// 1.2 利用map和join方法来渲染页面
const tbody = document.querySelector('tbody')
function render() {
// (1). 利用map遍历数组，返回对应tr的数组
const trArr = arr.map(function (ele, index) {
return `
<tr>
<td>${ele.stuId}</td>
<td>${ele.uname}</td>
<td>${ele.age}</td>
<td>${ele.gender}</td>
<td>${ele.salary}</td>
<td>${ele.city}</td>
<td>${ele.time}</td>
<td>
<a href="javascript:" data-id="${index}">
<i class="iconfont icon-shanchu"></i>
删除
</a>
</td>
</tr>
`
})
console.log(trArr)
// (2). 把数组转换为字符串 join
// (3). 把生成的字符串追加给tbody
tbody.innerHTML = trArr.join('')
// 显示共计有几条数据
document.querySelector('.title span').innerHTML = arr.length
}
render()
// 2. 新增业务
const info = document.querySelector('.info')
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const salary = document.querySelector('.salary')
const gender = document.querySelector('.gender')
const city = document.querySelector('.city')
// 2.1 form表单注册提交事件，阻止默认行为
info.addEventListener('submit', function (e) {
e.preventDefault()
// 2.2 非空判断
if (!uname.value || !age.value || !salary.value) {
return alert('输入内容不能为空')
}
// 2.3 给 arr 数组追加对象，里面存储 表单获取过来的数据
arr.push({
// 处理 stuId：数组最后一条数据的stuId + 1
stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
uname: uname.value,
age: age.value,
salary: salary.value,
gender: gender.value,
city: city.value,
time: new Date().toLocaleString()//得到当前时间
})
// 2.4 渲染页面和重置表单（reset()方法）
render()
this.reset() // 重置表单
// 2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储
localStorage.setItem('data', JSON.stringify(arr))
})
// 3. 删除业务
// 3.1 采用事件委托形式，给 tbody 注册点击事件
tbody.addEventListener('click', function (e) {
// 判断是否点击的是删除按钮 A 链接
if (e.target.tagName === 'A') {
// alert(11)
// 3.2 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定义属性例如 data-id="0"
console.log(e.target.dataset.id)
// 确认框 确认是否要真的删除
if (confirm('您确定要删除这条数据吗？')) {
// 3.3 根据索引号，利用 splice 删除数组这条数据
arr.splice(e.target.dataset.id, 1)
// 3.4 重新渲染页面
render()
// 3.5 把最新 arr 数组存入本地存储
localStorage.setItem('data', JSON.stringify(arr))
}
}
})
</script>
</body>
</html>正则表达式
- 正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式，也是对象
- 通常用来查找，替换那些符合正则表达式的文本，许多语言都支持正则表达式
正则表达式在JavaScript中的使用场景：
- 例如验证表单：用户名表单只能输入英文字母，数字或者下划线，昵称输入框中可以输入中文（匹配） 比如用户名：/[a-z0-9_-]3,16)$/
- 过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等
作用：
- 表单验证（匹配）
- 过滤敏感词（替换）
- 字符串中我们想要的部分（提取）
语法：
-
定义规则
-
查找
JavaScript中定义正则表达式的语法有两种
1.定义正则表达式语法：
const 变量名=/表达式/ //其中/ /是表达式字面量2.判断是否有符合规则的字符串
test()方法 用来查看正则表达式与指定的字符串是否匹配
语法：
regObj.test(被检测的字符串) const str='我们在学习前端 希望学习前端可以高薪毕业'
// const 变量名=/表达式/
// 正则表达式使用:
const reg=/前端/
// 1.定义规则
// 2.是否匹配
// regObj.test(被检测的字符串)
console.log(reg.test(str));//true3.检索（查找）符合规则的字符串：
exec()方法 在一个指定字符串中执行一个搜素匹配
regObj.exec(被检测字符串)如果匹配成功，exec()方法返回一个数组，否则返回null
元字符
普通字符：
大多数的字符能够描述他们本身，这些字符称作普通字符，例如所有的字母和数字。也就是说普通字符只能匹配字符串中与他们相同的字符
元字符(特殊字符)：
作用：是一些具有特殊含义的字符，可以极大的提高了灵活性和强大的匹配功能。
- 比如，规定用户只能输入英文26个英文字母，普通字符的话abcdefgh.....
- 但是换成元字符写法：[a-z]
参考文档
MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
正则测试工具: http://tool.oschina.net/regex
为了方便记忆和学习，我们对众多的元素进行了分类：
-
边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
正则表达式的边界符（位置符）用来提示字符所处的位置，主要有两个字符
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁开始） |
| $ | 表示匹配行尾的文本（以谁结束） |
-
量词（表示重复次数）
用来设定某个模式出现的次数
| 量词 | 说明 |
|---|---|
| * | 重复0次或更多次 |
| + | 重复一次或更多次 |
| ？ | 重复0次或1次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
-
字符类（比如\d表示0~9）
（1）[]匹配字符集合
1.后面的字符串只要包含abc中任意一个字符，都返回true。
console.log(/[abc]/.test('andy'))//true
console.log(/^[abc]$/.test('ab'))//false 精确匹配 只可以有一个
console.log(/[abc]/.test('ab'))//true
console.log(/^[abc]{2}$/.test('ab'))//true 2.[]里面加上-连字符
console.log(/^[a-z]$/.test('c'))//true使用连字符-表示一个范围
- [a-z]表示a到z26个英文字母都可以
- [a-zA-Z]表示1大小写都可以
- [0-9]表示0~9的数字都可以
- [a-zA-Z0-9]表示只可以输入英文字母大小写和数字0-9
例如：腾讯QQ号：
^[1-9][0-9]{4,}$(腾讯QQ从10000开始)//重复四次 离他最近的重复四次
3.[]里面加上^符号
比如：
[^a-z]匹配除了小写字母以外的字符，注意要写到中括号里面
(2).匹配除换行符之外的任何单个字符
用户名验证案例
需求:用户名要求用户英文字母，数字，下划线或者短横线组成，并且用户名长度为6~16位
分析：
- 首先准备好这种正则表达式模式/^[a-zA-Z0-9-_]{6,16}$/
- 当表单失去焦点就开始验证。
- 如果符合正则规范，则让后面的span标签加right类
- 如果不符合正则规范，则让后面的span标签添加wrong类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
width: 250px;
height: 30px;
vertical-align: middle;
line-height: 30px;
padding-left: 15px;
}
.error {
color: red;
background: url(./images/images/error1.png) no-repeat left center;
}
.right {
color: green;
background: url(./images/images/right.png) no-repeat left center;
}
</style>
</head>
<body>
<input type="text">
<span></span>
<script>
const reg=/^[a-zA-Z0-9-_]{6,16}$/
const input=document.querySelector('input')
const span=input.nextElementSibling
input.addEventListener('blur',function(){
console.log(reg.test(this.value))
if(reg.test(this.value)){
span.innerHTML='输入正确'
span.className=('right')
}
else {
span.innerHTML='请输入6~16位的英文数字下划线'
span.className=('error')
}
})
</script>
</body>
</html>(3)预定义：指的是某些常见模式的简写方式
| 预定类 | 说明 |
|---|---|
| \d | 匹配0-9之间的任一数字相当于[0-9] |
| \D | 匹配所有0-9以外的字符，相当于[^0-9] |
| \w | 匹配任意的字母，数字和下划线，相当于[A-Za-z0-9_] |
| \W | 除所有字母，数字和下划线，相当于[^A-Za-z0-9_] |
| \s | 匹配空格（包括换行符，制表符，空格符等）相当于[\t\r\n\v\f] |
| \S | 匹配非空格的字符，相当于[^\t\r\n\v\f] |
日期格式:^\d{4}-\d{1,2}-\d{1,2}修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写。是否支持多行匹配等
语法：
/表达式/修饰符- i是ignore的缩写，正则匹配时字母不区分大小写
- g是global的缩写，匹配所有满足正则表达式的结果
替换replace替换
语法：
字符串.replace(/正则表达式/,'替换的文本') const str='java是一门编程语言,学完java工资很高'
const re=str.replace(/java/ig,'前端')//全局替换 没有g只能替换一个
const re=str.replace(/java|JAVA/g,'前端')//全局替换 没有g只能替换一个
console.log(re)过滤敏感词
需求：要求用户不能输入敏感字
分析：
- 用户输入内容
- 内容进行正则替换查找，找到敏感词，进行**
- 要全局替换使用修饰符g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<div></div>
<script>
const tx=document.querySelector('textarea')
const btn=document.querySelector('button')
const div=document.querySelector('div')
btn.addEventListener('click',function(){
// tx.value.replace(/激情|基情/,'**')
div.innerHTML=tx.value.replace(/激情/g,'**')
})
</script>
</body>
</html>
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
