1.精通前端系列技术之js正则表达式

时间：2015-09-21 23:55:26 阅读：269 评论：0 收藏：0 [点我收藏+]

标签：

在不会正则的时候，我们寻找字符串某些规律或者截取部分特殊字符的时候，我们需要写很多行代码来获取我们想要的字符串，在使用正则之后，代码量会大量简洁很多

技术分享

1.字符串的比较，判断是否数字类型的字符串，我们用字符编码范围来判断

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

//alert( ‘a‘<‘b‘ );

var str = ‘5‘;

if( str <= ‘9‘ && str >= ‘0‘ ){
    alert(‘是数字类型的字符串‘);
}
else{
    alert(‘不是数字类型的字符串‘);
}

</script>
</head>

<body>
</body>
</html>

2.找出字符串中的所有数字，在未使用正则的时候，我们只能通过循环字符串的每个字符，然后找出所有的数字

<!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 = ‘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) );   //[123,54,33,879]

</script>
</head>

<body>
</body>
</html>

3.通过正则找出字符串中的所有数字,

/\d+/g  :\d+是至少有1个数字的字符串，g是global缩写，代表找出所有的符合\d+的字符串

<!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 = ‘haj123sdk54hask33dkhalsd879‘;



function findNum(str){
    return str.match(/\d+/g);
}

alert( findNum(str) );   //[123,54,33,879]

</script>
</head>

<body>
</body>
</html>

4.了解正则的含义：

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

正则都是操作字符串的

5.正则的基本写法

// 或者 new RegExp

<!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 arr = [];
var arr = new Array();


var obj = {};
var obj = new Object();

//正则:

var re = /a/;
var re = new RegExp(‘a‘);

</script>
</head>

<body>
</body>
</html>

6.正则的方式之test（test的写法 : 正则.test(字符串)）

<!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>

//test : 正则去匹配字符串，如果匹配成功就返回真，如果匹配失败就返回假

//test的写法 : 正则.test(字符串)

/*var str = ‘abcdef‘;

var re = /b/;

alert( re.test(str) );*/


//转义字符:

//alert(‘a\nb‘);

/*n \n
r \r
t \t*/

/*\s : 空格
\S : 非空格
\d : 数字
\D : 非数字
\w : 字符   ( 字母 ，数字，下划线_ )
\W : 非字符*/


var str = ‘374829348791‘;

var re = /\D/;

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

</script>
</head>

<body>
</body>
</html>

7.正则的方法search(字符串.search(正则))

<!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>

//search : 正则去匹配字符串 , 如果匹配成功，就返回匹配成功的位置，如果匹配失败就返回 -1

//search的写法 : 字符串.search(正则)

//正则中的默认 : 是区分大小写的 

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

var str = ‘abcdef‘;

var re = /B/i;

//var re = new RegExp(‘B‘,‘i‘);

alert( str.search(re) );

</script>
</head>

<body>
</body>
</html>

8.正则的方法match(字符串.match(正则))

<!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>

//match : 正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null

//match的写法 : 字符串.match(正则)

//正则默认：正则匹配成功就会结束，不会继续匹配 
//如果想全部查找，就要加标识 g(全局匹配)

//量词 : 匹配不确定的位置
//+ : 至少出现一次

var str = ‘haj123sdk54hask33dkhalsd879‘;

var re = /\d+/g;

alert( str.match(re) );   //[1]

</script>

</head>

<body>
</body>
</html>

9.正则的方法replace(字符串.replace(正则,新的字符串))

<!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>

//replace : 正则去匹配字符串，匹配成功的字符去替换成新的字符串

//replace的写法 : 字符串.replace(正则,新的字符串)

var str = ‘aaa‘;
var re = /a+/g;

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

alert(str);


</script>
</head>

<body>
</body>
</html>

10.敏感词过滤

<!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>

11.匹配子项

<!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>

//匹配子项 : 小括号 ()  (还有另外一个意思，分组操作)

//1+1*2
//(1+1)*2

//把正则的整体叫做（母亲）
//然后把左边第一个小括号里面的正则，叫做这个第一个子项(母亲的第一个孩子)
//第二个小括号就是第二个孩子

var str = ‘2013-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) + ‘.‘;
    
});

alert( str );   //2013.6.7

</script>
</head>

<body>
</body>
</html>

12.匹配子项

<!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 = ‘abc‘;

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

alert( str.match(re) );  //[abc,a,b,c](当match不加g的时候才可以获取到子项的集合)

</script>
</head>

<body>
</body>
</html>

13.字符类

任意字符
[abc]
例子：o[usb]t——obt、ost、out
范围
[a-z]、[0-9]
例子：id[0-9]——id0、id5
排除
[^a]
例子：o[^0-9]t——oat、o?t、o t

组合
[a-z0-9A-Z]
实例：偷小说
过滤HTML标签
自定义innerText方法

<!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 = ‘abdc‘;

var re = /a[bde]c/;

alert( re.test(str) );*/


//排除 : ^ 如果^写在[]里面的话，就代表排除的意思

/*var str = ‘abc‘;

var re = /a[^bde]c/;

alert( re.test(str) );*/

var str = ‘abc‘;

var re = /a[a-z0-9A-Z]c/;

alert( re.test(str) );

</script>
</head>

<body>
</body>
</html>

14.过滤标签

<!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>

15.转义字符

转义字符
.（点）——任意字符
\d、\w、\s 、\b
\D、\W、\S 、\B
\1    重复子项
例子
获取class元素
找重复项最多的字符和个数

<!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 = ‘a.c‘;

var re = /a\.c/;

alert(re.test(str));*/

//\b : 独立的部分   （ 起始，结束，空格 ）
//\B : 非独立的部分

var str = ‘onetwo‘;

var re = /one\b/;

alert( re.test(str) );

</script>
</head>

<body>
</body>
</html>

16.获取class的方法

<!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>

17.转义字符

转义字符
.（点）——任意字符
\d、\w、\s 、\b
\D、\W、\S 、\B
\1    重复子项
例子
获取class元素
找重复项最多的字符和个数

<!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>

//\1 : 重复的第一个子项
//\2 : 重复的第二个子项

/*var str = ‘abca‘;

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

alert( re.test(str) );*/

/*var re = /\w\w/;  c9
var re = /(\w)\1/; cc  99

<p></p>
<div></div>
*/
</script>
</head>

<body>
</body>
</html>

18.找重复项最多的字符和个数

<!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>

19.量词

什么是量词
出现的次数
{n,m}，至少出现n次，最多m次
例子：查找QQ号
常用量词
{n,}    至少n次
*        任意次    {0,}
？    零次或一次    {0,1}
+    一次或任意次{1,}
{n}    正好n次

<!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>

//量词 : {}

/*{4,7}  : 最少出现4次，最多出现7次
{4,} : 最少出现4次
{4} : 正好出现4次

+ : {1,}  //\d{1,}
? : {0,1}  : 出现0次或者1次
* : {0,}  : 至少出现0次*/

var str = ‘ac‘;
var re = /ab*/;

alert(re.test(str));

</script>
</head>

<body>
</body>
</html>

20.判断是不是QQ号

<!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}$/;
	
	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>

21.去掉前后空格

<!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>

22.高级表单验证

高级表单校验
匹配中文：[\u4e00-\u9fa5]
行首行尾空格：^\s*|\s*$
Email：^\w+@[a-z0-9]+(\.[a-z]+){1,3}$
网址：[a-zA-z]+://[^\s]*
QQ号：[1-9][0-9]{4,9}
邮政编码：[1-9]\d{5}
身份证：[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x

23.知识要点

字符串操作包括哪些？举例说明
什么是正则表达式？如何创建正则对象？
正则有几种选项？分别是什么意思？
Test,search、match、replace是做什么的？怎么用？
字符类（[]）包括几种情况？
正则有哪些转义字符？分别是什么意思？
什么是量词？各个量词分别有什么作用？
举几个正则表达式的例子，比如：邮件、中文等
什么叫“命名空间”，有什么作用？

基础
检测字符串中是否有字母a
检测字符串中是否有数字
找出字符串中所有的数字
必做
将字符串中所有数字都替换成***
删除文本中所有的html标签
将以前所写的所有公共方法放入命名空间

选做
完整的用户表单校验，检查用户的各种输入是否合法
用户名只能是字母、数字和下划线
密码只能是字母，并且两次要相同
邮箱
QQ号只能是数字
年龄只能是数字，并且大于12岁，小于100岁
电话：区号-数字

1.精通前端系列技术之js正则表达式

标签：

原文地址：http://www.cnblogs.com/kingCpp/p/4827557.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行