JS高级（正则表达式）

最新推荐文章于 2024-05-06 04:45:20 发布

DF-vegan

最新推荐文章于 2024-05-06 04:45:20 发布

阅读量39

点赞数

文章标签：正则表达式

本文链接：https://blog.csdn.net/weixin_57920269/article/details/130026037

版权

一、正则表达式的使用

RegExp（/ /）
/ / 字面量

    //1.利用RegExp对象创建正则表达式
    var regexp = new RegExp(/123/);
    console.log(regexp);


    //2.利用字面量进行创建/ /
    var rg = /123/;

检验是否是正则表达式：

regexobj.test（str）

regexobj ：是写的正则表达式
str ：测试的文本
检测str文本是否符合我们写的正则表达式规范

    var rg = /123/
    //3.检测是否属于正则test（）
    console.log(rg.test('123')); //true
    console.log(rg.test("abc")); //false

二、正则表达式的特殊字符（元字符）

特殊字符也称为元字符，在正则表达式中是具有特殊意义的专用符号：

^、$、+等

1. 边界符

用来提示字符所处的位置，主要有两个字符

    var rg = /abc/; //正则表达式不需要引号
    //   只要包含存在abc就是true
    console.log(rg.test("abc")); //true
    console.log(rg.test("aabc")); //true
    console.log(rg.test("aabcd")); //true

        //abc开头就正确
        var reg = /^abc/;
        console.log(reg.test("abc")); //true
        console.log(reg.test("aabc")); //fasle
        console.log(reg.test("abcd")); //true

    //abc开头和结尾
    var reg1 = /^abc$/; //精确匹配
    console.log(reg.test("abc")); //true
    console.log(reg.test("aabc")); //fasle
    console.log(reg.test("aabcd")); //fasle

2. 字符类

[ ]

只用【】包裹：任意一个字母存在就true

var rg = /[abc]/; //只要包含a、或者b、或者c都返回ture
console.log(rg.test("anan")); //存在a返回true
console.log(rg.test("baby")); //存在b返回true
console.log(rg.test("color")); //存在c返回true
console.log(rg.test("from")); //不存在三个其中一个false

既有边界符又有【】：只能单选一（符合字符串条件即正确）

     var rg = /^[abc]$/; //三选一：只能选取其中一个
     console.log(rg.test("aa")); //false
     console.log(rg.test("a")); //true
     console.log(rg.test("b")); //true
     console.log(rg.test("c")); //true
     console.log(rg.test("abc")); //false

在设置范围内单选即正确

    var reg = /^[a-z]$/; //26个小写英文字母任何一个都是true
    console.log(reg.test("f")); //true
    console.log(reg.test("h")); //true
    console.log(reg.test(1)); //非英文字母：false
    console.log(reg.test("H")); //非小写：false

组合条件多选一

    //字符组合(多选一)
    var reg1 = /^[a-zA-Z0-9_-]$/; //小写字母和大写字母范围和数值0-9和_和-
    console.log(reg1.test("a")); //true
    console.log(reg1.test("B")); //true
    console.log(reg1.test(7)); //true
    console.log(reg1.test("_")); //true
    console.log(reg1.test("!")); //false

上面条件取反即正确

    //字符串中取反[^]
    var reg1 = /^[^a-zA-Z0-9_-]$/; //小写字母和大写字母范围和数值0-9和_和-
    console.log(reg1.test("a")); //false
    console.log(reg1.test("B")); //false
    console.log(reg1.test(7)); //false
    console.log(reg1.test("_")); //false
    console.log(reg1.test("!")); //true

3. 量词符

var reg = /^a*$/;
console.log(reg.test("")); //true
console.log(reg.test("a")); //true
console.log(reg.test("aa")); //true

var reg = /^a+$/;
console.log(reg.test("")); //fasle
console.log(reg.test("a")); //true
console.log(reg.test("aa")); //true

var reg = /^a?$/;
console.log(reg.test("")); //true
console.log(reg.test("a")); //true
console.log(reg.test("aa")); //fasle

var reg = /^a{3}$/;
console.log(reg.test("")); //fasle
console.log(reg.test("a")); //fasle
console.log(reg.test("aaa")); //true

var reg = /^a{3,7}$/;
console.log(reg.test("")); //fasle
console.log(reg.test("aaaaaaaaaaaaaaaaaaa")); //fasle
console.log(reg.test("aaa")); //true

//表单验证案例
<script>
  // 量词设定某个模式出现的次数
  var reg = /^[a-zA-Z0-9_-]{6,16}$/; //这个模式用户只能输入指定字符，但是又边界符和[]就先顶了只能多选一
//{6,16}中间不可以存在空格
console.log(reg.test("8")); //fasle
console.log(reg.test("18")); //fasle
console.log(reg.test("aa")); //fasle
console.log("-------------------------------");
console.log(reg.test("nihao-re123")); //true
</script>

三、用户名验证

正则表达式在线测试 | 菜鸟工具一、校验数字的表达式数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$ 零和非零开头的数字：^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$ 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$ 正数、负数、和小数：^(\-|\+)?\d+(\.\..https://c.runoob.com/front-end/854/

功能需求：

如果用户名合法，后面的提示信息：用户名合法，并且颜色为绿色
如果用户名不合法，后面的提示信息：用户名不合法，并且颜色为红色

使用分析

用户名的正则表达式
当失去焦点开始验证
符合规范span添加right（正确的图标）
不符合添加wrong（错误图标）

<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>

四、括号总结

大括号、量词符、里面表示重复次数
中括号字符集合、匹配方括号中任意字符串
小括号表示优先级

//   大括号  量词符，里面表示重复次数
var reg2 = /^a{3}$/;
//上面只有返回3个a才是正确
var reg3 = /^abc{3}$/;
console.log(reg3.test("abcabc")); //false
console.log(reg3.test("abccc")); //只是让c重复三次  abccc才是true

//   中括号  字符集合，匹配方括号中的任意字符
var reg1 = /^[abc]$/;
//a\b\c都可以

//   小括号  表示优先级
var reg4 = /^(abc){3}$/; //这样就是把abc重复三次
console.log(reg4.test("abcabcabc")); //true
console.log(reg4.test("abccc")); //false

五、预定义类

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

var regtel = /^1[3|4|5|7|8]\d{9}$/;//手机正则表达式
var regdx = /^[1-9]\d{4,}$/;//qq正则表达式
var redname = /^[\u4e00-\u9fa5]{2,8}$/;  //中文昵称
var regpwd = /^[a-zA-Z0-9-_]{6,16}$/;//密码位数

以上代码可以在上面测试工具查看

六、正则表达式的替换

stringObject.replace(regexp/substr,replacement)

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

1.replace（）替换字符串

// 字符串替换
var str = "nihao和nibuhao";
var newstr = str.replace("nihao", "haha");
console.log(newstr); haha和nibuhao

2.正则替换

替换修饰符：按照什么样的模式进行匹配：

g：全局匹配
i：忽略大小写
gi：全局匹配和忽略大小写

 <body>
    <!-- 敏感词留言过滤使用 -->
    <textarea cols="30" rows="10"></textarea>
    <button>提交</button>
    <div></div>
    <script>
      var text = document.querySelector("textarea");
      var btn = document.querySelector("button");
      var div = document.querySelector("div");
      btn.onclick = function () {
        div.innerHTML = text.value.replace(/激情|gay/g, "**");
      };
    </script>
  </body>