JS BOM 正则表达式

前端新手2022

已于 2022-08-13 22:15:57 修改

阅读量107

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

于 2022-08-13 21:00:44 首次发布

本文链接：https://blog.csdn.net/qq_35112578/article/details/126317599

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

定义：用于匹配字符串字符组合的模式

作用：

表单验证（匹配）

过滤敏感词（替换）

从字符串中提取我们想要的部分（提取）

语法：两步法

第一步：定义规则

let 变量名=/表达式/

第二步：根据规则查找（检测）：找到则返回

test（）用来查找正则表达式与指定字符是否匹配

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

let str='it培训，java开发，前端开发，软件测试'
let reg=/前端/
let re=reg.test(str)
console.log(re)

exec() 检索查找符合规则的字符串，在指定字符串执行搜索匹配

let str='it培训，java开发，前端开发，软件测试,WEB前端'
let reg=/前端/
let re=reg.exec(str)

console.log(re)

元字符

【a-z】
【0-9】
边界符：表示位置、开头和结尾:

^ 表示以谁开头
$ 表示以谁结尾
如果^和$一起使用，表示精确匹配

量词：表示重复次数只针对最左边的

* 重复零次或更多次 >=0
+ 重复一次或更多次 >=1
？重复零次或一次 0 || 1
{n} 重复n次只能出现n次 ===n
{n,} 重复n次或更多次至少出现n次 >=n
{n,m} 重复n次到m次 n<=x<=m
注意，逗号左右两侧不要出现空格

字符类：\d表示0-9

[] 中括号里面加连字符“-” 匹配字符集合，例如【a-z】，匹配任一字符返回TRUE，或者【a-zA-Z】,[0-9]
【^】取反，必须写到中括号里面 例如，【^a-z】表示除了小写字母a-z都可以
. 点，匹配除换行符之外的任何单个字符
\d 匹配0-9任意数字【0-9】
\D 匹配除0-9的任意数字【^0-9】
\s 匹配空格、换行符、制表符等【\t\r\n\v\f】
\S 匹配非空格的字符【^\t\r\n\v\f】
\w 匹配任意数字大小写字母、下划线【a-zA-Z0-9_】
\W 除所有字母、数字、下划线以外的字符【^a-zA-Z0-9_】

例如日期格式： ^\d{4}-\d{1,2}-\d{1,2} 样例 2022-08-12

案例用户名验证

<!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>用户名验证</title>
    <style>
        input {
            width: 500px;
        }


    .right {
           
            color: green;
        }

        .wrong {
           
            color: red
        }
    </style>
</head>

<body>
    <input type="text" placeholder="请输入6-16位的用户名，可以使用英文大小写、数字、下划线"><br>
    <span></span>

    <script>
        let input = document.querySelector('input')
        let span = document.querySelector('span')

        // 失去焦点事件注册，blur
        input.addEventListener('blur', function () {
           
            if (/^[a-zA-Z0-9_]{6,16}$/.test(input.value)) {
                 alert (/^[a-zA-Z0-9_]{6,16}$/.test(input.value))
                span.className='right'
                input.style.border='2px solid green'
                span.innerHTML = '√ 输入正确'
            } else {
                span.className='wrong'
                input.style.border='2px solid red'
                 span.innerHTML = 'x 请输入6-16位的英文大小写、数字、下划线'

            }
        })
    </script>
</body>

</html>

修饰符

作用：约束正则表达式的细节，例如区分大小写，是否多行等

语法：/表达式/修饰符

i ignore缩写，不区分大小写
g gloable 缩写，匹配所有满足正则表达式的结果

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

替换 replace

字符串.replace(/正则表达式/,‘替换的文本’）

string.replace(/激情|基情/g,'**')

前端新手2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JS BOM 正则表达式

定义：用于匹配字符串字符组合的模式

作用：

表单验证（匹配）

过滤敏感词（替换）

从字符串中提取我们想要的部分（提取）

语法：两步法

第一步：定义规则

第二步：根据规则查找（检测）：找到则返回

元字符

【a-z】

【0-9】

边界符：表示位置、开头和结尾:

量词：表示重复次数 只针对最左边的

字符类：\d表示0-9

修饰符

作用：约束正则表达式的细节，例如区分大小写，是否多行等

语法：/表达式/修饰符

i ignore缩写 ，不区分大小写

g gloable 缩写，匹配所有满足正则表达式的结果

替换 replace

量词：表示重复次数只针对最左边的

i ignore缩写，不区分大小写