码迷，mamicode.com
首页 > 其他好文 > 详细

正则笔记

时间：2015-03-01 22:20:06      阅读：227      评论：0      收藏：0      [点我收藏+]

标签：

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

正则的写法：

//数组
var arr = [];
var arr = new Array();

//对象
var obj = {};
var obj = new Object();

//正则:
var re = /a/;
var re = new RegExp(‘a‘);

转义字符

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

正则的方法

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

var str = ‘abcdef‘;

var re = /b/;

alert( re.test(str) );  //true
var str = ‘374829348791‘;

var re = /\D/;

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

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

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

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

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

var str = ‘abcdef‘;

var re = /B/i;

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

alert( str.search(re) );

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

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

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

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

var str = ‘haj123sdk54hask33dkhalsd879‘;

var re = /\d+/g;

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

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

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

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

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

alert(str);

| : 或的意思

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>

//菲称仁爱礁附近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>

匹配子项

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

字符类

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

过滤标签

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

转义字符

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

获取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>

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

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

量词

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

判断是否是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>

去掉前后的空格

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

 找出字符串中的多有的数字

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

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

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

</script>
</head>

<body>
</body>
</html>

 

正则笔记

标签：

原文地址：http://www.cnblogs.com/liujin0505/p/4307627.html
踩
(0)
赞
(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)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！