Java复习打卡day41

最新推荐文章于 2025-08-04 16:54:55 发布

weixin_51630304

最新推荐文章于 2025-08-04 16:54:55 发布

阅读量327

点赞数

CC 4.0 BY-SA版权

文章标签：正则表达式

本文链接：https://blog.csdn.net/weixin_51630304/article/details/116493007

本文主要复习了Java中的正则表达式，包括匹配与搜索的技巧，详细介绍了正则表达式的语法，探讨了如何进行替换与分割操作，并讲解了在表单验证中的应用。此外，还简述了JQuery的基本使用方法。

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

正则表达式

匹配与搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>javascript 中的正则表达式</h1>
    <h1>正则表达式：实现了模糊、泛化搜寻匹配元素</h1>
</body>
<script>
    var str = 'absk2345dgask';
    console.log(str.match(/[[0-9]+/));//'+'匹配前面的表达式（[0-9]）一次或多次，相当于{1,}。

    //创建一个正则对象
    var pat = new RegExp(/[0-9]+/);
    console.log(str.match(pat));
    console.log(pat.exec(str));
    //上面的三个表达式的结果都是一样的

    //正则搜索
    console.log(str.search(/[0-9]+/));
    console.log(str.search(pat))
    //上面的两个表达式的结果都是4

    //正则匹配
    console.log('===================================');
    var str = 'as1kdj2hiue34hf545i23s4a645u23e232bd';

    console.log(str.match(/[0-9]+/));//默认匹配首个
    console.log(str.match(/[0-9]+/g));//匹配多个
    //上面的两个表达式的结果分别为：
    //["1"] (1)
    //["1", "2", "34", "545", "23", "4", "645", "23", "232"] (9)

</script>
</html>

语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>javascript 中的正则表达式</h1>
    <h2>search 和 match 的区别</h2>
    <ul>
        <li>search:在指定区域中搜查是否有满足的字段，并返回首个满足的下标</li>
        <li>match:在指定区域中搜查是否有满足的字段，并返回满足的字段内容</li>
    </ul>
</body>
<script>
    var str = 'q1w2y3u12r13e14y123i1234a1235h121313d24245gasfu';
    console.log(str.match(/[0-9]/g));//匹配任意一位的字段 结果：1
    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(/[0-9]+/g));//匹配任意位数的字段
    console.log(str.match(/[0-9]{1,}/g));//匹配任意位数的字段

    console.log(str.match(/\d+/g))//匹配任意位数的字段，这里的\d 就等价于[0-9]

    //注意：\d+ \d{1,}  [0-9]+  [0-9]{1,}都表示任意位数（至少一位的数字）

    //精确匹配
    var pat = new RegExp(/[0-9]+/);
    console.log(pat.test('era234shdh'));//true 测试子串中是否含有数字

    var pat = new RegExp(/^[0-9]+/);
    console.log(pat.test('era234shdh'));//false
    console.log(pat.test('234shdh'));//true测试字串是否以数字开头

    var pat = new RegExp(/[0-9]+$/);
    console.log(pat.test('era234shdh'));//false
    console.log(pat.test('era234'));//true测试字串是否是以数字结尾

    var pat = new RegExp(/^[0-9]+$/);
    console.log(pat.test('era234shdh'));//false
    console.log(pat.test('234'));//true测试字串是否是以数字开头并且是否是以数字结尾

    var pat = new RegExp(/^[0-9]{6}$/);//精确的获取六位数字
</script>
</html>

替换与分割

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript中的正则表达式</h1>
    <h2>JavaScript中的正则表达式分割和替换</h2>
</body>
<script>
    var str = '1:2:3:4:5:6';
    console.log(str.split(':'));//输出：["1", "2", "3", "4", "5", "6"] (6)

    var str = '1#2#3%4:5;6';//这种字符串如何实现分割？
    console.log(str.split(/[^0-9]/));//输出：["1", "2", "3", "4", "5", "6"] (6)

    //将字符串分割之后，指定符号实现隔离
    console.log(str.replace(/[^0-9]/g,','))//输出：1,2,3,4,5,6

    var str = '<br>aa</br><br>bb</br><br>cc</br>';
    //将字符串里的所有<br></br>都替换为<i></i>  下面的$1是指重复前面的小括号中的内容
    console.log(str.replace(/<br>(.*?)<\/br>/g,'<i>$1</i>'));//.*是贪婪匹配（最大），.*?是拒绝贪婪匹配（最小）

    console.log('=====================================');

    var str = '05/07/2021';//西方的日期格式，要求将此改为中国的年-月-日格式
    console.log(str.replace(/(\d{2})\/(\d{2})\/(\d{4})/,'$3-$1-$2'));//2021-05-07
    //其中$1,$2,$3分别是第一个小括号，第二个小括号，第三个小括号中包含的内容
</script>
</html>

表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript中的正则表达式在表单验证中的实例</h1>
    <form action="./a.html" method="POST" name="myform" onsubmit="return doSub()">
    账号：<input type="text" name="uname" onblur="checkUname()"/><br><br><br>
    邮箱：<input type="text"name="email" onblur="checkEmail()"/><br><br><br>
    <input type="submit" value="提交"/>
    </form>
</body>
<script>
    //验证账号的函数
    function checkUname(){
        //获取账号的信息
        var uname = document.myform.uname.value;
        //执行验证
        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 doSub(){
        return checkUname() && checkEmail();
    }
</script>
</html>

JQuery

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery-3.5.0.min.js"></script>
<!-- body体之前执行的script语言 -->
<script> 
    //简介入口
        $(function(){
        //获取h1标签并设置其css样式
        $('h1').css('color','green')
        //获取按钮标签并绑定点击事件
        $('#bid').click(function(){
            alert('ok');
        });
    })


    // //标准入口
    // $(document).ready(function(){
    //     //获取h1标签并设置其css样式
    //     $('h1').css('color','green')
    //     //获取按钮标签并绑定点击事件
    //     $('#bid').click(function(){
    //         alert('ok');
    //     });
    // });




    // //当前页面加载完成之后执行
    // window.onload = function(){
    //     //获取h1标签并设置其css样式
    //     $('h1').css('color','green')
    //     //获取按钮标签并绑定点击事件
    //     $('#bid').click(function(){
    //         alert('ok');
    //     });
    // }
</script>
<body>
    <h1>jQuery实例--基本使用</h1>
    <button id="bid">点击我</button>
</body>
<!-- 以下都是在body体之下执行的script语言 -->
<script>
    // //获取h1标签并设置其css样式
    // $('h1').css('color','green')
    // //获取按钮标签并绑定点击事件
    // $('#bid').click(function(){
    //     alert('ok');
    // });
</script>
</html>