首页 > 其他分享 >JS之正则表达式

JS之正则表达式

时间:2024-11-08 20:45:25浏览次数:5  
标签:console log 正则表达式 JS test str var

一、什么是正则表达式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

        // 这个正则表达式表示一个形式:以m开头,n结尾,中间是6位数字
        var regexp = /^m\d{6}n$/;

        var str1 = 'm123456n';
        var str2 = 'm1234567n';
        var str3 = 'm123b56n';
        var str4 = '123456';

        console.log(regexp.test(str1));     // true
        console.log(regexp.test(str2));     // false
        console.log(regexp.test(str3));     // false
        console.log(regexp.test(str4));     // false
    </script>
</body>

</html>

二、正则表达式的创建

    <script>
        // 创建正则表达式方法1
        var regexp1 = /^\d{6}$/;
        // 创建正则表达式方法2
        var regexp2 = new RegExp('^\\d{6}$');

        var str = '555666';

        console.log(regexp1.test(str));     // true
        console.log(regexp2.test(str));     // true

        console.log(typeof regexp1);        // object
        console.log(typeof regexp2);        // object
    </script>

三、元字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 题目1:某快递公司运单号形式是这样的:123-4567-890,请使用正则表达式检查某字符串是否符合此格式

        // 正则表达式
        var regexp1 = /^\d\d\d-\d\d\d\d-\d\d\d$/;
        // 待测试的字符串
        var str1 = '444-5555-000';
        console.log(regexp1.test(str1));

        // 题目2:某产品的验证秘钥形式是这样的:□□□-□□□□-□□□,其中□表示字母数字或者下划线,请使用正则表达式检查某字符串是否符合此格式

        // 正则表达式
        var regexp2 = /^\w\w\w-\w\w\w\w-\w\w\w$/;
        // 待测试的字符串
        var str2 = 'abc-__ab-123';
        console.log(regexp2.test(str2));

        // 题目3:某产品批号形式为:123.45^67#89,请使用正则表达式检查某字符串是否符合此格式
        var regexp3 = /^\d\d\d\.\d\d\^\d\d\#\d\d$/;
        // 待测试的字符串
        var str3 = '666.66^66#66';
        console.log(regexp3.test(str3));

    </script>
</body>
</html>

四、方括号表示法


    <script>
        // 某学校的学号规定:第1位是一个字母,b表示本科生,y表示研究生,后面是7位数字,用正则表示为:
        // 学号字符串
        var str1 = 'm4444555';

        // 用正则表达式进行检查
        console.log(/^[by]\d{7}$/.test(str1));

        // *******************************************
        // 题目1:请验证某字符串是否是5位字母,大小写均可
        var str2 = 'abcde';
        var str3 = 'abcd5';
        console.log(/^[a-zA-Z]{5}$/.test(str2));
        console.log(/^[a-zA-Z]{5}$/.test(str3));

        // 题目2:请验证某字符串是否是5位,且仅由小写字母、点构成
        var str4 = 'mnp..';
        var str5 = 'mnp.#';
        console.log(/^[a-z\.]{5}$/.test(str4));
        console.log(/^[a-z\.]{5}$/.test(str5));

        // 题目3:请验证某字符串是否是4位小写字母,且最后一位不能是m字母
        var str6 = 'abcd';
        var str7 = 'abcm';
        var str8 = 'ab1c';
        console.log(/^[a-z]{3}[a-ln-z]$/.test(str6));
        console.log(/^[a-z]{3}[a-ln-z]$/.test(str7));
        console.log(/^[a-z]{3}[a-ln-z]$/.test(str8));
    </script>

五、量词

<script>
        // 题目1:请验证字符串是否符合手机号码的规则:11位数字,并且肯定以1开头
        var str1 = '13812345678';
        var str2 = '138123456789';
        var str3 = '38123456789';
        var regexp1 = /^1\d{10}$/;
        console.log(regexp1.test(str1));
        console.log(regexp1.test(str2));
        console.log(regexp1.test(str3));
        
        // 题目2:请验证某字符串是否是这样的:以字母开头,中间是任意位数字(最少1位)构成,并以字母结尾
        var str4 = 'a123123123b';
        var str5 = 'abcd';
        var str6 = 'a1b';
        var regexp2 = /^[a-zA-Z]\d+[a-zA-Z]$/;
        console.log(regexp2.test(str4));
        console.log(regexp2.test(str5));
        console.log(regexp2.test(str6));
        
        // 题目3:请验证某字符串是否符合网址规则:以www.开头,中间是任意位的字符(字母数字下划线,最少一位),最后以.com结尾,也可以以.com.cn结尾
        var str7 = 'www.imooc.com';
        var str8 = 'www.sina.com.cn';
        var str9 = 'www.news.cn';
        var regexp3 = /^www\.\w+\.com(\.cn)?$/;
        console.log(regexp3.test(str7));
        console.log(regexp3.test(str8));
        console.log(regexp3.test(str9));
    </script>

六、修饰符

七、正则表达式的相关方法

    <script>
        var str = 'abc123def456ghi789';
        var regexp = /\d+/g;    // +表示贪婪的,尽可能多的匹配
        var result1 = regexp.exec(str);
        var result2 = regexp.exec(str);
        var result3 = regexp.exec(str);
        var result4 = regexp.exec(str);
        console.log(result1);
        console.log(result2);
        console.log(result3);
        console.log(result4);

        // 使用循环语句来循环执行exec,寻找所有的匹配结果
        var result;
        while (result = regexp.exec(str)) {
            console.log(result);
        }
    </script>

八、字符串的相关方法

    <script>
        var str = 'abc123def4567ghi89';
     
        // search()方法,很像indexOf(),返回查找到的第一个下标,如果找不到就是-1
        var result1 = str.search(/\d+/g);
        var result2 = str.search(/m/g); //寻找字母m
        console.log(result1);       // 3
        console.log(result2);       // -1

        // match()方法,返回查找到的数组,找不到就是null
        var result3 = str.match(/\d+/g);
        console.log(result3);       // ["123", "4567", "89"]

        // replace()方法,进行替换
        var result4 = str.replace(/[a-z]+/g, '*');      // 注意+表示贪婪的,尽可能多的连续匹配小写字母
        console.log(result4);       // *123*4567*89

        // split()方法,进行字符串拆为数组
        var result5 = str.split(/\d+/g);
        console.log(result5);       // ["abc", "def", "ghi", ""]
    </script>

九、正则表达式进行表单验证

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .warning {
            color: red;
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <p>
            请输入中文姓名:
            <input type="text" id="nameField">
            <span class="warning" id="nameWarning">输入的姓名不合法</span>
        </p>
        <p>
            请输入手机号码:
            <input type="text" id="telField">
            <span class="warning" id="telWarning">输入的手机号码不合法</span>
        </p>
        <p>
            请输入Email:
            <input type="text" id="emailField">
            <span class="warning" id="emailWarning">输入的Email不合法</span>
        </p>
    </div>
    <script>
        var nameField = document.getElementById('nameField');
        var telField = document.getElementById('telField');
        var emailField = document.getElementById('emailField');
        var nameWarning = document.getElementById('nameWarning');
        var telWarning = document.getElementById('telWarning');
        var emailWarning = document.getElementById('emailWarning');

        // 当文本框失去焦点,就是光标不在文本框中了
        nameField.onblur = function () {
            // 得到姓名
            var name = nameField.value;
            if (/^[\u4E00-\u9FA5]{2,4}$/.test(name)) {
                // 如果通过校验
                nameWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                nameWarning.style.display = 'inline';
            }
        };

        telField.onblur = function () {
            // 得到电话
            var tel = telField.value;
            if (/^1\d{10}$/.test(tel)) {
                // 如果通过校验
                telWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                telWarning.style.display = 'inline';
            }
        };

        emailField.onblur = function () {
            // 得到email
            var email = emailField.value;
            // 合法的email都是[email protected]

            if (/^\w{2,}\@\w{2,}\.[a-z]{2,4}(\.[a-z]{2,4})?$/.test(email)) {
                // 如果通过校验
                emailWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                emailWarning.style.display = 'inline';
            }
        };
    </script>
</body>

</html>

标签:console,log,正则表达式,JS,test,str,var
From: https://blog.csdn.net/qq_56101688/article/details/143529298

相关文章

  • 【前端知识】JS模块规范
    JS模块规范概述CommonJS规范代码示例AMD规范代码示例ES6Module规范代码示例IIFE规范代码示例全局变量代码示例CommonJS模块和ES6模块有什么区别?1.语法和声明方式2.动态和静态导入3.循环依赖4.默认导出和命名导出5.文件扩展名6.环境和应用7.工具和构......
  • js实现漂亮的注册页面(js动态注册页面)
    代码:<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>注册</title>......
  • JS实现漂亮的登录页面(氛围感页面)
    代码:<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>登录</title>......
  • JS DOM获取
    一、DOM初相识DOM简介文档对象模型(DocumentObjectModel,简称DOM),它就是一些系列编程接口,有了这些接口,就可以改变页面内容,结构和样式DOM树:  文档:一个页面就是一个文档,DOM中使用document表示元素:页面中所有的标签都是元素,DOM中使用element表示节点:网页中所有内容都是节......
  • JS正则表达式
    一、概念正则表达式(规则表达式)用于定义一些字符串的规则,计算机可以根据正则表达式,来检查一个字符串是否符合规则,将字符串中符合规则的内容提取出来二、创建正则方式一:构造函数创建var变量=newRegExp("正则表达式","匹配模式");参数一:规则参数二:i忽略大小写g全局匹......
  • JS操作元素
    一、事件基础事件概述JS使我们有能力创建动态页面,而事件是可以被JS侦测的行为简单理解:触发----响应机制网页中每个元素都可以产生某些可以触发JS的事件,例如点击事件事件是由三部分组成事件源事件类型事件处理程序称为事件三要素事件源:事件被触发的对象谁被触发事......
  • Jmeter关联处理-正则表达式提取
    当请求之间有依赖关系,比如一个请求的入参是另一个请求返回的数据,就需要关联处理。正则表达式就是一个公式,或者说一套规则,这套规则可以从任意字符串中提取出想要的数据内容。作用:把上一个请求的响应结果和下一个请求的数据有关联。在需要提取参数的请求的“后置处理器”部分......
  • 关于JS中继承
    继承,我理解就是把所有实例可能用到的属性和方法抽出来,单独放在一个“超类”中,一方面避免重复写代码,另一方面也会节省内存。如果单独用原型继承,引用值的处理是个问题如果单独用call(或者apply)实现代码调用完成继承,方法没法处理,每个实例都会独立生成一份方法,造成重复。所以,一把把二......
  • Three.js中文文档
    Three.js中文文档今天闲着没事,准备翻译一下three.js官方文档的英文目录。threejs英文文档地址threejs中文文档地址动画对象Animation编辑、解析播放帧动画。动作AnimationAction剪辑AnimationClip混合器AnimationMixer动画对象组AnimationObjectGroup动画工具AnimationU......
  • 前端使用pako对json串进行压缩,转成base64并且解压缩的过程
    1exportfunctioncompressAndb64encode(originalData){2//将字符串转换为字节序列3constbinaryString=encodeURIComponent(originalData)4constcharList=binaryString.split('')5constbinaryArray=charList.map(char=>char.charCodeAt(......