正则表达式

正则表达式的概述

概念：

• 正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达 式也是对象。

  正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入 英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页 面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。

  其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript 正则表达式完成表单验证。

特点

1. 灵活性、逻辑性和功能性非常的强。

2. 可以迅速地用极简单的方式达到字符串的复杂控制。

3. 对于刚接触的人来说，比较晦涩难懂。比如：

   ^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$ 
   

4. 实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改 正则表达式. 比如用户名:

   /^[a-z0-9_-]{3,16}$/
   

语法：

$reg=’/元字符或者普通字符/;

• 比如:

  ​ $reg=’/C/";

  ​ 元字符就是有一些特殊含义的字符,比如有 \d 代表 0-9之间的 任意一个数字

  $reg=’/\d/";

元字符

• 元字符主要有下面几种

元字符	含义
a-z	英文小写字母
A-Z	英文大写字母
0-9	数字0-9
\d	代表0-9之间的任意一个数字
\D	\d 的取反
\w	字母、数字、下划线
\W	\w 的取反
\s	空白字符串
\S	非空白字符串
[ ]	任意匹配 [ ] 中单个字符
.	匹配任意字符串(换行除外)
{n}	匹配 n 次
{n,}	至少匹配 n 次
{n,m}	最少匹配 n 次，最多匹配 m 次
*	匹配0个或多个，相当于{0,}
+	匹配1个或多个，相当于{1,}
?	匹配0个或1个，相当于{0,1}
^	1. 匹配正则开头；2.放在[^]，内容取反
$	匹配正则结尾

正则表达式在js中的使用

概念：

• js的正则库在php正则面前显得只是一个简约的基础库

正则表达式的创建

定义正则表达式

在js中定义正则表达式很简单，有两种方式，一种是通过构造函数，一种是通过**//，也就是两个斜杠**

方式一：通过调用RegExp对象的构造函数创建

var regexp = new RegExp(/123/);

console.log(regexp)

方式二：利用字面量创建 正则表达式

var rg = /123/;

console.log(rg)

测试正则表达式

test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。

var rg = /123/;
console.log(rg.test(123));//匹配字符中是否出现123 出现结果为true
console.log(rg.test('abc'));//匹配字符中是否出现123 未出现结果为false

编写一个正则表达式的模式

一个正则表达式模式是由简单的字符所构成的，比如 /abc/；或者是简单和特殊字符的组合，比如 /ab*c/ 或 /Chapter (\d+)\.\d*/。最后的例子中用到了括号，它在正则表达式中常用作记忆设备。即这部分所匹配的字符将会被记住以备后续使用，例如使用括号的子字符串匹配。

使用简单模式

简单模式是有你想直接找到的字符构成，例如 /adc 这个模式就能且仅能匹配 “abc” 字符串按照顺序同时出现的情况

使用特殊字符

当你需要匹配一个不确定的字符串时，比如寻找一个或多个 “b”，或者寻找空格，可以在模式中使用特殊字符。比如，你可以使用 /ab*c/ 去匹配一个单独的 “a” 后面跟了零个或者多个 “b”，同时后面跟着 “c” 的字符串：*的意思是前一项出现零次或者多次。在字符串 “cbbabbbbcdebc” 中，这个模式匹配了子字符串 “abbbbc”。

正则表达式中的特殊字符

修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。
s	允许 . 匹配换行符。
u	使用unicode码的模式进行匹配。
y	执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。

为了在正则表达式中包含标志，请使用以下语法：

var re = /pattern/flags;

或者

var re = new RegExp("pattern", "flags");

值得注意的是，标志是一个正则表达式的一部分，它们在接下来的时间将不能添加或删除。

边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

如果 ^和 $ 在一起，表示必须是精确匹配。

例如：

var rg = /123/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
// /123/ 只要包含有123这个字符串返回的都是true
console.log(rg.test('123')); //true
console.log(rg.test('12345')); //true
console.log(rg.test('1456')); //false

console.log('---------------------------');
var reg = /^abc/;
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red|blue|green)	查找任何指定的选项。

这一类表示有一系列字符可供选择，只要匹配其中一个就可以了

测试:

<script>
    var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
    console.log(rg.test('andy'));//true
    console.log(rg.test('baby'));//true
    console.log(rg.test('color'));//true
    console.log(rg.test('red'));//false
    console.log('------------------------------------------------------')
    var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 true
    console.log(rg1.test('aa'));//false
    console.log(rg1.test('a'));//true
    console.log(rg1.test('b'));//true
    console.log(rg1.test('c'));//true
    console.log(rg1.test('abc'));//true
    console.log('------------------------------------------------------');
    
    var reg = /^[a-z]$/ //26个英文字母任何一个字母返回 true - 表示的是a 到z 的范围
    console.log(reg.test('a'));//true
    console.log(reg.test('z'));//true
    console.log(reg.test('A'));//false
    console.log('------------------------------------------------------');
    
    //字符组合
    var reg1 = /^[a-zA-Z0-9]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true
    console.log(reg1.test('a'));
    console.log(reg1.test('B'));//false
    console.log(reg1.test(8));//false
    console.log(reg1.test('!'));//true
    
    console.log('------------------------------------------------------');
    //取反 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。
    var reg2 = /^[^a-zA-Z0-9]$/;
    console.log(reg2.test('a'));//false
    console.log(reg2.test('B'));//false
    console.log(reg2.test(8));//false
    console.log(reg2.test('!'));//true
</script>

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

元字符

元字符（Metacharacter）是拥有特殊含义的字符他与php的元字符基本相似：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

匹配特定数字：

方法	说明
^[1-9]d*$	匹配正整数
^-[1-9]d*$	匹配负整数
^-?[1-9]d*$	匹配整数
^[1-9]d*|0$	匹配非负整数（正整数 + 0）
^-[1-9]d*|0$	匹配非正整数（负整数 + 0）
^[1-9]d*.d*|0.d*[1-9]d*$	匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$	匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$	匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$	匹配非负浮点数（正浮点数 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$	匹配非正浮点数（负浮点数 + 0）

匹配中文字符的正则表达式： [u4e00-u9fa5]

匹配双字节字符(包括汉字在内)：[^x00-xff]

匹配空白行的正则表达式：ns*r

匹配HTML标记的正则表达式（仅能匹配部分）：< (S*?)[^>]*>.*?|< .*? />

匹配首尾空白字符的正则表达式：^s*|s*$

匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*

匹配网址URL的正则表达式：[a-zA-z]+://[^s]*

匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

匹配国内电话号码（匹配形式如 0511-4405222 或 021-87888822
）：d{3}-d{8}|d{4}-d{7}

匹配腾讯QQ号（从10000开始）：[1-9][0-9]{4,}

匹配中国邮政编码（6位数字）：[1-9]d{5}(?!d)

匹配15位或18位身份证：d{15}|d{18}
                             
匹配ip地址：d+.d+.d+.d+

使用正则表达式

RegExp 对象属性

属性	描述	FF	IE
global	RegExp 对象是否具有标志 g。	1	4
ignoreCase	RegExp 对象是否具有标志 i。	1	4
lastIndex	一个整数，标示开始下一次匹配的字符位置。	1	4
multiline	RegExp 对象是否具有标志 m。	1	4
source	正则表达式的源文本。	1	4

RegExp 对象方法

正则表达式可以被用于 RegExp 的 exec和test 方法以及String 的

match、replace、search 和 split方法。这些方法在 JavaScript 手册中有详细的解释。

方法	描述
exec	一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回 null）。
test	一个在字符串中测试是否匹配的RegExp方法，它返回 true 或 false。
match	一个在字符串中执行查找匹配的String方法，它返回一个数组，在未匹配到时会返回 null。
matchAll	一个在字符串中执行查找所有匹配的String方法，它返回一个迭代器（iterator）。
search	一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
replace	一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。
split	一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法。

当你想要知道在一个字符串中的一个匹配是否被找到，你可以使用 test 或 search 方法；

想得到更多的信息（但是比较慢）则可以使用 exec 或 match 方法。

如果你使用exec 或 match 方法并且匹配成功了，那么这些方法将返回一个数组并且更新相关的正则表达式对象的属性和预定义的正则表达式对象。如果匹配失败，那么 exec 方法返回 null（也就是false）

例如：

var reg =  /^(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|X)$/

console.log(reg.exec(reg))

案例：用户表单验证

<html>
	<head>
		<meta charset="utf-8">
		<title>用户表单验证title>
		<style>
			.right{
				color: green;
			}
			.wrong{
				color: red;
			}
		style>
	head>
	<body>
		<label>请输入用户名label>
		<input type="text" class="name" /> 
		<span>span>
		<script>
			/**
			 * 用户名表单验证
			 * 功能需求:
			   1. 如果用户名输入合法, 则后面提示信息为: 用户名合法,并且颜色为绿色
			   2. 如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为红色
			 * 分析:
			 * 1. 用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为6~16位.
			 * 2. 首先准备好这种正则表达式模式/$[a-zA-Z0-9-_]{6,16}^/
			 * 3. 当表单失去焦点就开始验证.
			 * 4. 如果符合正则规范, 则让后面的span标签添加 right类.
			 * 5. 如果不符合正则规范, 则让后面的span标签添加 wrong类.
			 * */
			  var reg = /^[a-zA-Z0-9_-]{6,16}$/;//设置模式为只能为大小写字母、数字0-9、中横线和下划线，并且最少6位，最长16位
			  var names = document.querySelector('.name');
			  var span = document.querySelector('span');
			  names.onblur = function(){
				  if(reg.test(this.value)){
					  console.log('正确');
					  span.className = 'right';
					  span.innerHTML = '用户输入正确'
				  }else{
					  console.log('错误');
					  span.className = 'wrong';
					  span.innerHTML = '请输入正确的用户名'
				  }
			  }
		script>
	body>
html>

正则替换replace

replace() 方法可以实现替换字符串的操作，用来替换的参数可以是一个字符串或是一个正则表达式。

<script>
	var str = '11111aaaaabscbusda'
	var strs = str.replace('1','2') //只替换第一个 1
	console.log(strs)
	var sts = str.replace(/1/g,'2') //全局搜索1，并实现替换
	console.log(sts)
</script>

案例：

<!-- 过滤敏感词汇案例 -->
<textarea name="" id="message"></textarea> <button>提交</button>
<div></div>
<script>
    var text = document.querySelector('textarea');
	var btn = document.querySelector('button');
	var div = document.querySelector('div');
	btn.onclick = function() {
        div.innerHTML = text.value.replace(/激情|gay/g, '**');
	}
</script>