正则表达式笔记

凌歆

已于 2023-02-03 13:42:46 修改

阅读量1.1k

点赞数

分类专栏：知识点文章标签： javascript

于 2022-03-21 21:04:08 首次发布

本文链接：https://blog.csdn.net/qq_33938234/article/details/123646018

版权

知识点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript高级day04

var code = "16fcada9-50cd-484a-8a79-e13457563f3a"

1. 正则表达式

1.1 什么是正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在js中，正则表达式也是对象

1.2 创建正则表达式

通过调用RegExp对象的构造函数创建

var 变量名=new RegExp(/表达式/)

通过字面量创建

var 变量名=/表达式/;

1.3 测试正则表达式 test

test()正则对象方法，用于检测字符串是否符合该规则，该对象返回true或false，参数为需要测试的字符串

regexObj.test(str)

参数说明
- regexObj：正则表达式变量
- str：测试的文本
- 返回值：文本是否符合正则表达式的规范

示例

<!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>
</head>

<body>
    <script>
        // 通过RegExp构造函数创建正则表达式

        var rg1 = new RegExp(/1123/);

        // 通过字面量的形式创建正则表达式

        var rg2 = /1123/;

        // 正则表达式的测试方法

        // 判读是否包含123

        console.log(rg1.test('11111'));

        console.log(rg2.test('111233'));
    </script>
</body>

</html>

效果图

在这里插入图片描述

1.4 正则表达式的特殊字符

1.4.1 边界符

提示字符所处的位置

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

如果^ 和$同时存在，表示必须精准匹配

示例

<!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>
</head>

<body>
    <script>
        // 定义一个正则表达式

        // 表示以abc开始
        var rg1 = /^abc/;


        console.log(rg1.test('abc'));
        console.log(rg1.test('abcd'));
        console.log(rg1.test('aabc'));


        // 表示以abc开始且以abc结束，只能是abc

        console.log('---------------------------');

        var rg2 = /^abc$/;

        console.log(rg2.test('abc'));
        console.log(rg2.test('abcd'));
        console.log(rg2.test('aabc'));
    </script>
</body>

</html>

效果图

在这里插入图片描述

1.4.2 字符类

所有可供选择的字符都放在方括号内
方括号

/[abc]/      // 表示包含a或b或c的文本

方括号内部的范围符

/[a-z]/    // 表示包含a到z的文本，文本是英文字符

示例

<!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>
</head>

<body>
    <script>
        // 定义一个字符类的正则表达式

        var rg1 = /[abc]/; // 表示包含a 或者b或者c的文本

        console.log(rg1.test('abc'));
        console.log(rg1.test('a'));
        console.log(rg1.test('b'));
        console.log(rg1.test('c'));

        console.log(rg1.test('alllll'));

        console.log(rg1.test('bclllll'));

        console.log(rg1.test('lllll'));

        console.log('---------------------');

        // 表示a,b,c中的一个字符

        var rg2 = /^[abc]$/;
        console.log(rg2.test('a'));
        console.log(rg2.test('b'));
        console.log(rg2.test('c'));

        console.log(rg2.test('alllll'));

        console.log(rg2.test('bclllll'));

        console.log(rg2.test('lllll'));




        console.log('---------------------------------');
        // 表示a-z中的一个字符

        var rg3 = /^[a-z]$/;

        console.log(rg3.test('allllz'));

        console.log(rg3.test('a'));
        console.log(rg3.test('m'));
        console.log(rg3.test('z'));
    </script>
</body>

</html>

效果图

在这里插入图片描述

1.4.3 字符类的组合写法

字符组合

/[a-zA-z1-9]/  // 表示包含a到z的大小写字母和数字1-9都可以

字符取反，放在中括号[]里面

/[^a-zA-z1-9]/  // 表示不包含a到z的大小写字母和数字1-9

示例

<!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>
</head>

<body>
    <script>
        // 字符组合

        // 表示可以是a-z或A-Z或1-9或_或-其中的任意一个
        var rg1 = /^[a-zA-z1-9_-]$/;

        console.log(rg1.test('a'));
        console.log(rg1.test('A'));
        console.log(rg1.test(1));
        console.log(rg1.test('_'));
        console.log(rg1.test('-'));

        console.log(rg1.test('!'));

        console.log('---------------------------------');

        // 字符取反，不包括a-z和A-Z和1-9和_和-中的任意一个

        var rg2 = /^[^a-zA-z1-9_-]$/;
        console.log(rg2.test('a'));
        console.log(rg2.test('A'));
        console.log(rg2.test(1));
        console.log(rg2.test('_'));
        console.log(rg2.test('-'));

        console.log(rg2.test('!'));
    </script>
</body>

</html>

效果图

在这里插入图片描述

1.4.4 量词符

用来设定某个模式出现的次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
？	重复零次或一次
{n}	重复n次
{n,}	重复n次及以上
{n,m}	重复n到m次

示例

<!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>
</head>

<body>
    <script>
        // 量词符，设定a出现的次数

        // a出现0次或n次
        var rg1 = /^a*$/;

        console.log(rg1.test(''));
        console.log(rg1.test('a'));
        console.log(rg1.test('aaaa'));
        console.log(rg1.test('aaa'));

        console.log('-----------------------------------');
        // a出现1次或n次
        var rg2 = /^a+$/;
        console.log(rg2.test(''));
        console.log(rg2.test('a'));
        console.log(rg2.test('aaaa'));
        console.log(rg2.test('aaa'));

        console.log('-----------------------------------');


        // a出现0次或1次
        var rg3 = /^a?$/;

        console.log(rg3.test(''));
        console.log(rg3.test('a'));
        console.log(rg3.test('aaaa'));
        console.log(rg3.test('aaa'));

        console.log('-----------------------------------');


        // a出现n次

        var rg4 = /^a{3}$/;
        console.log(rg4.test(''));
        console.log(rg4.test('a'));
        console.log(rg4.test('aaaa'));
        console.log(rg4.test('aaa'));

        console.log('-----------------------------------');


        // a出现n次及以上

        var rg5 = /^a{3,}$/;

        console.log(rg5.test(''));
        console.log(rg5.test('a'));
        console.log(rg5.test('aaaa'));
        console.log(rg5.test('aaa'));

        console.log('-----------------------------------');


        // a出现n到m次

        var rg6 = /^a{3,6}$/;
        console.log(rg6.test(''));
        console.log(rg6.test('a'));
        console.log(rg6.test('aaaa'));
        console.log(rg6.test('aaa'));
        console.log(rg6.test('aaaaaaaaa'));
    </script>
</body>

</html>

效果图

在这里插入图片描述

用户名验证正则

<!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>
</head>

<body>
    <script>
        // 设置一个用户名的验证格式，用户名中只允许出现a-z和A-Z和0-9和_和-,长度在6-16个字符之间

        var rg = /^[a-zA-z0-9_-]{6,16}$/;

        console.log(rg.test('aaa'));
        console.log(rg.test('aaa!007'));
        console.log(rg.test('aaa-bbb'));
    </script>
</body>

</html>

效果图

在这里插入图片描述

1.4.5 用户名验证案例

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        span {
            color: #999;
        }
        
        .right {
            color: green;
        }
        
        .wrong {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text"> <span>请输入用户名</span>
    <script>
        // 设置表单的正则

        var rg = /^[a-zA-z0-9_-]{6,16}$/;

        var ipt = document.querySelector("input");
        var span = document.querySelector("span");

        ipt.addEventListener("blur", function() {
            if (rg.test(ipt.value)) {
                span.className = 'right';
                span.innerHTML = '用户名格式正确';
            } else {
                span.className = 'wrong';
                span.innerHTML = '用户名格式有误';
            }
        })
    </script>
</body>

</html>

效果图

在这里插入图片描述

1.4.6 括号总结

大括号{}，里面表示重复次数
中括号[]，匹配中括号中的任意字符
小括号表示优先级

示例

<!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>
</head>

<body>
    <script>
        // 括号总结以及区别
        // 表示abc其中的任意一个字符出现三次
        var rg = /^[abc]{3}$/;

        console.log(rg.test('aaa'));
        console.log(rg.test('abc'));

        console.log('--------------------------------');

        // 表示c字符出现三次

        var rg2 = /^abc{3}$/;
        console.log(rg2.test('abcabcabc'));
        console.log(rg2.test('abccc'));
        console.log('--------------------------------');


        // 表示abc字符出现三次

        var rg3 = /^(abc){3}$/;

        console.log(rg3.test('abcabcabc'));
        console.log(rg3.test('abccc'));
        console.log('--------------------------------');
    </script>
</body>

</html>

效果图

在这里插入图片描述

1.5 预定义类

上述常见模式的简写形式

预定义类	说明
\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]`

座机号码的正则

<!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>
</head>

<body>
    <script>
        // 座机号的两种格式  010-1234567   0530-123456

        // 匹配正则


        // |表示或者的意思，前面的表达式或者后面的表达式
        var rg = /^\d{3}-\d{7}|\d{4}-\d{6}$/;

        console.log(rg.test('010-1234567'));
        console.log(rg.test('0530-123456'));
    </script>
</body>

</html>

效果图

在这里插入图片描述

1.6 正则表达式的替换

使用replace()方法可以实现替换字符串的操作，用来替换的参数可以是一个字符串或者一个正则表达式

stringObject.replace(regexp/substr,replacement)

参数说明
- 第一个参数：被替换的字符串或者正则表达式
- 第二个参数：替换为的字符串
- 返回值：替换完毕的新的字符串
正则表达式的参数

/表达式/[switch]

switch的取值
- g:全局匹配
- i:忽略大小写
- gi:全局匹配+忽略大小写

1.7 使用参数过滤敏感词

<!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>
</head>

<body>
    <textarea name="" id="text" cols="30" rows="10"></textarea>
    <button id="btn">提交</button>
    <div></div>
    <script>
        // 过滤文本域中的敏感词
        var text = document.querySelector("textarea");

        var btn = document.querySelector("#btn");

        var div = document.querySelector("div");

        // 点击提交按钮，将文本域中的敏感词过滤

        // 定义一个过滤的正则

        // 全局过滤
        var rg = /激情|gay/g;
        btn.addEventListener("click", function() {
            div.innerHTML = text.value.replace(rg, '**');
        })
    </script>
</body>

</html>

效果图

在这里插入图片描述

凌歆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则表达式笔记

JavaScript高级day04文章目录JavaScript高级day041. 正则表达式1.1 什么是正则表达式1.2 创建正则表达式1.3 测试正则表达式 test示例1.4 正则表达式的特殊字符1.4.1 边界符示例1.4.2 字符类示例1.4.3 字符类的组合写法示例1.4.4 量词符示例用户名验证正则1.4.5 用户名验证案例1.4.6 括号总结示例1.5 预定义类座机号码的正则1.6 正则表达式的替换1.7 使用参数过滤敏感词1. 正则表达式1.1 什么是正则表达式正则表达式（Re
复制链接

扫一扫