前端攻城狮---正则表达式

最新推荐文章于 2023-04-05 14:24:44 发布

csdn_gyh

最新推荐文章于 2023-04-05 14:24:44 发布

阅读量408

点赞数

分类专栏：前端攻城狮文章标签： html 前端正则 js

本文链接：https://blog.csdn.net/gaoyouhuang/article/details/81215270

版权

前端攻城狮专栏收录该内容

44 篇文章 0 订阅

订阅专栏

正则表达式

首先我们要知道正则表达式是什么？

-----正式表达式又称规则表达式，通常用来检索或替换那些符合某些模式(规则)的文本。

正则主要用来搭配字符数的一下方法

search 查找

substring 获取子字符串

charAt 获取某个字符

split 分割字符串，获得到数组

replace 替换

match 获取匹配的项目

先来看看一个demo，来体会一下为什么要用正则表达式。

这里有一个需求就是过滤出所有的数字

		var str = " 12 as,12das asdf 12 asdf";
		var list = [];
		var data = "";
        //常规方法
		for(var i = 0;i<str.length;i++){
			if(str.charAt(i)>="0"&&str.charAt(i)<="9"){
				data +=str.charAt(i);
			}else{
				if(data.length>0){
					list.push(data);
					data = "";
				}
			}
		}
		console.log(list);
        //正则过滤
		var list1 = [];
		var reg = /\d+/g
		console.log(str.match(reg));

其实所有的字符串操作都可以自己写，不用正则慢慢写总能写出来的，但是通过正则可以大大的简化流程更加方便。接下里我们来学习学习正则表达式。

RegExp对象

其实RegExp对象就是一个正则表达式的对象，表示匹配某一规则。共有两种写法js风格和perl风格。

js风格 new RegExp("a","i");

perl风格 /a/i

demo.1 正则基本使用

我们来看看这两组输出

       var reg = new RegExp("a","");//第1个参数表示限制内容，第二个参数表示修饰符
       console.log("123Asdasd 1 2 asd".search(reg)); //6
       console.log("123asdasd 1 2 asd".search(/a/)); //3

用js风格去写正则表达式的话，逻辑都放在了第一个参数里。

用perl风格去写正则表达式的话，逻辑都用//来包裹这。

a 就是需要匹配的规则，search到a这个字符串第一次出现的位置对应的下标。

需要注意的是正则表达式是区分大小写的。两个内容是不一样的，A和a的原因所以最后的值是不一样的。

demo.2 search结合正则小案例（i的修饰符）
       if (window.navigator.userAgent.search(/firefox/i)!=-1) {
           console.log("火狐");
       }else if(window.navigator.userAgent.search(/chrome/i)!=-1){
           console.log("chrome");
       }

通过userAgent 来获取当前浏览器的相关信息，我们可以通过正则去判断浏览器的信息里是否含有相关字符串，来判断当前浏览器的信息。

后面的 i 表示修饰符，表示忽略大小写。

字符类

转义字符

.（点）---表示任意字符

\d 表示数字 \D 表示除了数字以外

\w 表示字母和数字 \W 表示除了字母和数字

\s 表示空格 \S表示除了空格

组合

[ ] 如[a-z0-9A-Z]表示a到z或者0到9或者A到Z的一个范围

量词

{n,m}最少出线n次最多出线m次

* 表示任意次={0,}

?表示零次或一次 {0,1}

+表示一次或任意次{1，}

{n}表示正好n次

中文匹配

[\u4e00-\u9fa5]

行首行位

^ $ --->如去除空格 ^\s ..... \s$

非或

|表示或，^表示非--->^需要放在[]组合里面使用如[^0-9] 非0-9

单词边界

\b 详见demo 9

修饰符

i 表示忽略大小写

g 表示全文查找

demo.3 \d的使用

并且正则表达式还支持 \ 转义字符,d表示字符串d，\d 表示数字

console.log("asd123asdasd 1 2 asd".search(/\d/));// 3 表示字符串中第一个数字对应的下标

demo.4 \s 的使用去掉空格

console.log("a sd12 3asda sd 1 2 asd".search(/\s/g));

demo.5 + 和 g的使用

       var str = "asdas 231,sad5645,2 210zx 1";
       alert(str.match(/\d/));//2
       alert(str.match(/\d/g));//2,3,1,5,6,4,5,2,2,1,0,1
       alert(str.match(/\d\d\d/g));//231,564,210
       alert(str.match(/\d+/g));//231,5645,2,210,1

match的作用表示获取匹配的项目

来看看第一个输出和第二个输出的区别，第一个只输出了一个也就是2，第二个却输出了全部的数字，说明g的修饰符的作用表示符合前者的所有的数据。

第二个输出和第三个输出的区别就是，输出了三位数因为用了\d\d\d来表示正则

第三个输出和第四个输出的区别就是，后者输出的是一个完整的数字，在数字的前后字符都不是数字。\d+就表示后面会有不止一个数据，如a+，就表示后面会有不止一个a。

demo.6 【xxx】组合

字符类表示一个范围，可以理解为多个 | | |

       var str = "asdasdasdasdc";
       console.log(str.match(/[abcde]/g));
       console.log(str.match(/a|b|c|d|e/g));

以上两个结果是相同的。

如 \d=[0-9] \w=[0-9a-zA-Z]

demo.7 ^ 表示除了

var str = "asdasd123as123dasd,c哈哈";
console.log(str.match(/^[0-9a-z]/g));

该正则表达式表示除了0到9的数字和a到z的字符

demo.8 replace和(ig)正则的结合

var str = "asdas 231,sAd5645,2 210zx 1";
alert(str.replace(/a/ig,"哈"));

以上正则的意思就是找到所有的a无论大小写，配合replace去替换成哈，若不加g，则只能替换最早出现的那个。

demo.9 \b

       var str = "asdashello,asd hello,123hello hello";
       console.log(str.match(/hello/g)); // 4个hello
       console.log(str.match(/\bhello\b/g)); // 2个hello

我们可以看到没有\b 边界符来修饰的，表示含有hello就符合筛选，一共有四处hello

若用\b修饰，表示hello是一个单独的单词，并不是某一个单词中包含hello，故符合要求的就第二个和第四个hello。

demo.10 敏感词过滤

将所有的数字过滤成***

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<textarea id="textarea1" rows="10" cols="40"></textarea>
	<button id="btn">提交</button>
	<textarea id="textarea2" rows="10" cols="40"></textarea>
	<script type="text/javascript">
		window.onload = function(){
		var btn = document.getElementById("btn");
		var textarea1 = document.getElementById("textarea1");
		var textarea2 = document.getElementById("textarea2");
		btn.onclick = function(){
			textarea2.value = textarea1.value.replace(/\d+/g,"***");
		}	
		}
	</script>
</body>
</html>

如果说想要多个条件可以用 | 如\d+|a 就表示不匹配到数字或者字符a

demo.11 qq号码验证首位不为0 长度5位到11位

var str = "我的qq号1013152446 你的qq号503684";
console.log(str.match(/[1-9]\d{4,10}/g));

首先首位不能为0，正则是[1-9]

除了首位，那么剩下的长度就是4-10，因为总长度是5-11，正则是\d{4,10}

demo.12 邮箱验证

如 h ahahaha_ha @ 163 . com，我们来分析一下结构

名字（首字符必须是字母，可以有字母,数字和_ . -组成） +@+域名（不能有下划线，数组,字母,-）+.+后缀(长度是2位到6位的字母)

[a-zA-Z] \w+ @ [a-z0-9A-Z-]+ . [a-z0-9A-Z]{2,6}

var red = /[a-zA-Z] [\w\.-_]+@[a-z0-9A-Z-]+\.[a-z0-9A-Z]{2,6}/

加上行首行尾才够完美

var red = /^[a-zA-Z][\w\.-_]+@[a-z0-9A-Z-]+\.[a-z0-9A-Z]{2,6}$/

因为.（点）表示所有，所以需要加\表示转义

正则表达式的基本使用已经讲解完毕，若有阐述错误的地方，请指出并已改正。

csdn_gyh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端攻城狮---正则表达式

正则表达式首先我们要知道正则表达式是什么？ -----正式表达式又称规则表达式，通常用来检索或替换那些符合某些模式(规则)的文本。正则主要用来搭配字符数的一下方法 search 查找 substring 获取子字符串 charAt 获取某个字符 spli...
复制链接

扫一扫

专栏目录