当前位置：首页 > news >正文

JavaScript |（四）正则表达式 | 尚硅谷JavaScript基础实战

news 2025/8/2 23:05:55

学习来源：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版

文章目录

📚正则表达式
📚正则表达式字面量方式
📚字符串&正则表达式
- 🐇split()
- 🐇search()
- 🐇match()
- 🐇replace()
📚正则表达式相关语法
- 🐇量词
- 🐇检查开头结尾
- 🐇手机号规则
- 🐇邮件检测
- 🐇检测字符

📚正则表达式

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来。
创建正则表达式的对象：var 变量 = new RegExp("正则表达式","匹配模式");，例如：var reg = new RegExp("a");这个正则表达式可以来检查一个字符串中是否含有a。
使用typeof检查正则对象，会返回object。
test()方法：这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合则返回true，否则返回false。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//建一个忽略大小写的正则表达式对象，匹配模式为 "ab"var reg = new RegExp("ab","i");var str = "a";var result = reg.test(str);// "ab" 中的 "b" 并不在字符串 "a" 中存在，以下同理console.log(result);//falseconsole.log(reg.test("Ac"));//false</script></head><body></body>
</html>

📚正则表达式字面量方式

语法：var 变量 = /正则表达式/匹配模式
使用字面量的方式创建更加简单，使用构造函数创建更加灵活。
[]里的内容也是或的关系
- [ab] == a|b
- [a-z] 任意小写字母
- [A-Z] 任意大写字母
- [A-z] 任意字母
- [0-9] 任意数字
- [^ ] 除了

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//var reg = new RegExp("a","i");var reg = /a/i;console.log(reg.test("abc"));//true//创建一个正则表达式，检查一个字符串中是否有a或b//使用 | 表示或者的意思reg = /a|b|c/;//创建一个正则表达式检查一个字符串中是否有字母reg = /[A-z]/;//检查一个字符串中是否含有 abc 或 adc 或 aecreg = /a[bde]c/;//[^ ] 除了reg = /[^ab]/;reg = /[^0-9]/;//包含字母"a"，而不仅仅是数字console.log(reg.test("12a3456"));//true</script></head><body></body>
</html>

📚字符串&正则表达式

🐇split()

可以将一个字符串拆分为一个数组。
方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串。
这个方法即使不指定全局匹配，也会全都插分。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var str = "1a2b3c4d5e6f7";//根据任意字母来将字符串拆分var result = str.split(/[A-z]/);console.log(result);</script></head><body></body>
</html>

在这里插入图片描述

🐇search()

可以搜索字符串中是否含有指定内容。
如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1。
它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串。
serach()只会查找第一个，即使设置全局匹配也没用。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">str = "hello abc hello aec afc";//搜索字符串中是否含有abc 或 aec 或 afcresult = str.search(/a[bef]c/);console.log(result);//6</script></head><body></body>
</html>

🐇match()

可以根据正则表达式，从一个字符串中将符合条件的内容提取出来。
默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索。
我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容。
可以为一个正则表达式设置多个匹配模式，且顺序无所谓。
match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">str = "1a2a3a4a5e6f7A8B9C";result = str.match(/[a-z]/ig);console.log(result);</script></head><body></body>
</html>

在这里插入图片描述

🐇replace()

可以将字符串中指定内容替换为新的内容。
参数：
- 1.被替换的内容，可以接受一个正则表达式作为参数
- 2.新的内容
- 默认只会替换第一个

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">str = "1a2a3a4a5e6f7A8B9C";result = str.replace(/[a-z]/gi , "@_@");console.log(result);//1@_@2@_@3@_@4@_@5@_@6@_@7@_@8@_@9@_@</script></head><body></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">var str = prompt("请输出任意的内容:");str = str.split("").reverse().join("");alert(str);</script></head><body></body>
</html>

在这里插入图片描述

📚正则表达式相关语法

🐇量词

通过量词可以设置一个内容出现的次数
量词只对它前边的一个内容起作用
{n} 正好出现n次
{m,n} 出现m~n次
{m,} m次以上
+ 至少一个，相当于{1,}
* 0个或多个，相当于{0,}
? 0个或1个，相当于{0,1}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">// 创建一个正则表达式检查一个字符串中是否含有aaavar reg = /a{3}/;// false，"abbc"中不含有连续的三个'a'console.log(reg.test("abbc")); // true，"aaabbc"中含有连续的三个'a'console.log(reg.test("aaabbc")); reg = /ab{1,3}c/;// true，"abaabbc"中含有'a'后跟着1到3个'b'，再后是'c'console.log(reg.test("abaabbc")); reg = /a{3,}c/;// false，"aaabbc"中含有连续的三个'a'，但接着是'b'console.log(reg.test("aaabbc")); reg = /ab+c/;// true，"aaabbc"中含有'a'后跟着至少一个'b'，再后是'c'console.log(reg.test("aaabbc")); reg = /ab*c/;// true，"aaabbc"中含有'a'后跟着任意个'b'（可能是0个），再后是'c'console.log(reg.test("aaabbc")); // false，"aaabbc"中含有'a'，但后跟着不是0或1个'b'，再后是'c'reg = /ab?c/;console.log(reg.test("aaabbc")); </script></head><body></body>
</html>

🐇检查开头结尾

^ 表示开头
$ 表示结尾

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">reg = /^a/; //匹配开头的aconsole.log(reg.test("abcabca"));//truereg = /a$/; //匹配结尾的aconsole.log(reg.test("abcabca"));//true//如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式reg = /^a$/;console.log(reg.test("bbca"));//false</script></head><body></body>
</html>

🐇手机号规则

以1开头
第二位3-9任意数字
三位以后任意数字9个

^1 [3-9] [0-9]{9}$

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//创建一个正则表达式，用来检查一个字符串是否是一个合法手机号var Str = "13067890123";var Str2 = "12345678909"var phoneReg = /^1[3-9][0-9]{9}$/;console.log(phoneReg.test(Str));//trueconsole.log(phoneReg.test(Str2));//false</script></head><body></body>
</html>

🐇邮件检测

任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）
\w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;var email = "abc.hello@163.com";console.log(emailReg.test(email));//true</script></head><body></body>
</html>

🐇检测字符

. 表示任意字符
在正则表达式中使用\作为转义字符，\. 来表示.，\\ 表示\
注意：使用构造函数时，由于它的参数是一个字符串，而****是字符串中转义字符，如果要使用\则需要使用\\来代替。
\w：任意字母、数字，_ [A-z0-9_]
\W：除了字母、数字，_ [^A-z0-9_]
\d：任意的数字， [0-9]
\D：除了数字， [^0-9]
\s：空格
\S：除了空格
\b：单词边界
\B：除了单词边界

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//创建一个正则表达式检查一个字符串中是否含有单词childreg = /\bchild\b/;console.log(reg.test("hello child "));//接收一个用户的输入var str = prompt("请输入你的用户名:");//去除空格str = str.replace(/\s/g , "");console.log(str);//去除开头的空格//str = str.replace(/^\s*/, "");//去除结尾的空格//str = str.replace(/\s*$/, "");</script></head><body></body>
</html>

在这里插入图片描述

JavaScript |（四）正则表达式 | 尚硅谷JavaScript基础实战

学习来源：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版文章目录 📚正则表达式📚正则表达式字面量方式📚字符串&正则表达式🐇split()🐇search()🐇match()🐇replace()…...

编程日记 2023/8/5 15:01:45

docker-compose实现mysql主从复制

利用docker-compose实现mysql主从复制 1.首先创建挂载的目录以及配置信息 1.1 主 mkdir -p /opt/mysql/master/data mkdir -p /opt/mysql/master/config # 编写配置文件 vim /opt/mysql/master/config/my.cnfmy.cnf配置信息 [mysqld] usermysql default-storage-engineINNO…...

编程日记 2023/8/5 15:00:45

hbase基础

hbase安装 tar -zxvf hbase-2.4.11-bin.tar.gz -C . ln -s f hbase-2.4.11-bin hbasemv /export/server/hbase/lib/client-facing-thirdparty/slf4j-reload4j-1.7.33.jar /export/server/hbase/lib/client-facing-thirdparty/slf4j-reload4j-1.7.33.jar.bakvim conf/regionser…...

编程日记 2023/8/5 14:59:44

【GitOps系列】如何实施自动化渐进式交付？

文章目录前言自动渐进式交付概述自动渐进式交付准备创建生产环境创建 AnalysisTemplate访问生产环境安装Prometheus配置 Ingress-Nginx 和 ServiceMonitor验证 Ingress-Nginx 指标自动渐进式交付实战自动渐进式交付成功自动渐进式交付失败结语前言在实施金丝雀发布的过程中…...

编程日记 2023/8/5 14:58:40

【网络】网络层（IP协议）

目录一、基本概念二、协议头格式三、网段划分四、特殊的IP地址五、IP地址的数量限制六、私有IP地址和公网IP地址七、路由一、基本概念 IP协议：提供一种能力， 将数据从A主机送到B主机，（TCP协议：确保IP协议…...

编程日记 2023/8/5 14:57:36

Unity数字可视化学校_昼夜（一）

maya2022:链接：https://pan.baidu.com/s/1cvB438UKsv_tU37NsOaNow 3dmax软件合集:百度网盘请输入提取码 1180 1、 2、unity3d 导入插件 ： （1）UniStorm - Volumetric Clouds Sky 5.3.0.unitypackage （天气&…...

编程日记 2023/8/5 14:56:34

QWidget样式

1、设置边框样式： QWidget {font-family:Microsoft YaHei UI;background:#ffffff;/*border:3px solid rgba(207, 209, 208, 170);设置整体边框*/border-bottom: 3px solid rgba(207, 209, 208, 170);/*设置底部边框*/border-top: 3px solid rgba(207, 209, 208, 1…...

编程日记 2023/8/5 14:55:32

TypeScript基础学习

目录一、安装 1、下载国内镜像 2、安装 3、查看安装情况 4、使用例子二、变量声明 1、规则 2、声明的四种方式 3、注意 4、类型断言 5、类型推断 6、变量作用域三、基础类型（共11种） 1、Any 类型 2、Null 和 Undefined 3、never 类型…...

编程日记 2023/8/5 14:54:31

AOF日志：宕机了，Redis如何避免数据丢失

当服务器宕机后，数据全部丢失：我们很容易想到的一个解决方案是从后端数据库恢复这些数据，但这种方式存在两个问题：一是，需要频繁访问数据库，会给数据库带来巨大的压力；二是，这些数据…...

编程日记 2023/8/5 14:53:30

【编程】典型题目：寻找数组第K大数（四种方法对比）

【编程】典型题目：寻找数组第K大数（四种方法对比） 文章目录【编程】典型题目：寻找数组第K大数（四种方法对比）1. 题目2. 题解2.1 方法一：全局排序（粗暴）2.2 方法二&#…...

编程日记 2023/8/5 14:52:29

Vue3 对比 Vue2 的变化

Vue3 对比 Vue2 的变化 1.源码组织方式变化：使用 TS 重写 2.支持 compositionAPI，基于函数的 api，更灵活组织组件逻辑(Vue2 使用 options api) 3.响应式系统提升：Vue3 的响应式数据原理改成了 Proxy，可以监听动态新增删…...

编程日记 2023/8/5 14:51:28

harbor搭建

回到目录 Harbor 是 VMware 公司开源的企业级 Docker Registry 项目，其目标是帮助用户迅速搭建一个企业级的 Docker Registry 服务通俗的讲，harbor是一个私人镜像存储服务器 1 下载安装进入官网，下载一个离线安装包,harbor官网下载这…...

编程日记 2023/8/5 14:50:27

机器学习05-数据准备(利用 scikit-learn基于Pima Indian数据集作数据预处理)

机器学习的数据准备是指在将数据用于机器学习算法之前，对原始数据进行预处理、清洗和转换的过程。数据准备是机器学习中非常重要的一步，它直接影响了模型的性能和预测结果的准确性以下是机器学习数据准备的一些常见步骤： 数据收集&#xff…...

编程日记 2023/8/5 14:49:25

【枚举+trie+dfs】CF514 C

Problem - 514C - Codeforces 题意： 思路： 其实是trie上dfs的板题先把字符串插入到字典树中对于每次询问，都去字典树上dfs 注意到字符集只有3，因此如果发现有不同的字符，去枚举新的字符 Code： #in…...

编程日记 2023/8/5 14:48:24

【计算机视觉】BLIP：统一理解和生成的自举多模态模型

文章目录一、导读二、背景和动机三、方法3.1 模型架构3.2 预训练目标3.3 BLIP 高效率利用噪声网络数据的方法：CapFilt 四、实验4.1 实验结果4.2 各个下游任务 BLIP 与其他 VLP 模型的对比一、导读 BLIP 是一种多模态 Transformer 模型，主要针对以往的…...

编程日记 2023/8/5 14:47:23

【Ansible】Ansible自动化运维工具之playbook剧本搭建LNMP架构

LNMP 一、playbooks 分布式部署 LNMP1. 环境配置2. 安装 ansble3. 安装 nginx3.1 准备 nginx 相关文件3.2 编写 lnmp.yaml 的 nginx 部分3.3 测试 nginx4. 安装 mysql4.1 准备 mysql 相关文件4.2 编写 lnmp.yaml 的 mysql 部分4.3 测试 mysql5. 安装 php5.1 编写 lnmp.yaml 的 …...

编程日记 2023/8/5 14:46:22

Spring中的事务

一、为什么需要事务？ 事务定义将一组操作封装成一个执行单元（封装到一起），要么全部成功，要么全部失败。为什么要用事务？ 比如转账分为两个操作： 第一步操作： A 账户 -100 元…...

编程日记 2023/8/5 14:45:21

38 非法地址访问的 segment fault 的调试

前言在前面一篇文章 coredump 的生成和使用中, 我们看到 "测试用例2 - 非法地址访问" 产生了一个 segment fault 我们这里就来调试一下这个 segment fault 是怎么回事测试用例 #include "stdio.h"int main(int argc, char** argv) {int x 2; i…...

编程日记 2023/8/5 14:44:20

c++中c_str()的用法详解

c_str()就是将C的string转化为C的字符串数组！！！ C中没有string，所以函数c_str()就是将C的string转化为C的字符串数组，c_str()生成一个const char *指针，指向字符串的首地址。下文通过3段简单的代码比较分析…...

编程日记 2023/8/5 14:43:18

谈谈关于新能源汽车的话题

新能源汽车是指使用新型能源替代传统燃油的汽车，主要包括纯电动汽车、插电式混合动力汽车和燃料电池汽车等。随着环境污染和能源安全问题的日益突出，新能源汽车已经成为全球汽车行业的发展趋势。下面我们来谈谈关于新能源汽车的话题。首先，新…...

编程日记 2023/8/5 14:42:17

sqlserver 根据指定字符解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/7/27 1:33:21

css的定位（position）详解：相对定位绝对定位固定定位

在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...

编程新知 2025/7/30 14:25:57

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/7/24 7:13:48

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性高精度：24位分辨率&#xff0c…...

编程新知 2025/7/31 12:33:17

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...

编程新知 2025/8/1 21:54:56

C++：多态机制详解

目录一. 多态的概念 1.静态多态（编译时多态） 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1）.协变 2）.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/7/30 6:47:33

C++.OpenGL （20/64）混合（Blending）

混合（Blending）透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/7/6 20:05:42

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...

编程新知 2025/8/2 18:18:03

三分算法与DeepSeek辅助证明是单峰函数

前置单峰函数有唯一的最大值，最大值左侧的数值严格单调递增，最大值右侧的数值严格单调递减。单谷函数有唯一的最小值，最小值左侧的数值严格单调递减，最小值右侧的数值严格单调递增。三分的本质三分和二分一样都是通过不断缩…...

编程新知 2025/7/31 13:32:41

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三，HubSpot宣布已构建与ChatGPT的深度集成，这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋，但同时也存在一些关于数据安全的担忧。许多网络声音声称，这对SaaS应用程序和人工智能而言是一场范式转变。但向任何技…...

编程新知 2025/8/1 5:40:36

文章目录

📚正则表达式

📚正则表达式字面量方式

📚字符串&正则表达式

🐇split()

🐇search()

🐇match()

🐇replace()

📚正则表达式相关语法

🐇量词

🐇检查开头结尾

🐇手机号规则

🐇邮件检测

🐇检测字符

相关文章：