码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript中的RegExp

时间:2016-08-31 07:14:35      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:javascript



正则表达式是一组独立的规则,几乎每个编程语言都提供了实现这些规则的类

1、两种方式创建正则对象

第一种创建方式:

var reg = new RegExp(pattern,flags);

第二种创建方式(推荐使用):

var reg = /pattern/flags;//flags如果为g,表示全局匹配,如果为i,表示忽略大小写



2、两个常用方法

方法作用
test()

测试一段文本是否和此正则表达式匹配

检索字符串中的指定值。返回值是 true 或 false。

exec()

可获得一段文本中和正则匹配的部分(返回值是一个数组或者null)

返回值是被找到的值。如果没有发现匹配,则返回 null。

 

3、示例


(1)找出各个匹配的项

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>
    <script type="text/javascript">
        var str = "abceefabc";
        var reg = /bc/g;
        var arr;
        while(arr = reg.exec(str)){
            alert(arr.index + ":" + arr[0]);
        }
    </script>
</head>
<body>

</body>
</html>

效果图

技术分享


(2)查找出所有手机号码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>
    <script type="text/javascript">
        var msg = "中国移动:10086,中国联通:10010,中国电信:10000";
        var reg = /\d{5}/g;
        var result;
        while(result=reg.exec(msg))
        {
            alert(result);
        }
    </script>
</head>
<body>

</body>
</html>

效果图

技术分享


(3)进行全部替换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>
    <script type="text/javascript">
        var str = "abceefabc";
        var reg = /bc/g;
        var result = str.replace(reg,‘KK‘);
        alert(result);//aKKeefaKK
    </script>
</head>
<body>

</body>
</html>

效果图

技术分享


(4)验证邮箱格式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>
    <style type="text/css">
        .cls{
            color:gray;
        }
    </style>
    <script type="text/javascript">
        onload=function(){
            var txtObj = document.getElementById(‘txt‘);
            var defaultContent = "请输入邮箱进行验证";
            txtObj.onfocus=function(){
                if((this.value == defaultContent) && (this.className=="cls"))
                {
                    this.value = "";
                    this.className = "";
                }
            };
            txtObj.onblur=function(){
                var txtValue = this.value;
                if(txtValue.length>0)//如果文本框中有内容,就检查输入的字符串是否是正确的邮箱格式
                {
                    var reg = /^[0-9a-zA-Z_-]+@[a-zA-Z-0-9]+(\.[a-zA-Z]+){1,2}$/;
                    if(reg.test(txtValue)){
                        document.getElementById(‘msg‘).innerText = "邮箱格式正确";
                        document.getElementById(‘msg‘).style.color = "green";
                    }
                    else
                    {
                        document.getElementById(‘msg‘).innerText = "邮箱格式不正确";
                        document.getElementById(‘msg‘).style.color = "red";
                    }
                }
                else//如果文本框中没有内容,就提示用户输入邮箱:“请输入邮箱进行验证”
                {
                    this.value = "请输入邮箱进行验证";
                    this.className = "cls";
                    document.getElementById(‘msg‘).innerText = "";
                    document.getElementById(‘msg‘).style.color = "";
                }
            };
        };
    </script>
</head>
<body>
    <label for="txt">请输入邮箱:</label>
    <input class="cls" type="text" id="txt" value="请输入邮箱进行验证" style="width:300px;height:30px;font-size:20px;"/>
    <label id="msg"></label>
</body>
</html>

效果图

技术分享         



Javascript中的RegExp

标签:javascript

原文地址:http://lsieun.blog.51cto.com/9210464/1844552

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!