正则表达式（知道表示的什么意思）

cc&

已于 2022-07-15 13:54:16 修改

阅读量152

点赞数

分类专栏： js 文章标签：正则表达式 javascript 开发语言

于 2022-06-02 10:22:37 首次发布

原文链接：https://mp.csdn.net/mp_blog/creation/editor/125086054

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

工具=》FeHelper - AwesomeWEB前端助手：FeHelper，浏览器插件，包含一些前端实用的工具，如JSON格式化,JSON对比,信息编解码,代码美化,代码压缩,二维码生成,二维码解码,图片Base64转换,Markdown,随机密码生成器,正则表达式,时间戳转换,便签笔记,进制转换,贷款计算器等https://www.baidufe.com/fehelper/index/index.html

1.初次demo

// 1. 利用RegExp对象来创建正则表达式(麻烦)

var regexp = new RegExp(/123/)

console.log(regexp);

// 2. 利用字面量来创建正则表达式，正则表达式不需要引号

var rg = /123/ //包含123就为真

// 3. test() 用来检测正字表达式是否符合规范

console.log(rg.test(123))

console.log(rg.test('1'))

2.边界符

边界符-》用来提示字符所处的位置，主要有两个字符

边界符	说明
^	以谁开始
$	以谁结束

如果^和$在一起表示精确定位

        var rg1 = /^abc/ //以abc开头就为真
        console.log(rg1.test('abcccc'))
        console.log(rg1.test('aabc'))
        console.log('-----------------------------')
        var rg2 = /^abc$/ //必须是字符串abc
        console.log(rg2.test('abc'))
        console.log(rg2.test('aabc'))
        console.log('-----------------------------')

3.字符类

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

如果中括号里面有 ^ 表示取反不包含这些

字符类	说明
[abc]	只要包含其中一个就可以
[a-z]	- 表示范围字母a到字母z

       // 字符类：[] 表示有一系列字符可供选择， 只要匹配其中一个就可以了
        var rg = /[abc]/ //只要包含a或者b或者c 都返回true
        console.log(rg.test('andy')); //true
        console.log(rg.test('rndy')); //false
        console.log('------------------------')
        var rg1 = /^[abc]$/ //只有a或者b或者c 都返回true
        console.log(rg1.test('andy')); //false
        console.log(rg1.test('rndy')); //false
        console.log(rg1.test('a')); //true
        // 字符类：[-] 表示有字符串可以选择范围
        var rg2 = /^[a-z]$/ //a-z其中一个字母
        console.log(rg2.test('a')) //true
        console.log(rg2.test('A')) //false
        // 字符组合
        var rg3 = /^[a-zA-Z0-9_-]$/
        // 如果中括号里面有 ^ 表示取反不包含这些
        var rg4 = /^[^a-zA-Z0-9_-]$/
        console.log(rg4.test('%'))
        console.log(rg4.test('a'))

4.量词符

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

量词	说明(单位次)
*	>=0
+	>=1
?	1\|\|0
{n}	=n
{n,}	》=n
{n,m} 中间不要有空格	n<=字符<=m

<script>
        // 量词符： 用来设定某个模式出现的次数(简单来理解就是字符重复的次数)
        // var reg = /^a$/

        // * 相当于 >= 0 可以出现0次或者很多次
        // var reg = /^a*$/
        // console.log(reg.test('')); //true
        // console.log(reg.test('a')); //true
        // console.log(reg.test('aaaa')); //true

        // +相当于 >= 1 可以出现1次或者很多次
        // var reg = /^a+$/
        // console.log(reg.test('')); //false
        // console.log(reg.test('a')); //true
        // console.log(reg.test('aaaa')); //true

        // ?相当于1 || 0
        // var reg = /^a?$/
        // console.log(reg.test('')); //true
        // console.log(reg.test('a')); //true
        // console.log(reg.test('aaaa')); //false

        // {3}  重复3次
        // var reg = /^a{3}$/
        // console.log(reg.test('')); //false
        // console.log(reg.test('a')); //false
        // console.log(reg.test('aaa')); //true


        // {3,}  大于等于3次
        // var reg = /^a{3,}$/
        // console.log(reg.test('')); //false
        // console.log(reg.test('aaaa')); //true
        // console.log(reg.test('aaa')); //true

        // {3,5}  大于等于3次 小于等于5
        var reg = /^a{3,5}$/
        console.log(reg.test('aaaaaaa')); //false
        console.log(reg.test('aaaa')); //true
        console.log(reg.test('aaa')); //true
    </script>

5.括号的总结

{大括号}----------量词

[中括号]-----------多选一

（）-----------------优先级

eg:

/^abc{3}$/================表示a重复了3次，abccc

/^(abc){3}$/================表示abc重复了3次，abcabcabc

6.预定义类

（指的是某些常见模式的简写方式）

预定义	说明
\d	匹配0-9之间的任一数字，相当于[0-9]
\D	匹配0-9以外的字符，相当于[^0-9]
\w	匹配任意的字母、数字、下划线，相当于[A-Za-z0-9_]
\W	除所有的字母、数字、下划线以外的字符，相当于[^A-Za-z0-9_]
\s	匹配空格（换行，制表等等），相当于[\t\r\n\v\f]
\S	匹配非空格字符，相当于[^\t\r\n\v\f]

7.正则表达式替换（敏感词汇的替换）

replace(//,'***') -------------------参数一：原文参数二：替换为

（默认情况下，仅仅替换原文出现的第一个内容）

配置	说明
g	全局配置，只要出现就全部替换
i	忽略大小写配置
gi	全局配置+忽略大小写

<!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>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>提交</button>
    <div></div>
    <script>
        var text = document.querySelector('textarea')
        var btn = document.querySelector('button')
        var div = document.querySelector('div')
        btn.addEventListener('click', () => {
            var str = text.value.replace(/激情/g, '**')
            div.innerHTML = str
        })
    </script>
</body>

</html>