ES6/05/正则表达式简介，正则表达式如何使用，正则表达式中的特殊字符（边界符，量词符），预定义类，正则表达式中的替换

最新推荐文章于 2023-03-22 17:33:58 发布

浅香沉木

最新推荐文章于 2023-03-22 17:33:58 发布

阅读量512

点赞数

文章标签： es6/es7

本文链接：https://blog.csdn.net/Java_53/article/details/106470734

版权

正则表达式

目标：1，说出正则表达式的作用
2，能使用一些简单的正则表达式
3，使用正则表达式对表单进行验证
4，使用正则表达式替换内容

正则表达式简介

正则表达式（Regular Expression ：有规则的表达式）是用于匹配字符串组合的模式，在JS中正则表达式也是对象；
作用：字符串匹配，替换，提取等等
正则表达式的特点：
1，灵活性，逻辑性和功能性非常强。
2，可以讯速地简单的方式达到字符串的复杂控制。
3，实际开发，一般复制写好的正则表达式，从网上找，或查手册等；

正则表达式如何使用

1，利用RegExp对象来创建正则表达式
var regexp = new RegExp(/123/);
console.log(regexp);
2,利用字面量创建正则表达式
var rg =/123/;

边界符

两个特殊字符：^ （以什么开头或取反），$ (什么用来结尾)

特殊字符：[] (一系列字符可供选择，字符串中只要有其中一个就返回ture)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式</title>
</head>

<body>
    <script>
        var rg = /abc/;//正则表达里面不需要加引号，不管是数字型还是字符串型
        // /abc/只要包含有abc这个字符串返回的都是true
        console.log(rg.test("abc"));//true
        console.log(rg.test("abcd"));//true
        console.log(rg.test("aabcd"));//true
        console.log("-----------------------1");
        var reg = /^abc/;//^表示以什么开头,不是边界符则表示取反
        console.log(reg.test("abc"));//true
        console.log(reg.test("abcd"));//true
        console.log(reg.test("aabcd"));//false
        console.log("-----------------------2");
        var reg1 = /^abc$/;//$表示以什么结尾，这个正则表达式必须是"abc"才匹配成功
        console.log(reg1.test("abc"));//true
        console.log(reg1.test("abcd"));//false
        console.log(reg1.test("aabcd"));//false
        console.log(reg1.test("abcabc"));//false
        console.log("-----------------------3");
        var rg2 = /[abc]/;//[]表示有一系列字符可供选择，只要匹配其中一个就可以了
        console.log(rg2.test("andy"));//true
        console.log(rg2.test("baby"));//true
        console.log(rg2.test("color"));//true
        console.log(rg2.test("red"));//false
        console.log("-----------------------4");
        var rg3 = /^[abc]$/;//三选一只有是a或者是b或者是c,这个三个字母才返回true
        console.log(rg3.test("a"));//true
        console.log(rg3.test("c"));//true
        console.log(rg3.test("e"));//false
        console.log(rg3.test("mm"));//false
        console.log("-----------------------5");
        var rg4 = /^[a-z]$/;//-表示范围,rg4表示a-z的字符才返回true
        console.log(rg4.test("a"));//true
        console.log(rg4.test("A"));//false
        console.log(rg4.test("g"));//true
        console.log(rg4.test("gg"));//false
        console.log(rg4.test("1"));//false
        console.log(rg4.test("abc"));//false
        console.log("-----------------------6");
        var rg5 = /^[a-zA-Z0-9_-]$/;//26个英文字母小写大写都行，数字，下划线，-中的唯一字符返回true
        console.log(rg5.test("a"));//true
        console.log(rg5.test("B"));//true
        console.log(rg5.test("6"));//true
        console.log(rg5.test("_"));//true
        console.log(rg5.test("-"));//true
        console.log(rg5.test("#"));//false
        console.log(rg5.test("@@"));//false
        console.log("-----------------------7");
        var rg6 = /^[^a-zA-Z0-9_-]$/;//第一个^为边界符表以什么开头，第二个^表示取反，rg6表示不能有数字字母下划线
        console.log(rg6.test("a"));//false
        console.log(rg6.test("B"));//false
        console.log(rg6.test("8"));//false
        console.log(rg6.test("88"));//false
        console.log(rg6.test("_"));//false
        console.log(rg6.test("-"));//false
        console.log(rg6.test("@"));//true
        console.log(rg6.test("!!"));//false
        console.log("-----------------------8");

    </script>
</body>

</html>

量词符：用来设定某个模式（字符或其它式子）出现的次数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式2_量词符</title>
</head>

<body>
    <script>
        var rg = /^a$/;
        //1， * 相当于式子出现次数可以>=0
        var rg1 = /^a*$/;
        console.log(rg1.test(" "));//true
        console.log(rg1.test("a"));//true
        console.log(rg1.test("b"));//false
        console.log(rg1.test("aaa"));//true
        console.log("---------------1");
        //2， + 相当于式子出现次数可以>=1
        var rg2 = /^a+$/;
        console.log(rg2.test(" "));//false
        console.log(rg2.test("a"));//true
        console.log(rg2.test("b"));//false
        console.log(rg2.test("aaa"));//true
        console.log("---------------2");
        //3， ？ 相当于1||0
        var rg3 = /^a$/;
        console.log(rg3.test(""));//true
        console.log(rg3.test("a"));//true
        console.log(rg3.test("b"));//false
        console.log(rg3.test("aaa"));//false
        console.log("---------------3");
        //4， {n} 相当于须重复n次
        var rg4 = /^a{3}$/;
        console.log(rg4.test(""));//false
        console.log(rg4.test("a"));//false
        console.log(rg4.test("b"));//false
        console.log(rg4.test("aaa"));//true
        console.log("---------------4");
        //5， {n,} 相当于式子出现次数大于等于n
        var rg5 = /^a{3,}$/;
        console.log(rg5.test(""));//false
        console.log(rg5.test("a"));//false
        console.log(rg5.test("b"));//false
        console.log(rg5.test("aaa"));//true
        console.log(rg5.test("aaaa"));//true
        console.log("---------------5");
        //6， {3,6} 相当于式子出现次数大于等于3并且小于等于6
        var rg6 = /^a{3,6}$/;
        console.log(rg6.test(""));//false
        console.log(rg6.test("a"));//false
        console.log(rg6.test("b"));//false
        console.log(rg6.test("aaa"));//true
        console.log(rg6.test("aaaa"));//true
        console.log(rg6.test("aaaaaaaa"));//false
        console.log("---------------6");
    </script>
</body>

</html>

正则表达式之匹配总结

1，大括号：量词符，里面表示式子的重复次数；
2，中括号：字符集合，匹配方括号（即：[]）中的任意字符；
3，小括号：表示优先级；

正则表达式中的特殊字符

预定义类

预定义类指的是某些常见模式的简写方式；

菜鸟工具网址：http://c.runoob.com/
菜鸟工具网址
var rg = /^[3|4|5|7|8]\d{9}$/;/手机号码的正则表达式
var rg = /^[1-9]\d{4,}$/;/QQ号码的正则表达式
var rg = /^[3|4|5|7|8]\d{9}$/;/手机号码的正则表达式

//验证提示内容及样式改变
this.nextElementSibling.innerHTML ="<i class="right"><i>输入正确";

实例：表单验证——用户名验证

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证——用户名验证</title>
</head>
<style>
    .right {
        color: green;
    }

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

<body>
    <input type="text" class="uname"><span>请输入用户名</span>
    <script>
        var reg = /^[a-zA-Z0-9_-]{6,16}$/;//这个模式用户只能输入英文，数字，下划线，短横线
        var uname = document.querySelector(".uname");
        var span = document.querySelector("span");
        uname.onblur = function () {
            if (reg.test(this.value)) {
                console.log("正确的");
                span.className = "right";
                span.innerHTML = "用户名输入合法"
            } else {
                console.log("错误的");
                span.className = "wrong";
                span.innerHTML = "用户名输入不合法"
            }

        }
    </script>
</body>

</html>

正则表达式中的替换

replace()方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。
stringObject.replace(regexp/substr,replacement);
1，第一个参数：被替换的字符串或者正则表达式；
2，第二个参数：替换为字符串
3，返回值是一个替换完毕的新字符串；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式_替换</title>
</head>

<body>
    <script>
        var text = document.querySelector("textarea");
        var btn = document.querySelector("button");
        var div = document.querySelector("div");
        btn.onclick = function () {//把"激情"和"gay"敏感词替换为"**"
            div.innerHTML = text.value.replace(/激情|gay/g, "**");
        }
    </script>
</body>

</html>