05-正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式(pattern) 。

正则表达式具体规则请参看"05-正则表达式系统教程.CHM"。

常用正则表达式:

匹配身份证号码:/^\d{15}$|^\d{18}$/  或 /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
邮箱:/^\w+@\w+\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/
中国的邮政编码:/^\d{6}$/
匹配字符串中的中文字符:/[\u4e00-\u9fa5]/
验证5到12位的qq号:/^\d{5,12}$/
手机号码:/^(13|15|18)\d{9}$/
生日:/^((19\d{2})|(20\d{2}))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/

一、正则表达式test方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>正则表达式test方法</title>
</head>
<body style="text-align: center;">
    <textarea id="txt" style=" width: 80%; height: 100px;"></textarea>
    <br /><br />
    <input type="button" value="测  试" onclick="myTest();">
</body>
</html>
<script type="text/javascript">
    function myTest()
    {
        //定义正则表达式两种方式
        //var strExp = new RegExp("hello","i"); //i:忽略大小写,g:全局匹配 ,m:多行匹配
        //var strExp = /hello/i;   //i:忽略大小写,g:全局匹配 ,m:多行匹配

        
        //test方法:匹配成功返回true,匹配失败返回false

        //test方法判断一个敏感字符串(fuck)
        // var str = document.getElementById("txt").value;
        // var regExp = /fuck/i;
        // if(regExp.test(str))
        // {
        //  alert('不要说脏话!');
        //  return;
        // }
        // alert('提交成功!');

        //test方法判断多个敏感字符(fuck,垃圾)
        // var str = document.getElementById("txt").value;
        // var regExp = /fuck|垃圾/i;
        // if(regExp.test(str))
        // {
        //  alert('不要说脏话!');
        //  return;
        // }
        // alert('提交成功');

        //test方法判断内容只能是男或去
        // var str = document.getElementById("txt").value;
        // //var regExp = /男|女/; //此时输入"不男不女"也可以成功通过,需改良如下
        // var regExp = /^男$|^女$/;
        // if(!regExp.test(str))
        // {
        //  alert('性别必须是男或女!');
        //  return;
        // }
        // alert('提交成功');

        //test方法判断QQ号的合法性(QQ号码必须是5-12位的数字)
        // var str = document.getElementById("txt").value;
        // var regExp = /^\d{5,12}$/;
        // if(!regExp.test(str))
        // {
        //  alert('QQ号码格式错误!');
        //  return;
        // }
        // alert('提交成功');

        //多行匹配:当正则中含有^和$的时候,在文本框中任意一行符合格式要求,都可以通过
        //test方法判断QQ号的合法性(QQ号码必须是5-12位的数字)
        // var str = document.getElementById("txt").value;
        // var regExp = /^\d{5,12}$/m;
        // if(!regExp.test(str))
        // {
        //  alert('QQ号码格式错误!');
        //  return;
        // }
        // alert('提交成功');

        //备注:test方法使用过程中全局匹配g是没有意义的
    }
</script>

二、正则表达式exec方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>正则表达式exec方法</title>
</head>
<body style="text-align: center;">
    <textarea id="txt" style=" width: 80%; height: 100px;"></textarea>
    <br /><br />
    <input type="button" value="测  试" onclick="myTest();">
</body>
</html>
<script type="text/javascript">
    function myTest()
    {
        //exec方法:exec方法匹配之后返回值非常复杂,有兴趣可以查阅相关文档。
        //但是我们记住主要的:
        //(1)直接通过返回值可以得到匹配成功的字符串
        //(2)返回值index属性可以得到匹配成功的字符串位置
        //(3)如果匹配不成功则返回null

        //匹配暧昧字符串
        // var str = document.getElementById("txt").value;
        // var strExp = /love|kiss|miss/i;   //i:忽略大小写,g:全局匹配 ,m:多行匹配
        // var result = strExp.exec(str);
        // if(result != null)
        // {
        //  alert("恶心,在位置" + result.index + "处"+result+"词语恶心到我了!");
        //  return;
        // }
        // alert("提交成功!");

        //匹配暧昧字符串(全局匹配)
        //exec方法中使用全局匹配是指可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本
        var str = document.getElementById("txt").value;
        //var strExp = new RegExp("Fuck","g"); //i:忽略大小写,g:全局匹配 ,m:多行匹配
        var strExp = /love|kiss|miss/ig;   //i:忽略大小写,g:全局匹配 ,m:多行匹配
        var result;
        var count = 0;
        while((result = strExp.exec(str)) != null)
        {
            alert("不要挑逗我,在位置" + result.index + "处"+result+"词语恶心到我了!");
            count++;
        }
        if(count == 0)
            alert("提交成功!");
        else
            alert("你一共挑逗了我" + count + "次");

    }
</script>

三、String对象的match方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>String对象的match方法</title>
</head>
<body style="text-align: center;">
    <textarea id="txt" style=" width: 80%; height: 100px;"></textarea>
    <br /><br />
    <input type="button" value="测  试" onclick="myTest();">
</body>
</html>
<script type="text/javascript">
    function myTest()
    {
        //match方法:
        //(1)匹配成功返回匹配成功的字符串
        //(2)匹配不成功返回null
        //(3)全局模式下匹配成功直接返回匹配成功的字符串数组

        //匹配暧昧字符串
        var str = document.getElementById("txt").value;
        //var strExp = /love|kiss|miss/i; //match执行后返回第一处匹配成功的字符串或者null
        var strExp = /love|kiss|miss/ig; //match执行后返回所有匹配成功的字符串数组或者null
        var result = str.match(strExp);
        if(result == null)
            alert("提交成功!");
        else
            alert(result + " 你的这些话好恶心!")

    }
</script>

四、String对象Search方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>String对象Search方法</title>
</head>
<body style="text-align: center;">
    <textarea id="txt" style=" width: 80%; height: 100px;"></textarea>
    <br /><br />
    <input type="button" value="测  试" onclick="myTest();">
</body>
</html>
<script type="text/javascript">
    function myTest()
    {
        //search方法:匹配成功返回字符串出现的位置,匹配不成功返回-1
        //search方法不执行全局匹配,它将忽略标志 g

        //匹配暧昧字符串
        var str = document.getElementById("txt").value;
        var strExp = /love|kiss|miss/i;   //i:忽略大小写,g:全局匹配 ,m:多行匹配
        var result = str.search(strExp);
        if(result == -1)
            alert("提交成功!");
        else
            alert("在位置" + result + "处恶心到我了!");
        
    }
</script>

五、String对象replace方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>String对象replace方法</title>
</head>
<body style="text-align: center;">
    <textarea id="txt" style=" width: 80%; height: 100px;"></textarea>
    <br /><br />
    <input type="button" value="测  试" onclick="myTest();">
</body>
</html>
<script type="text/javascript">
    function myTest()
    {
        //replace方法:匹配成功对匹配到的字符串用指定字符串进行替换
        //默认第一处匹配成功的字符串,全局匹配的时候替换所有匹配成功的字符串

        //替换暧昧挑逗字符串
        // var str = document.getElementById("txt").value;
        // var strExp = /love|kiss|miss/ig;   //i:忽略大小写,g:全局匹配 ,m:多行匹配
        // var result = str.replace(strExp,"****");
        // document.getElementById("txt").value = result;

        //删除用户输入的空格和.
        var str = document.getElementById("txt").value;
        var strExp = /[\. ]/g;   //i:忽略大小写,g:全局匹配 ,m:多行匹配
        var result = str.replace(strExp,"");
        document.getElementById("txt").value = result;

    }
</script>

六、正则实现查找字符串高亮显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>查找字符串</title>
        <style type="text/css">
            #search{ height:30px; line-height:30px; text-align: center;}
            #content{ line-height: 30px;}
            .light{ background-color: yellow;}
        </style>
    </head>
    <body>
        <div id="search">
            <input type="text" id="txtSearch" />
            <input type="button" value="搜索" onclick="mySearch();" />
        </div>
        <div id="content">
Microsoft Office
    Microsoft Office是微软公司开发的一套基于 Windows 操作系统的办公软件套装。常用组件有 Word、Excel、Powerpoint等。最新版本为Office 365(Office 16)。
    2013年3月微软副总裁杰夫·特珀说微软将于今年上半年推出代号为“Oslo”的Office应用,该款应用将支持Windows8、以及搭载了苹果iOS和谷歌Android移动操作系统的智能手机和平板电脑。[1]  微软将于11月2日在纽约举办Office发布会。

信息概述
    Microsoft Office是一套由微软公司开发的办公软件,它为 Microsoft Windows 和 Mac OS X而开发。与办公室应用程序一样,它包括联合的服务器和基于互联网的服务。最近版本的 Office 被称为 “Office system” 而不叫 “Office suite”,反映出它们也包括服务器的事实。
    该软件最初出现于九十年代早期,最初是一个推广名称,指一些以前曾单独发售的软件的合集。当时主要的推广重点是购买合集比单独购买要省很多钱。最初的 Office 版本只有 Word、Excel 和 Powerpoint;另外一个专业版包含 Microsoft Access;随着时间的流逝,Office 应用程序逐渐整合,共享一些特性,例如拼写和语法检查、OLE 数据整合和微软 Microsoft VBA(Visual Basicfor Applications)脚本语言。
    该软件被认为是一个开发文档的事实标准,而且有一些特性在其他产品中并不存在;但是其他产品也有 Office 缺少的特性。2007 Microsoft Office System 有一个和以前版本差异很大的用户界面。
    Microsoft 使用早期的 Apple 雏形开发了Word 1.0,它于1984年发布在最初的 Mac 中。Multiplan 和 Chart 也在 512K Mac 下开发,最后它们于1985年合在一起作为Microsoft Excel 1.0 发布:第一个在 Mac 上使用的轰动一时的零售程序。
    因此,早期的 Microsoft Office 程序根源于Mac,当然,也反映在用户界面上。作为Mac的第一个和最大的软件提供者,在最初的 Macintosh 上做的一些 UI 决定受 Microsoft 开发团队的要求影响。当然,Office 图形化用户界面(特别是顶级菜单条)的最基本的轮廓有它在第一个 Macintosh 版本中的根源。
    微软产品经理派特·波贝特2012年10月17日证实,微软计划推出iOS和 Android 版 Office 应用。对此,微软公关部门已给予证实:“除了Windows,Office 也将面向其他操作系统发布,包括 Windows Phone、Windows、Mac、Android、iOS 和塞班。”这意味着,众多平板电脑的用户将可以更方便地使用 Office 来进行办公。
    据了解,Office 2013 将于 2012 年底面向企业用户发布,2013年2月底面向个人用户推出。此前曾有报道称,微软 2012年11月将推出 iPad 版Office。业内人士称,如今看来,微软希望在新版 Office 发布后,再推出 iOS 和 Android 版 Office。
    好消息是,Office 365 订阅用户不仅有权在五台 Windows/Mac 计算机上安装Office,还能够在 Windows Phone 或是 Surface 平板电脑上安装Office,而 iOS 和 Android 版 Office 不计算在内。也就是说,订阅一份Office 365,可以在10+台机器上安装。

常用组件
Microsoft office Word
    Microsoft Office Word 是文字处理软件。它被认为是 Office 的主要程序。它在文字处理软件市场上拥有统治份额。它私有的 DOC 格式被尊为一个行业的标准,虽然它的新版本 Word 2007 也支持一个基于XML的格式。Word 也适宜某些版本的 Microsoft Works。它适宜 Windows 和 Mac 平台。它的主要竞争者是 Writer、Star Office、Corel WordPerfect 和 Apple Pages。
Microsoft Office Excel
    Microsoft Office Excel 是电子数据表程序〔进行数字和预算运算的软件程序〕。是最早的office组件。Excel内置了多种函数,可以对大量数据进行分类、排序甚至绘制图表等。像 Microsoft office Word,它在市场拥有统治份额。它最初对占优势的 Lotus1-2-3 是个竞争者,但最后它卖得比它多、快,于是它成为了实际标准。它适宜 Windows 和 Mac 平台。它的主要竞争者是 Calc、Star Office 和 Corel Quattro Pro。
Microsoft Office PowerPoint
    Microsoft Office PowerPoint,是微软公司设计的演示文稿软件。用户不仅可以在投影仪或者计算机上进行演示,也可以将演示文稿打印出来,制作成胶片,以便应用到更广泛的领域中。利用 Powerpoint 不仅可以创建演示文稿,还可以在互联网上召开面对面会议、远程会议或在网上给观众展示演示文稿。 Powerpoint 做出来的东西叫演示文稿,它是一个文件,其格式后缀名为:. ppt,或者也可以保存为.pdf、图片格式等,2010和2013版本中可保存为视频格式。演示文稿中的每一页就叫幻灯片,每张幻灯片都是演示文稿中既相互独立又相互联系的内容。           
        </div>
    </body>
</html>
<script type="text/javascript">
    var strText = document.getElementById("content").innerHTML; //保存原始内容
    function mySearch(){
        document.getElementById("content").innerHTML = strText;  //还原网页内容
        var objKey = document.getElementById("txtSearch");
        var objContent = document.getElementById("content");        
        var strExp = new RegExp(objKey.value,"gi");
        objContent.innerHTML = objContent.innerHTML.replace(strExp,"<span class='light'>"+objKey.value+"</span>");
    }
</script>

七、正则表达式验证表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正则表达式验证表单</title>
        <style type="text/css">
            .errInfo{color: red; font-size: 12px;}
            .errInfo img{ vertical-align:middle;}
        </style>
        <script type="text/javascript">
            //检查用户名
            function CheckAccount()
            {
                var acc = document.getElementById("txtAccount").value;
                var objSpan = document.getElementById("spanAccount");
                var exp = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
                if(exp.test(acc))
                {
                    objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                    return true;
                }
                else
                {
                    objSpan.innerHTML = "<img src='img/li_err.gif'> 由英文字母和数字组成的4-16位字符,以字母开头!";
                    return false;                   
                }
            }
            //检查昵称
            function CheckNickName()
            {
                var nickName = document.getElementById("txtNickName").value;
                var objSpan = document.getElementById("spanNickName");
                var exp = /^[\u4e00-\u9fa5]{2,6}$/;
                if(exp.test(nickName))
                {
                    objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                    return true;
                }
                else
                {
                    objSpan.innerHTML = "<img src='img/li_err.gif'> 由2-8个汉字组成!";
                    return false;                   
                }
            }
            //检查身份证
            function CheckIDCard()
            {
                var idCard = document.getElementById("txtIDCard").value;
                var objSpan = document.getElementById("spanIDCard");
                var exp = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if(exp.test(idCard))
                {
                    objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                    return true;
                }
                else
                {
                    objSpan.innerHTML = "<img src='img/li_err.gif'> 由15位或18位数字组成,最后一位可以是X!";
                    return false;                   
                }
            }           
            
            //检查邮箱
            function CheckMail()
            {
                var mail = document.getElementById("txtMail").value;
                var objSpan = document.getElementById("spanMail");
                var exp = /^\w+@\w+\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/;
                if(exp.test(mail))
                {
                    objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                    return true;
                }
                else
                {
                    objSpan.innerHTML = "<img src='img/li_err.gif'> 邮箱账号@域名 如:good@qq.com!";
                    return false;                   
                }
            }
            
            //检查密码
            function CheckPwd()
            {
                //密码验证 
                var pwd = document.getElementById("txtPwd").value;
                var objSpan = document.getElementById("spanPwd");
                var exp = /^[a-zA-Z0-9]{4,10}$/;
                if(exp.test(pwd))
                {
                    objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                    return true;
                }
                else
                {
                    objSpan.innerHTML = "<img src='img/li_err.gif'> 由英文字母和数字组成4-10位字符!";
                    return false;                   
                }
            }
            
            //检查密码确认
            function CheckPwdOk()
            {
                var pwd = document.getElementById("txtPwd").value;
                var pwdOk = document.getElementById("txtPwdOk").value;
                var objSpan = document.getElementById("spanPwdOk");
                if(pwdOk.length == 0)
                {
                    objSpan.innerHTML = "<img src='img/li_err.gif'> 密码确认不能为空!";
                    return false;                   
                }
                else if(pwd != pwdOk)
                {
                    objSpan.innerHTML = "<img src='img/li_err.gif'> 两次输入密码不一致!";
                    return false;
                }
                else
                {
                    objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                    return true;
                }
            }

            //检查手机号码
            function CheckPhone()
            {
                var phone = document.getElementById("txtPhone").value;
                var objSpan = document.getElementById("spanPhone");
                var exp = /^(13|15|18)\d{9}$/;
                if(exp.test(phone))
                {
                    objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                    return true;
                }
                else
                {
                    objSpan.innerHTML = "<img src='img/li_err.gif'> 由11位数字组成,以13,15,18开头!";
                    return false;                   
                }
            }           

            //检查生日
            function CheckBirth()
            {
                var birth = document.getElementById("txtBirth").value;
                var objSpan = document.getElementById("spanBirth");
                var exp = /^(19\d{2})|(200\d{1})-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
                if(exp.test(birth))
                {
                    objSpan.innerHTML = "<img src='img/li_ok.gif'>";
                    return true;
                }
                else
                {
                    objSpan.innerHTML = "<img src='img/li_err.gif'> 日期在1900-2009之间,如:1985-8-9!";
                    return false;                   
                }
            }
            
            //注册表单提交
            function reg()
            {
                if(CheckAccount() & CheckNickName() & CheckIDCard() & CheckMail() 
                & CheckPwd() & CheckPwdOk() & CheckPhone() & CheckBirth())
                    return true;
                else
                    return false;
            }
            
            
        </script>
    </head>
    <body>
        <form action="Demo07_01.html" onsubmit="return reg();">
        <table width="1000" align="center">
            <caption>用户注册</caption>
            <tr>
                <td width="300" align="right" height="30">用户名:</td>
                <td width="700"><input type="text" id="txtAccount" onblur="CheckAccount();">
                    <span id="spanAccount" class="errInfo">由英文字母和数字组成的4-16位字符,以字母开头</span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">昵称:</td>
                <td width="700"><input type="text" id="txtNickName" onblur="CheckNickName();">
                    <span id="spanNickName" class="errInfo">由2-8个汉字组成</span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">身份证号:</td>
                <td width="700"><input type="text" id="txtIDCard" onblur="CheckIDCard();">
                    <span id="spanIDCard" class="errInfo">由15位或18位数字组成,最后一位可以是X</span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">邮箱:</td>
                <td width="700"><input type="text" id="txtMail" onblur="CheckMail();">
                    <span id="spanMail" class="errInfo">邮箱账号@域名 如:good@qq.com</span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">密码:</td>
                <td width="700"><input type="password" id="txtPwd" onblur="CheckPwd();">
                    <span id="spanPwd" class="errInfo">由英文字母和数字组成4-10位字符</span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">密码确认:</td>
                <td width="700"><input type="password" id="txtPwdOk" onblur="CheckPwdOk();">
                    <span id="spanPwdOk" class="errInfo"></span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">手机号码:</td>
                <td width="700"><input type="text" id="txtPhone" onblur="CheckPhone();">
                    <span id="spanPhone" class="errInfo">由11位数字组成,以13,15,18开头</span>
                </td>
            </tr>           
            <tr>
                <td width="300" align="right" height="30">出生日期:</td>
                <td width="700"><input type="text" id="txtBirth" onblur="CheckBirth();">
                    <span id="spanBirth" class="errInfo">日期在1900-2009之间,如:1985-8-9</span>
                </td>
            </tr>
            <tr>
                <td width="300" align="right" height="30">&nbsp;</td>
                <td width="700">
                    <input type="submit" value="注册" />
                    <input type="reset" value="取消" />
                </td>
            </tr>
        </table>
        
        </form>     
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容