JavaScript正则表达式

本文深入探讨了正则表达式的应用技巧,包括匹配、搜索、替换与分割等操作,通过具体示例展示了如何在JavaScript中高效使用正则表达式进行字符串处理及表单验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

匹配与搜索

//正则的使用    
var str = "wert45678yuiytrew";    
//使用正则匹配子串str中的数字    
console.log(str.match(/[0-9]+/));
//使用RegExp创建一个正则对象    
var pat = new RegExp("[0-9]+");    
console.log(str.match(pat));    
console.log(pat.exec(str));    
//以上三个返回结果一致:["45678", index: 4, input: "wert45678yuiytrew", groups: undefined]
console.log("==============================");
//正则搜索    
console.log(str.search(/[0-9]+/)); //4 返回首次匹配位置 ,没有返回-1    
console.log(str.search(pat)); //4 返回首次匹配位置 ,没有返回-1    
console.log(pat.test(str)); //true 返回是否匹配
//匹配多个    console.log("==============================");    
var str = "wert45678yui456ytr678ew";
console.log(str.match(/[0-9]+/)); //默认只匹配一次    
console.log(str.match(/[0-9]+/g)); //(3) ["45678", "456", "678"] 使用g修饰符 匹配所有

语法

 var str = "wer245ty4d56fg78hj987k";    //模糊匹配:使用正则匹配子串str中的数字    
 //console.log(str.match(/[0-9]/g)); //匹配任意一位数字    
 //console.log(str.match(/[0-9][0-9]/g)); //匹配任意两位数字    
 //console.log(str.match(/[0-9]{2}/g)); //匹配任意两位数字    
 //console.log(str.match(/[0-9][0-9][0-9]/g)); //匹配任意三位数字    
 //console.log(str.match(/[0-9]{3}/g)); //匹配任意三位数字    
 //console.log(str.match(/[0-9]{2,3}/g)); //匹配任意两位或三位数字    
 //console.log(str.match(/\d{2,3}/g)); //匹配任意两位或三位数字        
 console.log(str.match(/\d+/g)); //匹配至少一位数字    
 console.log(str.match(/\d{1,}/g)); //匹配至少一位数字    
 console.log(str.match(/[0-9]{1,}/g)); //匹配至少一位数字
//\d{1,}  [0-9]{1,}  \d+  [0-9]+ 都表示至少一位的数字
//精确匹配    
var pat = new RegExp("[0-9]+");    
console.log(pat.test("er2567thj")); //true 匹配子串中是否含有数字
var pat = new RegExp("^[0-9]+");    
console.log(pat.test("er2567thj")); //false 匹配子串中是否是以数字开头    
console.log(pat.test("2567thj"));   //true 匹配子串中是否是以数字开头
var pat = new RegExp("[0-9]+$");    
console.log(pat.test("er2567thj")); //false 匹配子串中是否是以数字结尾    
console.log(pat.test("wer2567"));   //true 匹配子串中是否是以数字结尾
var pat = new RegExp("^[0-9]+$");    
console.log(pat.test("2567thj"));   //false 匹配子串中是否是纯数字    
console.log(pat.test("wer2567"));   //false 匹配子串中是否是纯数字    
console.log(pat.test("2567"));   //true 匹配子串中是否是纯数字
var pat2 = new RegExp("^[0-9]{6}$"); //精确匹配任意6位数字

替换与分割

    var str = "23:45:67:89:87:63";
    console.log(str.split(":")); //(6) ["23", "45", "67", "89", "87", "63"] 使用子串拆分

    str = "23:45;67:89!87#63";
    console.log(str.split(/[^0-9]/)); //(6) ["23", "45", "67", "89", "87", "63"] 使用正则拆分

    str = "23:45;67:89!87#63";
    //将上面子串中的分隔符统一替换成逗号,
    console.log(str.replace(/[^0-9]/g,",")); //23,45,67,89,87,63

    str = "<b>aaa</b><b>bb>b</b><b>ccc</b>";
    //将上面子串中的<b></b>标签替换成<i></i>   下面其中$1表示重复正则中第一个小括号中内容
    console.log(str.replace(/<b>(.*?)<\/b>/g,"<i>$1</i>")); //.*是贪婪匹配(最大) .*?是拒绝贪婪匹配(最小)

    console.log("=========================================");

    str = "04/28/2020"; //西方日期格式,请使用正则替换成中国的[年-月-日]格式
    console.log(str.replace(/(\d{2})\/(\d{2})\/(\d{4})/,"$3-$1-$2"));
    //其中$1,$2 $3表示重复正则中第一、第二、第三个小括号中内容

表单验证

<h1>JavaScript中的正则表达式在表单验证中的实例</h1>
    <form action="js03.html" name="myform" onsubmit="return doSubmit()" method="post">
        账号:<input type="text" name="uname" onblur="checkUname()" /><br/><br/>
        邮箱:<input type="text" name="email" onblur="checkEmail()"/><br/><br/>
        <input type="submit" value="提交"/>
    </form>
 //验证账号函数
    function checkUname(){
        //获取账号信息
        var uname = document.myform.uname.value;
        //执行验证
        //if(uname.match(/^[0-9A-Za-z_]{8,16}$/) == null){
        if(uname.match(/^\w{8,16}$/) == null){
            alert("请输入8~16位的账号信息!");
            return false;
        }
        return true;
    }

    //验证邮箱函数
    function checkEmail(){
        //获取账号信息
        var email = document.myform.email.value;
        //执行验证
        if(email.match(/^\w+@\w+(\.\w+){1,2}$/) == null){
            alert("请输入正确的Email信息!");
            return false;
        }
        return true;
    }

    //表单提交
    function doSubmit(){
        return checkUname() && checkEmail();
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值