正则表达式（一）

最新推荐文章于 2025-05-24 15:24:14 发布

檬是柠檬的檬826

最新推荐文章于 2025-05-24 15:24:14 发布

阅读量199

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_62343228/article/details/124036978

版权

认识正则表达式

1.什么是正则表达式

正则表达式：是一个对象( {} )，描述字符串结构的语法规则，主要用于字符串的匹配。

2.正则表达式的特点

正则表达式额灵活性
逻辑性和功能性非常强
可以迅速地用极简单的方式达到字符串地复杂控制

3.正则表达式的使用

（1）创建正则对象

//字面量方式
var 变量名 = /表达式/;

//RegExp构造函数方式
//或者var 变量名 = RegExp(/表达式/);
var 变量名 = new RegExp(/表达式/);

（2）正则的验证test（）

正则对象.test(字符串)
//匹配成功返回true，失败返回false。

var str = "123";

//创建正则对象
var reg1 = /123/;
var reg2 = new RegExp(/abc/);

//对字符串进行验证

console.log(reg1.test(str));    //输出结果为true

console.log(reg2.test(str));    //输出结果为false

4.模式修饰符

/表达式/[switch]

[switch]是模式修饰符，是可选的，对正则表达式进行额外的限制

g: 全局匹配
i：忽略大小写
m：多行匹配

//边界符
^: 开头的文本匹配
$: 结尾的文本匹配

正则表达式的特殊字符

1.边界符

var reg = /abc$/;

console.log(reg.test("abc"));

console.log(reg.test("abcd"));

console.log(reg.test("abcabc"));

2.预定义类

. ：匹配任意的单个字符，'\n'除外

\d :匹配0~9之间的任意一个数字([0~9])

\D :匹配0~9之外的其他字符[^0~9],^表示除此之外

\w :匹配任意的字母、数字和下划线 ([a~z A~Z 0~9])

在这里插入图片描述

例如：

var str = "good idea";

var reg1 = /\s../gi;

console.log(str.match(reg1));    //输出结果为[ ' id' ]  从str中匹配一个字串，匹配规则为reg1

转义特殊字符：在正则表达式中可以使用"\"转义特殊字符。

var s1 = "^abc\\1.23*edf$";

var reg2 = /\.|\$|\*|\^|\\/gi; 

console.log(s1.match(reg2));    //输出结果为[ '^', '\\', '.', '*', '$' ]

3.字符类（取值范围）

[cat]: "[]"表示集合，匹配集合中的任意一个字符c，a，t

[^cat]: 匹配cat之外的其他字符

[A-Z]: 匹配A-Z之间的所有字符

[a-z]: 匹配小写的字母

[^a-z]: 匹配小写字母之外的其他字符

[a-zA-Z0-9]: 匹配大小写字母和0-9之间的所有字符

[\u4e00-\u9fa5]: 匹配所有汉字

在这里插入图片描述

在这里插入图片描述
例：

var reg = /[abc]/;

console.log(reg.test("andy"));    //输出结果为true
console.log(reg.test("boby"));    //输出结果为true
console.log(reg.test("color"));    //输出结果为true
console.log(reg.test("def"));    //输出结果为false

var reg = /^[abc]$/;

console.log(reg.test("a"));    //输出结果为true
console.log(reg.test("b"));    //输出结果为true
console.log(reg.test("c"));    //输出结果为true
console.log(reg.test("aa"));    //输出结果为false
console.log(reg.test("cc"));    //输出结果为false

4.字符组合

如果允许用户输入英文字母（不区分大小写）、数字、短横线-、下划线_的正则情况。

var rg =  /^[a-zA-Z0-9_-]$/;

当中括号“[]”与元字符“^”一起使用时，称为取反符。

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

console.log(reg.test("a"));    //输出结果为false
console.log(reg.test("z"));    //输出结果为false

console.log(reg.test("1"));    //输出结果为true
console.log(reg.test("A"));    //输出结果为true

5.【案例】用户名验证

<style>
    .success{
        color: green;
    }
    .wrong{
        color: red;
    }
</style>
<body>
    <label>用户名：
        <input type="text" class="uname"> <span></span>
    </label>
</body>
<script>
    $(function(){
        var reg = /^[a-zA-Z0-9_-]{6,16}$/;

        $(".uname").bind("blur",function(){
            let str = $(this).val();
            if(reg.test(str)){
                $("span").removeClass();
                $("span").html("输入格式正确");
                $("span").addClass("success");
            }else{
                $("span").html("输入格式不正确");
                $("span").addClass("wrong");
            }
        })
    })
</script>