javaScript 高级04 正则表达式（边界符、字符类、量词符）

javaScript 高级04

1. 什么是正则表达式

1.1 特点

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

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 ¹$ 方括号配合边界符

表示多选一

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 用户名表单验证

功能需求:

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

分析 :

用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为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>

---

1. ↩︎