正则表达式

最新推荐文章于 2023-05-30 15:00:37 发布

mr_zhangs

最新推荐文章于 2023-05-30 15:00:37 发布

阅读量530

点赞数

分类专栏： javaweb 前端文章标签：正则表达式

本文链接：https://blog.csdn.net/mr_zhangs/article/details/76223080

版权

javaweb 前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

笔记
一：正则表达式语法：
a:限定符：
[0-9]:表示0到9之间的数字
[a-z]:表示a到z之间的字母
[A-Z]:表示A到Z之间的字母
一些特殊的限定符
\w:表示的字母或者数字
\s:表示空格
.：表示任意字符
b:限定次数：
{m,n}:出现的次数在m到n之间（包含m,n）
{m}：出现m次
{m,}:表示出现的次数是m以上（包含m）
一些特定的表示次数的符号：
+：表示出现1到多次
?:表示出现0或者1次
*:表示出现任意次数（包括0次）
二：在js定义正则表达式
a:定义方式
var regl=/[a]{1,}/;
b:通过对象定义
var reg2=new RegExp(“[d]{3,}”);
js处理正则表达式的方法
1:exec()方法
提取目标数据中符合正则表达式的数据，如果没有，就返回null
2:test()方法
判断目标数据中是否符合正则表达式的要求，符合正则表达式的数据要求，符合返回true
三：补充正则表达式
1）对数据全部匹配/^ $/ 比如邮编：/^[0-9]{6}$ /
2)运算符
|：选择
^:放在限定符里表示的是非运算邮箱验证 var str=/^\w{1,}@\w{1}.(com|cn|com.cn)$/;
3)正则表达式的替换作用
四：处理空字符串
var str=/\s{1,}/;
while(str.test(getvalue)) {
getvalue = getvalue.replace(str, “”);
}
if(getvalue.length==0){
alert(“输入的数据为空”);
}
else{
alert(“数据不为空”)

五：级联下拉框

<title>级联下拉框</title>
    <script>
        var defaultoption="";//获取默认选项的值
        window.onload=function(){
            defaultoption=document.form1.select2.options[0].innerHTML;
        }

        function  changit(){
            //alert("test");
           //首先获取option选项的值
            //alert(document.form1.select1.value);
            var getvalue=document.form1.select1.value;
            //清空第二个下拉列表框的所有的内容
            document.form1.select2.options.length=0;

            switch(getvalue){
                case "0":
                        //首先创建一个option元素
                        var selectoption=document.createElement("option");
                        selectoption.innerHTML=defaultoption;
                        document.form1.select2.appendChild(selectoption);
                    break;
                case "1":
                        var citys=new Array("广陵区","邗江区","维扬区");
                        for(var i=0;i<citys.length;i++){
                            var soption=document.createElement("option");
                            soption.innerHTML=citys[i];
                            document.form1.select2.appendChild(soption);
                        }
                    break;
                case "2":
                    var citys2=new Array("鼓楼区","秦淮区","江宁区");
                    for(var i=0;i<citys2.length;i++) {
                        var soption2 = document.createElement("option");
                        soption2.innerHTML = citys2[i];
                        document.form1.select2.appendChild(soption2);
                    }
                    break;
                default:
                    break;
            }
        }
    </script>
</head>
<body>
    <form name="form1">
        你所在的省份：
        <select onchange="changit()" name="select1">
            <option value="0">--选择所在的省份--</option>
            <option value="1">扬州</option>
            <option value="2">南京</option>
        </select>
        <select name="select2">
            <option>--选择所在的区市--</option>
        </select>
    </form>
</body>

六：图片的放大缩小

<title>图片的操作</title>
    <script>
        function changeImg(){
            var imgdom=document.getElementById("myimg");
            imgdom.setAttribute("src","image/002.jpg")
        }

        //初始化高度宽度
        var width = 0;
        var height = 0;
        var mydom="";
        //页面加载完毕后才会执行onload
        window.onload=function() {
            mydom=document.getElementById("img1");
            width=mydom.clientWidth;
            height=mydom.clientHeight;
        }
        function changBig(){
            width=width+10;
            height=height+10;
            mydom.style.width=width+"px";
            mydom.style.height=height+"px";
        }
        function shangSmall(){
            width=width-20;
            height=height-20;
            mydom.style.width=width+"px";
            mydom.style.height=height+"px";
        }

    </script>
</head>
<body>
    <!--点击更换图片-->
   <!-- 图片：<img src="image/001.jpg" id="myimg" onclick="changeImg()" />-->
    <!--图片的放大缩小-->
    <input type="button" value="放大" onclick="changBig()">
    <input type="button" value="缩小" onclick="shangSmall()">

    <img id="img1" src="image/001.jpg"/>

</body>

七：验证输入不为空

<title>验证不能为空</title>
    <script>
        function subit(){
           // var inputname=document.form1.txtname.value;
            var inputname=document.getElementById("name");
            alert(inputname.value);
            if(inputname.value==""){
                document.getElementById("sp1").innerHTML="<font color='red'>*用户名不能为空</font>"
            }else{
                document.getElementById("sp1").innerHTML="";

            }
        }

    </script>
</head>
<body>
    <form name="form1">
        username:<input id="name" type="text" name="name" placeholder="name"/><span id="sp1"></span><br>
        password:<input type="password" name="password"><br>
        <input type="button" onclick="subit()" value="提交">
    </form>
</body>

八：判断邮编

    <title>邮编</title>
<script>
    var str="3456787";
    var p1=/^[0-9]{6}$/;
    if(p1.test(str)){
        alert("符合邮编");
    }
    else{
        alert("不符合");
    }

</script>

九：处理含有空格的字符串

<title>Title</title>
    <script>
        function checkit(){
            var getvalue=document.form1.textname.value;
            //通过正则表达式去替换匹配的数据
            var str=/\s{1,}/;
            while(str.test(getvalue)) {
                getvalue = getvalue.replace(str, "");
            }
            if(getvalue.length==0){
                alert("输入的数据为空");
            }
            else{
                alert("数据不为空")

            }
        }
    </script>
</head>
<body>
    <form name="form1">
    username:<input type="text" value="" name="textname">
        <input type="button" onclick="checkit()" value="login">
    </form>
</body>

十：验证数字或者下划线开头

 <title>数字或者下划线开头</title>
    <script>
        var str="_abc";

        //字母或者下划线出现一次，任意字符出现一次以上
        var p1=/^[a-zA-Z|_]{1}.{1,}$/;
        if(p1.test()){
            alert("符合要求");
        }
        else{
            alert("不符合");
        }

    </script>

mr_zhangs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则表达式

笔记一：正则表达式语法： a:限定符： [0-9]:表示0到9之间的数字 [a-z]:表示a到z之间的字母 [A-Z]:表示A到Z之间的字母一些特殊的限定符 \w:表示的字母或者数字 \s:表示空格 .：表示任意字符 b:限定次数： {m
复制链接

扫一扫