WebAPI之正则表达式

最新推荐文章于 2024-01-19 09:44:55 发布
最新推荐文章于 2024-01-19 09:44:55 发布
阅读量213 收藏
点赞数
文章标签： 正则表达式 javascript 大前端 api
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55944058/article/details/121835369
版权

目录

一、正则的基本使用步骤

二、普通字符和元字符

1、元字符-边界符

<1> 精确匹配

2、元字符 - 量词

3、元字符 - 字符类

<1>  |   或

<2>  []   或的集合

​

<3>  [-]   范围

<4>  [^]  非，除了某范围外

​

<5>  .  表示\r与\n以外的任意字符

<5> 匹配中文

4、元字符 - 预定义类

三、正则修饰符

四、正则本质是对象与它的构造函数创建法

五、如何用敏感词库替换

六、正则的exec方法（了解）

一、正则的基本使用步骤

正则是描述字符串特征的

        先准备描述字符串内容的特征

        再准备一段查找的字符串范围

                进行查找即可

如何描述特征？

        需要用到正则对象

语法

/特征/

例：

/男/  // 找字符串里有没有 `男` 这个内容,特征就是符合有`男`

准备一段字符串范围，再去查找特征

语法

/男/.test( 字符串范围 )

// 例
console.log( /黑马/.test( '乾坤未定，你我皆黑马' ) ) // true
console.log( /黑马/.test( '目光朦胧处，忽现一少年身骑白马' ) ) // false

就会去找这个字符串范围里，有没有男这个字，有会得到 true， 没有会得到 false

案例：判断文本中又没有  刘德华  三个字

<!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" class="text">
    <script>
        let arr = document.querySelector('.text');
        console.log(arr.value);
        console.log(/刘德华/.test(arr.value));
        arr.addEventListener('blur', function() {
            if (/刘德华/.test(arr.value)) {
                alert('有敏感词');
            } else {
                alert('可以使用');
            }
        });
    </script>
</body>

</html>

二、普通字符和元字符

我们自己写的规则，比如说 /男/ , /刘德华/ ， /abc/ 这些都是字面意思，写男就是找男，写刘德华就是找刘德华，写abc就是找abc，这就会所谓的 普通字符

但是在正则中用一些特殊的符号表示了特殊的含义，也就是说，你写一个符号，它可能不是找某个符号，而是找它所蕴含的特殊含义。例如： /./， 它不是找 .，因为 . 在正则中有特殊含义，那么对于这种有特殊含义的字符，我们就称之为 元字符

1、元字符-边界符

 边界符

说明

^

以什么开始

$

以什么结尾

语法：

/^内容/

它不是找^内容，因为^有特殊含义，它代表以什么开头，所以这句话的意思是找 以某个内容开头的字符串

/内容$/ 

 以什么结尾，以这个内容结尾的

注意： ^ 要写在最开头， $ 要写在最末尾

       // 默认这种写法代表只要任意位置有男这个字即可
        console.log( /男/.test('这个世界，有男有女！') ) // true
        console.log( /男/.test('男人就是难') ) // true
        console.log( /男/.test('我的性别是男') ) // true

        
        // 找以 男 开头
        console.log( /^男/.test('这个世界，有男有女！') ) // false
        console.log( /^男/.test('男人就是难') ) // true
        console.log( /^男/.test('我的性别是男') ) // false

        // 找以 男 结尾
        console.log( /男$/.test('这个世界，有男有女！') ) // false
        console.log( /男$/.test('男人就是难') ) // false
        console.log( /男$/.test('我的性别是男') ) // true

<1> 精确匹配

把 ^ 和 $ 结合起来就是精确匹配

语法：

/^内容$/ 

 代表字符串只能是这个内容，不能有多余的部分，如果只是这个内容就得到true，否则得到false

举例：

        // 这个就叫精确匹配
        // 只能有 李建雨真帅 这个五个字，不能有其他任意内容
        console.log( /^李建雨真帅$/.test('李建雨真帅棒棒哒') ) // false
        console.log( /^李建雨真帅$/.test('李建雨真帅非常牛逼') ) // false
        console.log( /^李建雨真帅$/.test('李建雨真帅李建雨真帅李建雨真帅') ) // false
        console.log( /^李建雨真帅$/.test('李建雨真帅') ) // true

2、元字符 - 量词

量词

说明

*

出现0次或多次

+

出现1次或多次

?

出现0次或1次

{n}

出现n次

{n,}

出现至少n次

{n,m}

出现至少n次，最大m次

注意：这些量词只修饰它左边的那一个字符，所以要修饰整体，记得加小括号包起来

3、元字符 - 字符类

<1>  |   或

或，要么左边要么右边

/1|a|b|d|4/

代表要字符串中出现1、a、b、d、4中的任意一个就返回true

<!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>
    <script>
        console.log(/1|a|b|d|4/.test('哈喽1'));
        console.log(/1|a|b|d|4/.test('哈喽a'));
        console.log(/1|a|b|d|4/.test('哈喽b'));
        console.log(/1|a|b|d|4/.test('哈喽d'));
        console.log(/1|a|b|d|4/.test('哈喽4'));
    </script>
</body>

</html>

 

<2>  []   或的集合

匹配字符集合：中括号里任意一个都可以，也是或的意思

/[1abd4]/

代表要字符串中出现1、a、b、d、4中的任意一个就返回true

<!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>
    <script>
        //   []    或 的用法
        console.log(/[1abd4]/.test('哈喽1'));
        console.log(/[1abd4]/.test('哈喽a'));
        console.log(/[1abd4]/.test('哈喽b'));
        console.log(/[1abd4]/.test('哈喽d'));
        console.log(/[1abd4]/.test('哈喽4'));
    </script>
</body>

</html>

<3>  [-]   范围

表示范围：[起点-终点]

[a-z]        // a-z中的任意一个
[0-9]         // 0-9中的任意一个
[A-Z]         // A-Z中的任意一个

[a-zA-Z0-9] // 代表任意一个大小写字母或者任意一个数字

<!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>
    <script>
        //[-]   范围的使用
        console.log(/[a-zA-Z0-9]/.test('表示只要有a到z,A到Z,0到9这个范围内的字符,都会返回ture'))
    </script>
</body>

</html>

<4>  [^]  非，除了某范围外

/[^a-zA-Z0-9]

a到z,A到Z,0到9这个范围外的字符,都会返回ture

<!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>
    <script>
        //^   范围的使用
        console.log(/[^a-zA-Z0-9]/.test('a到z,A到Z,0到9这个范围外的字符,都会返回ture'))
    </script>
</body>

</html>

<5>  .  表示\r与\n以外的任意字符

只要没有\n或者\r,都可以返回true

<!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>
    <script>
        //  .  表示\r与\n以外的任意字符
        console.log(/[.]/.test('只要没有\n或者\r,都可以返回true,所以这句话返回false'))
    </script>
</body>

</html>

<5> 匹配中文

/[\u4e00-\u9fa5]/

计算机中肯定是不支持中文的，所以中文在计算机中本质上都是转成了对应的英文字母

其中有个很出名的编码叫 unicode 编码，这个叫万国码

万国码：它包含了世界上各种文字，最终都对应到英文字母，用各种字母表示各种文字

/[\u4e00-\u9fa5]/

\u4e00 就是第一个汉字

\u9fa5 就是最后一个汉字

所以这个范围就代表任意汉字

\u 就是unicode编码的前缀

案例：判断用户输入的账号是否合法（字母、数字、下划线，且最少6位，最多10位）

<!DOCTYPE html>
<html lang="CH">

<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>
    <style>
        span {
            display: inline-block;
            width: 250px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            padding-left: 15px;
        }
        
        .error {
            color: red;
            background: url(./error1.png) no-repeat left center;
        }
        
        .right {
            color: green;
            background: url(./right.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <input type="text">
    <span></span>
    <script>
        let input = document.querySelector('input');
        let sp = document.querySelector('span');

        //需求:6-10位长度,由数字字母下划线组成
        input.addEventListener('blur', function() {
            if (/^[a-zA-Z0-9_]{6,10}$/.test(input.value)) {
                //符合条件
                sp.classList.remove('error');
                sp.classList.add('right');
                sp.innerHTML = '输入格式正确';
            } else {
                //不符合条件
                sp.classList.remove('right');
                sp.classList.add('error');
                sp.innerHTML = '输入格式错误';
            };
        });
    </script>
</body>

</html>

案例：用户昵称是否合法（昵称必须是中文字母数字，长度是2-4之间）

<!DOCTYPE html>
<html lang="CH">

<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>
    <style>
        span {
            display: inline-block;
            width: 250px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            padding-left: 15px;
        }
        
        .error {
            color: red;
            background: url(./error1.png) no-repeat left center;
        }
        
        .right {
            color: green;
            background: url(./right.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <input type="text">
    <span></span>
    <script>
        let input = document.querySelector('input');
        let sp = document.querySelector('span');
        input.addEventListener('blur', function() {

            //[\u4e00-\u9fa5]万国码汉字范围
            if (/[\u4e00-\u9fa5]{2,4}$/.test(input.value)) {
                //符合条件
                sp.classList.remove('error');
                sp.classList.add('right');
                sp.innerHTML = '输入格式正确';
            } else {
                sp.classList.remove('right');
                sp.classList.add('error');
                sp.innerHTML = '输入格式错误';
            };
        });
    </script>
</body>

</html>

4、元字符 - 预定义类

预定义类：就是正则里用特殊符号来标识它属于哪一类数据

预定义类

说明

\d

匹配数字

\D

匹配非数字

\w

匹配文本字符，也就是任意字母、数字、下划线

\W

匹配非文本字符，也就是除了字母、数字、下划线

\s

匹配不可见字符  比如空格

\S

匹配可见字符

三、正则修饰符

语法：/正则内容/修饰符。例：/[a-z]/i  忽略大小写的

        i：忽略大小写

        g：全局匹配

        两个一起写，写成 ig 或 gi 就代表 既忽略大小写，也全局匹配

常用于替换文本中的内容：

        字符串的replace，可以替换字符串内容

str.replace(正则表达式, 要替换的内容)

// 例
let str = 'oooOOO哈哈哈OOOooo'
str = str.replace(/o/ig, '') // 把所有的o不区分大小写全部替换成空字符串
console.log(str) // 哈哈

案例： 过滤敏感字

<!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>
        let area = document.querySelector('textarea');
        let btn = document.querySelector('button');
        let div = document.querySelector('div');
        btn.addEventListener('click', function() {
            let text = area.value.replace(/敏感词一|敏感词二|敏感词二/ig, '**');
            div.innerHTML = text;
        });
    </script>
</body>

</html>

四、正则本质是对象与它的构造函数创建法

正则本质上就是一个对象，  /规则/  这种写法是字面量表示法

也可以用构造函数创建出一个正则

let 对象名 = new RegExp('规则', '修饰符')

例子：

let reg = new RegExp('ab', 'ig') // 代表忽略大小写而且全局的找ab

// 如果要找字母数字下划线怎么写？ 字面量：/\w/
let reg2 = new RegExp('\\w', '修饰符')

注意：如果要写预定义类，要多加一个\，例如\\w 和 \\d，因为 \ 在js字符串中是转义的意思，所以要写 \ 就必须写 \\

五、如何用敏感词库替换

先把敏感词库的数组转成字符串（用 |）

再然后用 new RegExp 来创建正则对象

let words = ['敏感词1', '敏感词2', '敏感词3', '敏感词4' ]
let str = words.join('|')
let reg = new RegExp(str, 'ig')
console.log( "今天大家都很敏感词1，也很有敏感词2，大家要爱护敏感词3，支持敏感词4！".replace(reg, '**')   )

 

六、正则的exec方法（了解）

正则对象除了 test 方法，还有一个方法叫 exec ，就是用来做提取内容的

image-20211209165129852.png

 

李建雨
关注
【Python之正则表达式与JSON】
分享关于数据的知识。
11-10 1252
正则表达式是一个特殊的字符序列，一个字符串是否与我们所设定的这样的字符序列，相匹配。可以快速检索文本，实现一些替换文本的操作import rea = ‘C | C + + | C #|Python|Javascript’ r = re . findall('Python' , a) #返回一个列表 if len(r) > 0 : print("字符串中包含Pyython")import re。
java 匹配url的正则表达式_java匹配url的正则表达式
weixin_36163101的博客
02-12 1859
展开全部给你个正则表达式的资料，自己慢慢研究，授你以渔：一、正则表达式基础知识我们先从简单的开始。假设你62616964757a686964616fe78988e69d8331333264623264要搜索一个包含字符“cat”的字符串，搜索用的正则表达式就是“cat”。如果搜索对大小写不敏感，单词“catalog”、“Catherine”、“sophisticated”都可以匹配。也就是说：1....
【前端知识点总结】WebAPI 正则表达式
jiang_ziY的博客
03-05 432
本章内容包含：1、正则表达式，2、元字符（字符类、反向类 、范围类、 预定义类 、边界、 量词、分组 、修饰符），3、正则严格匹配，4、单词边界
web api（正则）（了解即可）
m0_62823653的博客
04-03 1013
1.1-正则表达式介绍 1.什么是正则表达式 正则表达式是一个用于对字符串实现逻辑匹配运算的对象 2.正则表达式的作用 按照某种规则来匹配字符串，而正则表达式就是制定这个规则 3.如何使用正则表达式 (1)创建正则表达式对象 (2)开始匹配 使用test()方法 4.正则表达式特点 对初...
WebApi 路由规则
qq_45701634的博客
10-31 297
public static class WebApiConfig { public static void Register(HttpConfiguration config) { config.Routes.MapHttpRoute( name: "DefaultApi", // 路由名称 ...
【WebAPI】路由规范
Up！Up！Up！
03-10 804
路由基础 新建一个WebApi服务的时候APP_Start文件夹下的WebApiConfig.cs中生成了一个默认的路由： Name:“DefaultApi”表示此路由的名称，这里只需要保证路由名称不重复就好。 routeTemplate：“api/{controller}/{id}”定义了路由模板，“api”是固定的部分，用来表示当前请求的url是一个api服务的接口，但是不用非得写...
WebApi复习06-正则表达式
m0_64526818的博客
12-21 291
正则表达式 元字符与原义文本字符 字符类, 反向类,范围类,预定义类,边界,量词,分组,修饰符
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
10-18
在线正则表达式测试工具可以方便开发者验证正则表达式是否能够正确地匹配文本，而在线生成工具则可以提供一些常用的正则表达式模式，对于那些不熟悉正则表达式的开发者来说，这能够大大提高工作效率。 最后，文章...
jQuery基于正则表达式的表单验证功能示例
10-20
在介绍jQuery基于正则表达式的表单验证功能示例时，本文重点介绍了在表单验证中如何应用正则表达式来实现对用户输入的校验。正则表达式是一种强大的文本处理工具，它提供了一种灵活且准确的方法来匹配字符串中符合...
【U9Cloud】OpenApi接口对接记录
最新发布
LLmoe的博客
01-19 4169
客户升级ERP 从U8升级到U9C,由之前的U8数据库对接 更换U9C 的OpenApi对接，中间踩了不少坑，网上的资料比较少，这里做个记录分享喜。
第三方调用U9服务说明(DotNet平台).doc
10-14
第三方调用U9服务说明(DotNet平台)，包括系统调用中常见问题及处理方法。
webapi实战一
Aran
03-10 376
创建 Web API 项目 在这里我们使用VS2013, .NET 4.5.1创建一个Web API 2的项目 image 选择项目WEB API模板, 在最下方的MVC主要是默认会自带微软的API Helper, 使用MVC发布 在这里不实用安全 这样我们一个项目就初始化好了, 这都要归功于微软强大的VS F５启动项目之后, 点击界面上API按钮可以看到默认创建的API i 这时就可以用上...
用友U9C业务单据与钉钉OA审批打通
a849918265的博客
10-12 711
2、审批拒绝：由于U9C OPEN API中不存在拒绝接口，只存在弃审接口而弃审接口需要单据状态为已审核，所以先调用审批接口，再调用弃审接口，U9C中单据状态会重新回到提交前的状态也就是开立，此时业务人员编辑修改单据后重新提交即可。由于第一条U9C单据提交事件需要通过BE插件实现，若将创建钉钉审批实例的功能部分集成在插件中的话，个人觉得太过冗余和复杂，所以本人的解决方法是开发一个中转层，用于接收BE插件传过来的数据并且创建钉钉审批实例。1、是U9C中单据提交后，创建一个钉钉审批实例。1、WebAPI框架。
WebAPI预测单Java完整示例（不引用组件示例）
Strive_789的博客
06-27 418
WebAPI预测单Java完整示例（不引用组件示例）
ASP.NET WebApi 路由配置
weixin_30545285的博客
05-18 212
ASP.NET Web API路由是整个API的入口。我们访问某个资源就是通过路由映射找到对应资源的URL。通过URL来获取资源的。 对于ASP.NET Web API内部实现来讲，我们的请求最终将定位到一个具体的Action上。所以说，ASP.NET Web API路由就是把客户端请求映射到对应的Action上的过程。 路由分为两种模式：模板路由和特性路由。 1.模板路由 模板路由是A...
调用钉钉的WebAPI接口实现与ERP数据的同步
dianzhongqu2330的博客
05-23 2468
一、调用钉钉的api接口实现与ERP中数据的对接，其中用到的主要技术有EF，linq，序列化，webAPI，文件的基本操作。 哪里不懂的直接看代码，或者给我评论留言。 using Modell; using System; using System.Collections.Generic; using System.Linq; using System.Net; usi...
用友U9 UAP平台解析
ctvz23099的博客
08-26 1454
用友U9 UAP平台解析 e-works 孙亚婷 2009年10月，e-works Research对用友U9 2.0版进行了一次评估。本文对U9的UAP平台的评估结果进行解析。 1、现代企业环境的变化 ...
Python批量下载音乐教程：解析API与正则表达式
本文将详细介绍如何利用Python实现这一功能，主要涉及的技术点包括requests库、正则表达式以及JSON解析。 首先，我们需要了解Python中的`requests`库，这是一个非常方便的用于发送HTTP请求的库。在批量下载音乐的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李建雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值