By welkin

Updated:

Contents
  1. 1. 一、正则表达式的基础
    1. 1.0.1. 1. 复习字符串操作
    2. 1.0.2. 2. 正则表达式的优势
  • 2. 二、正则表达式基本操作
    1. 2.0.1. 1. 什么是正则表达式？
    2. 2.0.2. 2. RegExp对象
    3. 2.0.3. 3. 字符串与正则配合
      1. 2.0.3.0.1. a. search
      2. 2.0.3.0.2. b. match
      3. 2.0.3.0.3. c. replace
  • 2.0.4. 4. 字符类
  • 2.1. \S—– 表示非空格[^ ]
    1. 2.1.1. 5. 量词

    • 一、正则表达式的基础

    1. 复习字符串操作

    • search: 返回要查找的字符串第一次出现的位置，没有返回-1
    • Substring：获取子字符串
    • charAt：获取某个字符
    • split：分割字符串，获得数组

    例 1：search

    1
    2
    3
    4
    5
    var str='abcdef';
    alert(str.search('b'));  //1
    alert(str.search('a'));  //0
    alert(str.search('de'));  //3
    alert(str.search('g')); //-1

    例 2： Substring：

    1
    2
    3
    var str='abcdef';
    alert(str.substring(1, 4));  //bcd
    alert(str.substring(1));  //bcdef

    例 3：charAt：

    1
    2
    var str='abcdef';
    alert(str.charAt(2));  //c

    例 4 ：split：

    1
    2
    3
    var str='abc-12-u-qw';
    var arr=str.split('-');  
    alert(arr[0]);  //abc

    2. 正则表达式的优势

    例如，我们需要将下面这个字符串中的数字找出来

    str=’12,87 76 -ddf e dd 89 ff76 9’;

    利用原生js：

    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
    var str='12,87 76 -ddf e dd 89 ff76 9';
    var arr=[];
    var tmp='';
    var i=0;

    for(i=0;i<str.length;i++)
    {
    	if(str.charAt(i)>='0' && str.charAt(i)<='9')
    	{
    		tmp+=str.charAt(i);
    	}
    	else
    	{
    		if(tmp)
    		{
    			arr.push(tmp);
    			tmp='';
    		}
    	}
    }

    if(tmp)
    {
    	arr.push(tmp);
    	tmp='';
    }

    alert(arr);//12,87,76,89,76,9

    利用正则：

    1
    2
    3
    var str='12,87 76 -ddf e dd 89 ff76 9';
    var re=/\d+/g;
    alert(str.match(re));//12,87,76,89,76,9

    可以看出大大缩短了代码量，而且方式也更加简便

    二、正则表达式基本操作

    1. 什么是正则表达式？

    • 用计算机语言来描述规则，是一种规则、模式
    • 强大的字符串匹配工具

      2. RegExp对象

    • js风格

      new RegExp(“a”, “i”);

    -perl 风格

    /a/i

    例：js风格

    1
    2
    3
    var str='abcdef';
    var re=new RegExp('a', 'i');
    alert(re.test(str));  //true

    例：perl风格

    1
    2
    3
    var str='abcdef';
    var re=/a/i;
    alert(re.test(str));//true

    3. 字符串与正则配合

    字符串搜索

    • 对于查找字符和上面提到search的操作一致

      1
      2
      var str='abcdef';
      alert(str.search(/b/));//1

    • 优势在于可以简便查找数字，有空格也没有关系

      1
      2
      3
      4
      var str='asdf 443 vczxv 55';
      var re=/\d/;

      alert(str.search(re));//5

    • 还可以忽略大小写进行查找： i——ignore

    • 判断浏览器类型（userAgent 浏览器版本）
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      if(window.navigator.userAgent.search(/firefox/i)!=-1)
      {
      	alert('ff');
      }
      else if(window.navigator.userAgent.search(/chrome/i)!=-1)
      {
      	alert('chrome');
      }
      else if(window.navigator.userAgent.search(/msie 9/i)!=-1)
      {
      	alert('IE9');
      }
    b. match

    获取匹配的项目
    例： 找出所有数字

    1
    2
    3
    4
    var str='sdf e443 fedef  55 66gg 333322312 dff 99';
    var re=/\d/g;

    alert(str.match(re));//4,4,3,5,5,6,6,3,3,3,3,2,2,3,1,2,9,9

    当为\d\d时：

    1
    2
    3
    var re=/\d\d/g;

    alert(str.match(re)); //44,55,66,33,33,22,31,99

    若想要按照本来间隔输出，可以使用\d+

    1
    2
    3
    4
    var str='sdf e443 fedef  55 66gg 333322312 dff 99';
    var re=/\d+/g;

    alert(str.match(re));//443,55,66,333322312,99

    c. replace

    替换所有匹配

    • 返回替换后的字符串
      1
      2
      3
      4
      var str='abacdAef';
      alert(str.replace(/a/, 'T'));//TbacdAef
      alert(str.replace(/a/g, 'T'));//TbTcdAef
      alert(str.replace(/a/gi, 'T'));//TbTcdTef

    下面是一个小例子，将敏感词替换，之前用原生js做过这个，花费了很大精力

    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
    <!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 oTxt1=document.getElementById('txt1');
    	var oTxt2=document.getElementById('txt2');
    	var oBtn=document.getElementById('btn1');
    	
    	oBtn.onclick=function ()
    	{
    		var re=/我们|你们|他们/g;
    		
    		oTxt2.value=oTxt1.value.replace(re, '***');
    	};
    };
    </script>
    </head>

    <body>
    转换前<textarea id="txt1" rows="10" cols="40"></textarea><br />
    <input id="btn1" type="button" value="过滤" /><br />
    转换后<textarea id="txt2" rows="10" cols="40"></textarea>
    </body>
    </html>

    welkin. 2018/11/7 21:11:02

    4. 字符类

    • 任意字符
      例子： 1[abc]2 —- 1a2|1b2|1c2

      1
      2
      3
      var str='1b2 abc 1c2 ee';
      var re=/1[abc]2/g;
      alert(str.match(re));  //1b2,1c2

    • 范围
      [a-z]、[0-9]

    • 排除 [^a] ：表示排除a
      [^0-9] ： 表示 出数字外的字符

    • 组合
      [a-z0-9A-Z] ：表示字符为数字的英文字符
      下面是一个扒网站小说的例子：用排除来过滤掉html标签

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      window.onload=function ()
      {
      	var oTxt1=document.getElementById('txt1');
      	var oTxt2=document.getElementById('txt2');
      	var oBtn=document.getElementById('btn1');
      	
      	oBtn.onclick=function ()
      	{
      		var re=/<[^<>]+>/g;
      		
      		oTxt2.value=oTxt1.value.replace(re, '');
      	};
      };

    • 转义字符
      . （点）—-任意字符
      \d —–digital 表示数字
      \w —– word 表示单词
      \s —–space 表示空格
      \D—– 表示非数字 ==[^0-9]
      \W—- ==[^a-z0-9_]

      \S—– 表示非空格[^ ]

      例：使用转义字符去掉所有空格

      1
      2
      3
      var str='  fd rr  erre fff  ';

      alert('('+str.replace(/\s+/g, '')+')');//(fdrrerrefff)

    例：去掉首位空格

    1
    2
    3
    4
    var str='  ffe ww ee fewf   ';
    var re=/^\s+|\s+$/g;

    alert('('+str.replace(re, '')+')');  //(ffe ww ee fewf)

    5. 量词

    • { n, } ——- 至少n次
    • （*） ——- （星号） 表示任意次，即{ 0, } 0到任意次，不建议使用
    • ？ ——- 零次或一次 {0,1}
    • {+} —— （加号）表示一次或者任意次{1，}，即最少出现一次
    • {n}——- 正好n次

    例：校验邮箱

    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
    <script>
    window.onload=function ()
    {
    	var oTxt=document.getElementById('txt1');
    	var oBtn=document.getElementById('btn1');
    	
    	oBtn.onclick=function ()
    	{
    		var re=/^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
    		
    		if(re.test(oTxt.value))
    		{
    			alert('对了');
    		}
    		else
    		{
    			alert('你写错了');
    		}
    	};
    };
    </script>
    </head>

    <body>
    <input id="txt1" type="text" />
    <input id="btn1" type="button" value="校验" />
    </body>

    例：检测中文

    1
    2
    3
    4
    var str='asdfb 34 +_=45 ';
    var re=/[\u4e00-\u9fa5]/;

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

    例：封装getByClass（利用单词边界转义字符\b）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function getByClass(oParent, sClass)
    {
    	var aEle=oParent.getElementsByTagName('*');
    	var aResult=[];
    	var re=new RegExp('\\b'+sClass+'\\b', 'i');
    	var i=0;
    	
    	for(i=0;i<aEle.length;i++)
    	{
    		if(re.test(aEle[i].className))
    		{
    			aResult.push(aEle[i]);
    		}
    	}
    	
    	return aResult;
    }

    Contents
    1. 1. 一、正则表达式的基础
      1. 1.0.1. 1. 复习字符串操作
      2. 1.0.2. 2. 正则表达式的优势
  • 2. 二、正则表达式基本操作
    1. 2.0.1. 1. 什么是正则表达式？
    2. 2.0.2. 2. RegExp对象
    3. 2.0.3. 3. 字符串与正则配合
      1. 2.0.3.0.1. a. search
      2. 2.0.3.0.2. b. match
      3. 2.0.3.0.3. c. replace
  • 2.0.4. 4. 字符类
  • 2.1. \S—– 表示非空格[^ ]
    1. 2.1.1. 5. 量词