首页 > 代码库 > Javascript中的RegExp

Javascript中的RegExp

2024-08-11 10:30:40   220人阅读



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

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="http://www.mamicode.com/请输入邮箱进行验证" style="width:300px;height:30px;font-size:20px;"/>
    <label id="msg"></label>
</body>
</html>

效果图

技术分享         



Javascript中的RegExp


联系
我们