undefined

js中的正则表达式

发表于 | 分类于 ， ，
字数统计: 2,974 | 阅读时长 ≈ 15

字符串

indexOf 查找
substring 获取子字符串
charAt 获取某个字符串
split 分割字符串，获得数组

字符串比较

字符串可以进行比较，所以可以用来判断字符串是不是数字类型

1
2
3
4
5
6
7
8
9
10
11
<script>
   //alert( 'a'<'b' );
		
   var str = '5';
		
   if (str <= '9' && str >= '0') {
       alert('是数字类型的字符串');
   } else {
       alert('不是数字类型的字符串');
   }
   </script>

找出字符串中所有的数字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
  var str = 'haj123sdk54hask33dkhalsd879';
		
		
  function findNum(str) {
		
      var arr = [];
		
      var tmp = '';
		
      for (var i = 0; i < str.length; i++) {
          if (str.charAt(i) <= '9' && str.charAt(i) >= '0') {
              tmp += str.charAt(i);
          } else {
              if (tmp) {
                  arr.push(tmp);
                  tmp = '';
              }
          }
      }
		
      if (tmp) {
          arr.push(tmp);
          tmp = '';
      }
		
		
      return arr;
		
  }
		
  alert(findNum(str)); 
  </script>

上述功能正则表达式的写法:

1
2
3
4
5
function findNum(str) {
        return str.match(/\d+/g);
    }

    alert(findNum(str));

什么是正则

正则，也叫规则，让计算机能够读懂人类的规则。

1
2
var re= //;        //大部分用这种 简写的      
var re= new RegExp();

正则中的test方法

test:正则去匹配字符串，如果匹配成功就返回真，如果匹配失败就返回假 。test的写法：正则.test(字符串)。

写法 含义
\s 空格
\S 非空格
\d 数字
\D 非数字
\w 字符
\W 非字符 
1
2
3
4
5
6
7
8
9
10
var str = '374829348791';

var re = /\D/;

if( re.test(str) ){
	alert('不全是数字');
}
else{
	alert('全是数字');
}

正则中的search方法

search : 正则去匹配字符串 , 如果匹配成功，就返回匹配成功的位置，如果匹配失败就返回 -1。 search的写法 : 字符串.search(正则)。正则中的默认 : 是区分大小写的

如果不区分大小写的话，在正则的最后加标识 i 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>

    var str = 'abcdef';

    var re = /B/i;                  //不区分大小写的简写写法

    //var re = new RegExp('B','i');   //全称的写法

    alert(str.search(re));
    </script>
</head>

<body>
</body>

</html>

正则中的match方法

match : 正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null。
match的写法 : 字符串.match(正则)。
正则默认：正则匹配成功就会结束，不会继续匹配;如果想全部查找，就要加标识 g(全局匹配)。
量词 : 匹配不确定的位置

+: 至少出现一次,可以看成大于等于1

1
2
3
4
5
var str = 'haj123sdk54hask33dkhalsd879';
		
  var re = /\d+/g;   //如果这里去掉g的话，那么显示结果就是123.第一次匹配成功就会结束
		
  alert(str.match(re));

正则中的replace

replace : 正则去匹配字符串，匹配成功的字符去替换成新的字符串。replace的写法 : 字符串.replace(正则,新的字符串)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    var str = 'aaa';
    var re = /a+/g;       //如果把这里改成/a/g  则替换后显示为bbb;  改成/a/，则替换后显示为baa

    str = str.replace(re, 'b');

    alert(str);   //显示一个b   
    </script>
</head>

<body>
</body>

</html>

replace的应用：敏感词过滤
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    //菲称仁爱礁附近17艘中国船均在菲军监视之下

    //| : 或的意思

    //replace : 第二个参数：可以是字符串，也可以是一个回调函数

    window.onload = function() {
        var aT = document.getElementsByTagName('textarea');
        var oInput = document.getElementById('input1');

        var re = /菲称|中国船|监视之下/g;

        oInput.onclick = function() {

            //aT[1].value = aT[0].value.replace(re,'*');

            aT[1].value = aT[0].value.replace(re, function(str) {
                //函数的第一个参数：就是匹配成功的字符	 

                //alert( str );

                var result = '';

                for (var i = 0; i < str.length; i++) {
                    result += '*';
                }


                return result;

            });

        };

    };
    </script>
</head>

<body>
    替换前
    <br />
    <textarea>
    </textarea>
    <br /> 替换后
    <br />
    <textarea>
    </textarea>
    <br />
    <input type="button" value="确定" id="input1" />
</body>

</html>

匹配子项（用小括号）

匹配子项 : 小括号 () (还有另外一个意思，分组操作)
把正则的整体叫做（母亲）, 然后把左边第一个小括号里面的正则，叫做这个第一个子项(母亲的第一个孩子), 第二个小括号就是第二个孩子 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>

    var str = '2015-6-7';

    var re = /(\d+)(-)/g;    

    str = str.replace(re, function($0, $1, $2) {
        //第一个参数：$0（母亲）,第二个参数 : $1(第一个孩子)
        //,第二个参数 : $1(第二个孩子)

        //alert( $2 );

        //return $1 + '.';

        return $0.substring(0, $0.length - 1) + '.';//$0表示正则的整体，这里是截取匹配到的正则的整体减去一个长度的字符，后面再加上.   相当于直接替换掉了-

    });

    alert(str); //2013.6.7
    </script>
</head>

<body>
</body>

</html>


也可以用match方法实现

1
2
3
4
5
6
7
<script>
   var str = 'abc';
		
   var re = /(a)(b)(c)/;
		
   alert(str.match(re)); //[abc,a,b,c](当match不加g的时候才可以获取到子项的集合)
   </script>

1
2
3
4
5
6
7
<script>
	    var str = 'abc';
	
	    var re = /(a)(b)(c)/g;
	
	    alert(str.match(re)); 
	    </script>

正则中的字符类

字符类 : 一组相似的元素 [] 中括号的整体代表一个字符，[ ]里面代表“或”的关系。 

1
2
3
   var str = 'abdc';
   var re = /a[bde]c/;
alert( re.test(str) );	//显示false,因为[]中的代表一个整体，第三个字符c与字符串中的d不匹配

字符类中的排除

排除：用符号^ 如果^写在[]里面的话，就代表排除的意思。 

1
2
3
var str = 'abc';
   var re = /a[^bde]c/;
alert( re.test(str) );	//显示false,因为[]中的代表一个整体，正则中第二个字符要排除掉bde,字符串中第二个字符是b，所以错了。如果把字符串中第二个字符b改成除了bde以外的字符，就返回true

字符类的范围

用-来表示范围 

1
2
3
var str = 'abc';
var re = /a[a-z0-9A-Z]c/;
alert(re.test(str));  //显示true，说明匹配上了

字符类应用：过滤标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload = function() {
        var aT = document.getElementsByTagName('textarea');
        var oInput = document.getElementById('input1');

        //var re = /<\w+>/g;

        var re = /<[^>]+>/g;

        oInput.onclick = function() {

            aT[1].value = aT[0].value.replace(re, '');

        };

    };
    </script>
</head>

<body>
    替换前
    <br />
    <textarea>
    </textarea>
    <br /> 替换后
    <br />
    <textarea>
    </textarea>
    <br />
    <input type="button" value="确定" id="input1" />
</body>

</html>

正则中的转义字符

符号 含义
. 任意字符
.前面加一个反斜杠 真正的点 
1
2
3
var str = 'a.c';
var re = /a.c/;
alert(re.test(str));   //显示true
符号 含义
\b 独立的部分
\B 非独立的部分 
1
2
3
var str = 'onetwo';
var re = /one\b/;
alert(re.test(str)); //显示false

获取class的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//alert('\'');

window.onload = function() {
    var aLi = getByClass(document, 'box1');

    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.background = 'red';
    }

    /*function getByClass(oParent,sClass){
    	var arr = [];
    	var aEle = oParent.getElementsByTagName('*');
    	
    	for(var i=0;i<aEle.length;i++){
    		if( aEle[i].className == sClass ){
    			arr.push( aEle[i] );
    		}
    	}
    	
    	return arr;
    	
    }*/

    function getByClass(oParent, sClass) {
        var arr = [];
        var aEle = oParent.getElementsByTagName('*');

        //var re = /sClass/;  //当正则需要传参的时候，一定要用全称的写法
        var re = new RegExp('\\b' + sClass + '\\b');

        for (var i = 0; i < aEle.length; i++) {
            if (re.test(aEle[i].className)) {
                arr.push(aEle[i]);
            }
        }

        return arr;

    }

};
</script>
</head>

<body>
<ul>
    <li class="box1">111</li>
    <li>111</li>
    <li class="box1box2">111</li>
    <li>111</li>
    <li class="box1 box2">111</li>
</ul>
</body>

</html>

正则中的重复的子项

字符 含义\1
\1 重复的第一个子项
\2 重复的第二个子项 
1
2
3
4
5
var str = 'abca';

var re = /(a)(b)(c)\2/;

alert( re.test(str) );  //显示false
1
2
var re=/\w\w/;   //这两个字符虽然长的一样，但是不一定是同一个字符，匹配ab或者cd也是成功的
var re=/(\w)\1/; //这种情况，匹配的两个字符必须一样才可以,因为\1要跟第一个子项完全一样
应用：找重复项最多的字符和个数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    var str = 'assssjdssskssalsssdkjsssdss';

    var arr = str.split(''); //分割成数组

    str = arr.sort().join(''); //排序，然后再转成字符串

    //alert(str);

    var value = '';
    var index = 0;

    var re = /(\w)\1+/g;

    str.replace(re, function($0, $1) {

        //alert($0);

        if (index < $0.length) {
            index = $0.length;
            value = $1;
        }

    });

    alert('最多的字符:' + value + ',重复的次数:' + index);
    </script>
</head>

<body>
</body>

</html>

正则中的量词和首尾匹配

表示 含义
{4，7} 最少出现4次，最多出现7次
{4，} 最少出现4次
{4} 正好出现4次
表示 含义
+ {1，} 至少出现1次
？ {0，1} 出现0次或者1次
* {0，} 至少出现0次 
1
2
3
4
var str = 'ac';
var re = /ab*/;

alert(re.test(str));   //显示true

例子1：用正则判断是不是QQ号

表示 含义
^ 正则的最开始位置，就代表起始的意思
$ 正则的最后位置 , 就代表结束的意思 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

window.onload = function(){
	var aInput = document.getElementsByTagName('input');
	
	var re = /^[1-9]\d{4,11}$/;   //起始的位置必须为1-9的一个数字，后面为4到11位的数字，最后要加结束符$
	
	aInput[1].onclick = function(){
		
		if( re.test(aInput[0].value) ){
			alert('是QQ号');
		}
		else{
			alert('不是QQ号');
		}
		
	};
	
};

</script>
</head>

<body>
<input type="text" /><input type="button" value="确定" />
</body>
</html>

例子2：去掉前后空格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

var str = ' hello ';

alert( '('+trim(str)+')' );

function trim(str){
	
	var re = /^\s+|\s+$/g;
	
	return str.replace(re,'');
	
}

//now777@qq.com
//^\w+@[a-z0-9]+(\.[a-z]+){1,3}$

/*var re = {
	qq : /[1-9][0-9]{4,9}/,
	email : /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/,
	number : /\d+/
};

re.email*/

</script>
</head>

<body>
</body>
</html>
觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多