JS正则表达式

最新推荐文章于 2022-03-21 16:31:05 发布

Welkin_qing

最新推荐文章于 2022-03-21 16:31:05 发布

阅读量185

点赞数

分类专栏： Javascript 文章标签：正则表达式 JavaScript

本文链接：https://blog.csdn.net/Welkin_qing/article/details/83794821

版权

Javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、正则表达式的基础

1. 复习字符串操作

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

例 1：search

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：

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

例 3：charAt：

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

例 4 ：split：

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：

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

利用正则：

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风格

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

例：perl风格

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

3. 字符串与正则配合

a. search

字符串搜索

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

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

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

var str='asdf 443 vczxv 55';
var re=/\d/;

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

还可以忽略大小写进行查找： i——ignore
判断浏览器类型（userAgent 浏览器版本）

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

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

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时：

var re=/\d\d/g;

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

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

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

替换所有匹配

返回替换后的字符串

var str='abacdAef';
alert(str.replace(/a/, 'T'));//TbacdAef
alert(str.replace(/a/g, 'T'));//TbTcdAef
alert(str.replace(/a/gi, 'T'));//TbTcdTef

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

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

4. 字符类

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

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标签

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----- 表示非空格[^ ]

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

var str='  fd rr  erre fff  ';

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

例：去掉首位空格

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次

例：校验邮箱

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

例：检测中文

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

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

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

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;
}