javaScript 高级04

1. 什么是正则表达式

1.1 特点

灵活性、逻辑性和功能性强大
可以用既简单又迅速的方式控制字符串
实际开发可以使用菜鸟工具或者其他工具复制粘贴

1.2 概述

正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
正则表通常被用来校验、替换那些符合某个模式（规则）的文本。

2. 创建正则表达式

一：new一下
var regexp = new RegExp(/4564561/);

二：字面量创建
var reg = /456454/;

相比较来说，字面量创建方式更加方便快捷

2.1 测试test()

test()正则对象方法，用于检测字符串师傅符合该规则，符合为 true，否则为 false ，参数就是需要校验的字符串
表达式：reg.test(字符串)

3. 正则表达式中的特殊字符

3.1 边界符

^ 表示以谁开始
$ 表示以谁结束
如果 ^ $ 分别在首尾，表示必须是精确匹配。

var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
// /abc/ 只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc'));
console.log(rg.test('abcd'));
console.log(rg.test('aabcd'));
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

3.2 字符类

3.2.1 ^{1$ 方括号配合边界符}

^{表示多选一}

^{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
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
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
‐‐‐‐‐‐‐‐‐
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
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
‐‐‐‐‐‐‐‐‐‐
//字符组合
var reg1 = /^[a‐zA‐Z0‐9]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回
true
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
‐‐‐‐‐‐‐‐‐‐‐
//取反 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 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}

^{3.2.3 量词符}

^{量词符：用来设定某个模式出现的次数}

^{‘*’ 重复0次或者更多次（大于等于0次）

‘+ ’ 重复一次或者更多次

‘？’ 重复一次或者0次

‘{n}’ 重复n次

‘{n,}’ 重复大于等于n次

‘{n,m}’ 重复 n 次到 m 次}

^{3.2.4 用户名表单验证}

^{功能需求:}

^{如果用户名输入合法, 则后面提示信息为: 用户名合法,并且颜色为绿色}
^{如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为红色}

^{分析 :}

^{用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为6~16位;

首先准备好这种正则表达式模式/$[a-zA-Z0-9-_]{6,16}^/;

当表单失去焦点就开始验证;

如果符合正则规范, 则让后面的span标签添加 right类;

如果不符合正则规范, 则让后面的span标签添加 wrong类.}

^{<input type="text" class="uname"> <span>请输入用户名</span><script>//  量词是设定某个模式出现的次数var reg = /^[a‐zA‐Z0‐9_‐]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划
线 中划线var uname = document.querySelector('.uname');var span = document.querySelector('span');uname.onblur = function() {if (reg.test(this.value)) {console.log('正确的');span.className = 'right';span.innerHTML = '用户名格式输入正确';} else {console.log('错误的');span.className = 'wrong';span.innerHTML = '用户名格式输入不正确';}}
</script>}

^{3.2.5 预定义类}

^{\d 匹配 0-9 的任一数字，相当于 [0-9]

\D “\d ”取反（[^0-9]）

\w 匹配任意的字母数字和下划线（[A-Za-z0-9]）

\W “\w ”取反

\s 匹配空格，包括换行符、制表符（[\t\r\n\v\f]）

\S “\s” 取反}

^{4. 正则替换 replace()}

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

^{var str = 'andy和red';
var newStr = str.replace('andy', 'baby');
console.log(newStr)//baby和red
//等同于 此处的andy可以写在正则表达式内
var newStr2 = str.replace(/andy/, 'baby');
console.log(newStr2)//baby和red
//全部替换
var str = 'abcabc'
var nStr = str.replace(/a/,'哈哈')
console.log(nStr) //哈哈bcabc
//全部替换g
var nStr = str.replace(/a/a,'哈哈')
console.log(nStr) //哈哈bc哈哈bc
//忽略大小写i
var str = 'aAbcAba';
var newStr = str.replace(/a/gi,'哈哈')//"哈哈哈哈bc哈哈b哈哈"}

^{小题：过滤敏感词汇}

^{<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>}

^↩︎