【Java Web学习 | 第14篇】JavaScript(8) -正则表达式


🌈 个人主页: Hygge_Code
🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络
💫 个人格言: "既然选择了远方,便不顾风雨兼程"

文章目录

JavaScript 正则表达式详解

正则表达式是处理字符串的强大工具,在 JavaScript 中被广泛应用于表单验证、文本处理和数据提取等场景。本文将从正则表达式的基本概念出发,详细介绍其语法规则和实际应用方法。

什么是正则表达式🤔

正则表达式是用于匹配字符串中字符组合的模式,在 JavaScript 中以对象形式存在。它主要用于:

  • 验证表单输入(如限制只能输入特定字符)
  • 过滤文本中的敏感词
  • 从字符串中提取特定信息

JavaScript 正则表达式的定义与使用🥝

在 JavaScript 中,定义正则表达式有两种方式:

1. 字面量语法

javascript 复制代码
const 规则变量名 = /表达式/;

2. 常用匹配方法

test() 方法🍋‍🟩

用于检测字符串是否符合正则表达式规则,返回布尔值:

javascript 复制代码
const find = /前端/;
const str = "我们在学习前端,希望突击前端赶大项目的进度";
console.log(find.test(str)); // true(字符串中包含"前端")
exec() 方法🍋‍🟩

在字符串中执行匹配搜索,返回匹配结果数组或 null:

javascript 复制代码
console.log(find.exec(str)); // 返回包含"前端"的数组

正则表达式的核心组成部分🐦‍🔥

1. 元字符

元字符是具有特殊含义的字符,可分为以下几类:

边界符

用于指定字符的位置:

  • ^:表示匹配行首的文本(以指定字符开始)
  • $:表示匹配行尾的文本(以指定字符结束)

^$ 一起使用时,表示精确匹配:

javascript 复制代码
console.log(/^哈$/.test("哈")); // true(精确匹配单个"哈")
console.log(/^哈$/.test("哈哈")); // false(不是单个"哈")
量词

用于指定字符出现的次数:

  • *:重复 0 次或更多次
  • +:重复 1 次或更多次
  • ?:重复 0 次或 1 次
  • {n}:重复 n 次
  • {n,}:重复 n 次或更多次
  • {n,m}:重复 n 到 m 次(注意逗号两侧不能有空格)

示例:

javascript 复制代码
console.log(/^哈{2}$/.test("哈哈")); // true(正好出现2次)
console.log(/^哈{2,4}$/.test("哈哈哈哈")); // true(出现4次,在2-4范围内)
console.log(/^哈{2,}$/.test("哈哈哈哈")); // true(出现4次,不少于2次)
字符类

用于匹配一类字符:

  1. []:匹配字符集合中的任意一个字符
javascript 复制代码
console.log(/[abc]/.test("andy")); // true(包含"a")
console.log(/[abc]/.test("die")); // false(不包含a、b、c中任何一个)
  1. 连字符 -:表示一个范围
javascript 复制代码
console.log(/^[a-z]$/.test("p")); // true(小写字母)
console.log(/^[A-Z]$/.test("B")); // true(大写字母)
console.log(/^[0-9]$/.test("2")); // true(数字)
  1. 取反符号 ^:在 [] 内使用,表示匹配除指定字符外的任意字符
javascript 复制代码
console.log(/^[^a-zA-Z0-9]$/.test("!")); // true(非字母数字)
  1. 预定义字符类:常见模式的简写
    • \d:匹配 0-9 之间的任意数字(相当于 [0-9]
    • \D:匹配非数字(相当于 [^0-9]
    • \w:匹配字母、数字和下划线(相当于 [A-Za-z0-9_]
    • \W:匹配非字母、数字和下划线
    • \s:匹配空格(包括换行符、制表符等)
    • \S:匹配非空格字符

2. 修饰符

修饰符用于约束正则表达式的执行行为:

  • i:忽略大小写(ignore)
  • g:全局匹配(global)

示例:

javascript 复制代码
// 忽略大小写
console.log(/a/i.test("A")); // true
console.log(/^java$/i.test("JAVA")); // true

// 全局替换
const str2 = "我草,整个沧南市都因林七夜一人而存在,我草";
const ret2 = str2.replace(/我草/g, "**"); // 替换所有匹配项
console.log(ret2); // "**,整个沧南市都因林七夜一人而存在,**"

简单示例🍂

表单验证

javascript 复制代码
// 验证QQ号(从10000开始)
const qqReg = /^[1-9][0-9]{4,}$/;

// 验证日期格式(yyyy-mm-dd)
const dateReg = /^\d{4}-\d{1,2}-\d{1,2}$/;

如果我的内容对你有帮助,请 点赞 , 评论 , 收藏 。创作不易,大家的支持就是我坚持下去的动力!

相关推荐
草帽lufei1 小时前
解锁AI新维度:深入体验Google Antigravity的Gemini3模型
前端·ai编程·gemini
CoolerWu1 小时前
TRAE SOLO实战:一个所见即所得的笔记软体
前端·trae
没落英雄2 小时前
简单了解 shadowDom
前端·html
天才熊猫君2 小时前
vue3 基于 el-table 的无限滚动自定义指令实现
前端·javascript
陳陈陳2 小时前
AIGC 时代,用自然语言操作数据库:SQLite + LLM 的轻量级实践
前端·数据库·python
星迷朦龙2 小时前
使用剪贴版复制网页内容
前端
BBB努力学习程序设计2 小时前
Bootstrap图片:让图片展示更优雅、更专业
前端·html
玉宇夕落2 小时前
深入理解 async/await:从原理到实战,彻底掌握 JavaScript 异步编程
前端
拽着尾巴的鱼儿2 小时前
工具篇:Window10 增加虚拟内存&Idea项目启动内存配置
java·ide·intellij-idea