正则表达式

王昭没有君啊

已于 2022-02-08 18:36:19 修改

阅读量943

点赞数 1

分类专栏： JavaScript 文章标签：正则表达式 javascript 前端

于 2022-01-25 13:07:53 首次发布

本文链接：https://blog.csdn.net/weixin_58448088/article/details/122676108

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

前言

对于字符串格式的验证语法

所有的计算机语言，正则表达式都是完全相同的

注：对于我们前端而言，正则表达式只需要会使用就可以了，一般不会再自己写需要的正则表达式

正则表达式的定义

字面量语法形式

let 变量 = /正则表达式/;

构造函数创建正则表达式

let 变量 = new RegExp();

正则表达式的函数语法

正则.test(字符串);

验证字符串内容是否符合正则表达式语法规范

如果符合，返回值是true

如果不符合，返回值是false

JavaScript中的转义符

作用效果和html中的字符实体相同

使用特殊的符号表示对应的字符内容，防止程序执行冲突

\ ' ' 单引号
\ '' '' 双引号
\\ \ 斜杠
\n 换行
\b 退格键
\f 换页
\r 回车
\t 水平制表符
\v 垂直制表符

window.alert('王昭\n没有君啊');

正则表达式 -- 元字符

具有特殊验证规范的关键词/运算符

\d 数字
\D 非数字
\w 数字字母下划线
\W 非数字字母下划线
\s 空格
\S 非空格
. 非换行

//定义正则表达式
//只定义 \d，字符串中只要有数字就可以
let reg = /\d/;

//验证字符串
//只要有数字，结果就是true
console.log(reg.test('123'));
console.log(reg.test('123abc'));
console.log(reg.test('a1bc'));

//都不是数字，结果就是false
console.log(reg.test('abc'));

//定义正则表达式
//只定义 \D，字符串中只要有非数字就可以
let reg = /\D/;

//验证字符串
//只要有非数字，结果就是true
console.log(reg.test('abc'));
console.log(reg.test('123abc'));
console.log(reg.test('a1bc'));

//都是数字，结果就是false
console.log(reg.test('123'));

//定义正则表达式
//只定义 \s，字符串中只要有空格就可以
let reg = /\s/;

//验证字符串
//只要有空格，结果就是true
console.log(reg.test('a bc'));
console.log(reg.test('1 a b2'));

//字符实体 在 html中 才会被识别成 对应的执行效果 
//在 js中 只是 字符串内容而已 不会被识别解析
console.log(reg.test('&nbsp'));

//定义正则表达式
let reg = /./;

//验证字符串
//只要不是非换行，结果就是true
console.log(reg.test(`<br>`));
console.log(reg.test(`北京`));

//只有换行，结果才是false
console.log(reg.test(`
`));
console.log(reg.test('\n'));

正则表达式 -- 边界符

^ 起始

$ 结束

//以数字开头，结果就是true
let reg1 = /^\d/;

console.log(reg1.test('1abc'));//true
console.log(reg1.test('a1bc'));//false

//以数字结尾，结果就是true
let reg2 = /\d$/;

console.log(reg2.test('abc1'));//true
console.log(reg2.test('1a1b'));//false

//从开头至结尾，只能是数字，并且只能有一个数字
let reg3 = /^\d$/;

console.log(reg3.test('1abc1'));//false
console.log(reg3.test('1'));//true

正则表达式 -- 限定符

* 0 ~ 正无穷
+ 1 ~ 正无穷
? 0 ~ 1
{n} n个
{n,} n ~正无穷
{n,m} n ~ m 个

//从头到结尾，只能是数字，数字的个数是0 ~ 正无穷
let reg = /^\d*$/;

console.log(reg.test('123456'));//true
console.log(reg.test(''));//true
console.log(reg.test('1abc23'));//false

//从开头到结尾，只能是数字，数字的个数是1 ~ 正无穷
let reg = /^\d+$/;

console.log(reg.test('123456'));//true
console.log(reg.test(''));//false
console.log(reg.test('abc1'));//false

//从开头到结尾，只能是数字，数字的个数是0 ~ 1
let reg = /^\d?$/;

console.log(reg.test('123456'));//false
console.log(reg.test(''));//true
console.log(reg.test('8'));//true

//从开头到结尾，只能是数字，数字的个数只能是3
let reg = /^\d{3}$/;

console.log(reg.test('789'));//true
console.log(reg.test('4567'));//false
console.log(reg.test('78'));//false
console.log(reg.test(''));//false

//从开头到结尾，只能是数字，数字个数是3 ~ 正无穷
let reg = /^\d{3,}$/;

console.log(reg.test('789'));//true
console.log(reg.test('456789'));//true
console.log(reg.test('78'));//false
console.log(reg.test(''));//false

//从开头到结尾，只能是数字，数字的个数是3 ~ 5
let reg = /^\d{3,5}$/;

console.log(reg.test('12345'));//true
console.log(reg.test('123'));//true
console.log(reg.test('12'));//false
console.log(reg.test('123456'));//false

正则表达式 -- 特殊符号

| 逻辑或
() 将()中的内容·作为一个整体
[ ] 只要是[ ]中定义的内容就可以
n - m n - m的内容都可以
[^] 对内容取反

/^\d|\w{6-10}$/ 一个数字或者数字字母下划线6-10个

/^(\d|\w){6,10}$/ 数字或者数字字母下划线 6-10个

/^[a,b,c,d,e]$/ 是a,b,c,d,e中任意一个字符就可以

/^[a-z]|[A-Z]|[0-9]{5,10}/

字符a 至字符z 或者字符A 至字符Z 或者 0 - 9，所有字符的个数是5-10个

/^[^a]$/ 只要不是a字符就可以，个数是一个

配合正则表达式的字符串函数

正则表达式语法

/正则/i 不区分大小写

/正则/g 全局匹配

字符串函数

字符串.search()

/正则/i 不区分大小写

字符串.replace()

/正则/g 全局匹配

//不区分大小写
let str = 'abcedfg';
//查询大写字符A
console.log(str.search('A'));//-1
//查询大写字符A,不区分大小写
//也就是a A都可以
console.log(str.search(/A/i));//0

//全局替换
let str = 'abcabcabc';
//默认替换第一个符合的字符
console.log(str.replace('b','君'));
//替换所有符合的字符
console.log(str.replace(/b/g,'君'));

正则表达式中的变量

正则表达式不能解析变量

如果正则表达式中需要解析变量

1、使用模板字符串将变量解析

`/正则${变量}正则/`

执行结果式正则语法形式字符串

解析结果就是一个简单的字符串，没有正则表达式功能

2、eval(字符串)

将字符串按照JavaScript程序执行

也就是 ‘5+7’ 按照JavaScript 5+7 执行，结果是12

eval(正则字符串)

将字符串内容按照正则表达式功能来执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    请您输入字符串：<input type="text" name="oldStr"><br>
    请您输入要替换的字符串：<input type="text" name="oldCode"><br>
    请您输入要写入的字符串：<input typr="text" name="newCode"><br>
    您的替换结果是：<span></span><br>
    <button>替换</button>
   
    <script>
         //获取标签对象
         const oInpOldStr = document.querySelector('[name="oldStr"]');
         const oInpOldCode = document.querySelector('[name="oldCode"]');
         const oInpNewCode = document.querySelector('[name="newCode"]');
         const oSpan = document.querySelector('span');
         const oBut = document.querySelector('button');

         //给button标签添加点击事件
         oBut.addEventListener('click',function(){
             //获取input标签中的数据
             let oldStr = oInpOldStr.value;
             let oldCode = oInpOldCode.value;
             let newCode = oInpNewCode.value;

             console.log(oldStr);
             console.log(oldCode);
             console.log(newCode);
    
             //使用模板字符串解析含有变量的正则表达式
             //解析的结果只是字符串而已
             //没有正则表达式的功能，需要使用eval()来执行
             let regStr = `/${oldCode}/g`;
          
             //执行字符串调换操作，将结果写入span标签
             //使用eval()执行正则字符串
             oSpan.innerHTML = oldStr.replace(eval(regStr),newCode);
         })
         
    </script>
</body>
</html>