文章目录
正则表达式
不是第一次接触正则表达式了，看来它的应用还是挺广泛的，之前在爬虫就用到很多正则表达式。
上菜鸟链接，有需求，cv它写好的https://c.runoob.com/front-end/854/
先看看在JS中它的语法：
1. 定义正则表达式语法：
let 变量名=/表达式/
其中 / / 是正则表达式字面量（也就是说这个变量名是一个对象，可以通过.来调用方法）
- 比如：
let reg=/前端/
2.判断是否有符合规则的字符串：
test() 方法 用来查看正则表达式与指定的字符串是否匹配
- 示例：
let reg = /java/
let str = '我们 不是和ewqjava'
console.log(reg.test(str)) //true
- 如果正则表达式与指定的字符串匹配 ，返回
true，否则false
3.检索（查找）符合规则的字符串：
exec() 方法 在一个指定字符串中执行一个搜索匹配
- 示例：
// 定义正则表达式 reg 里面存的是对象
let reg = /前端/
let str = '我们大家都在学前端'
// 检索 exec()
console.log(reg.exec(str)) // 返回的是数组
- 如果匹配成功，
exec()方法返回一个数组，否则返回null
元字符：
为了方便记忆和学习，对众多的元字符进行了分类：
- 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
- 量词 （表示重复次数）
- 字符类 （比如 \d 表示 0~9）
参考文档：
- MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
- 正则测试工具: http://tool.oschina.net/regex
1. 边界符：
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁开始） |
| $ | 表示匹配行尾的文本（以谁结束） |
如果 ^ 和 $ 在一起，表示必须是精确匹配。
示例：
console.log(/^哈$/.test('我开心的哈哈大笑')) // false
console.log(/^哈$/.test('哈哈')) // false
console.log(/^哈$/.test('哈')) // true 精确匹配
2. 量词 （表示重复次数）
3. 字符类：
(1) [ ] 匹配字符集合 （单个的[ ]只匹配一个字符，想匹配多个要加上{n,m}）
- 后面的字符串只要包含
abc中任意一个字符，都返回true。
(2) [ ] 里面加上 - 连字符
使用连字符 - 表示一个范围
比如：
[a-z] 表示 a 到 z 26个英文字母都可以
[a-zA-Z] 表示大小写都可以
[0-9] 表示 0~9 的数字都可以
示例：
腾讯QQ号：^[1-9][0-9]{4,}$ (腾讯QQ号从10000开始，[1-9]匹配开头数字，[0-9]{4,}匹配4位数及以上0~9的数字)
(3) [ ] 里面加上 ^ 取反符号
- 比如：
[^a-z]匹配除了小写字母以外的字符(注意要写到中括号里面)
(4) . 匹配除换行符之外的任何单个字符
(5) 预定义：指的是某些常见模式的简写方式。
日期格式：^\d{4}-\d{1,2}-\d{1,2}
4 修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
语法：
/表达式/修饰符
i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果
示例：
console.log(/a/i.test('a')) //true
console.log(/a/i.test('A')) //true
替换 replace 替换
语法：
字符串.replace(/正则表达式/,'替换的文本')
示例：
console.log('蓝天a白云黑土a逮a虾户a'.replace(/a/g, '')) //蓝天白云黑土逮虾户
自定义属性
固有属性:
标签天生自带的属性 比如class id title等, 可以直接使用点语法操作。
自定义属性:
由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API
getAttribute('属性名') // 获取自定义属性
setAttribute('属性名', '属性值') // 设置自定义属性
removeAttribute('属性名') // 删除自定义属性
data-自定义属性:
传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
<body>
<div class="box" data-index="0" data-name="andy"></div>
<script>
// 设置自定义属性
let box = document.querySelector('.box')
box.setAttribute('data-id', 20)
box.setAttribute('data-name', 10)
console.log(box.getAttribute('data-id')) //20
console.log(box.dataset) //DOMStringMap对象 {index: '0', name: '10', id: '20'}
console.log(box.dataset.index) //属性值 0
box.removeAttribute('data-name') //删除属性
console.log(box.dataset) //DOMStringMap 对象{index: '0', id: '20'}
</script>
</body>
过滤敏感词案例
/^[\u4e00-\u9fa5]{2,8}$/ //unicode匹配2~8个中文
在文本框中输入，按下Enter或者点击发布都能输出：body代码如下：
<body>
<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
})
//监听enter键按下事件
textarea.addEventListener('keydown', function (e) {
// 过滤用户输入的内容
if (e.key == 'Enter') {
div.innerHTML = textarea.value.replace(/激情|基情/g, '**')
}
})
</script>
</body>
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
