当前位置：网站首页>JS10day(api 阶段性完结，正则表达式简介，自定义属性，过滤敏感词案例，注册模块验证案例)

JS10day(api 阶段性完结，正则表达式简介，自定义属性，过滤敏感词案例，注册模块验证案例)

2022-07-02 09:43:00 【荻风溪畔】

文章目录

正则表达式

不是第一次接触正则表达式了，看来它的应用还是挺广泛的，之前在爬虫就用到很多正则表达式。
上菜鸟链接，有需求，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, ''))   //蓝天白云黑土逮虾户

自定义属性

固有属性:

标签天生自带的属性比如classidtitle等, 可以直接使用点语法操作。

自定义属性:

由程序员自己添加的属性,在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>