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

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

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

在这里插入图片描述

文章目录

JavaScript 正则表达式详解

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

什么是正则表达式🤔

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

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

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

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

1. 字面量语法

const 规则变量名 =/表达式/;

2. 常用匹配方法

test() 方法🍋‍🟩

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

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

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

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

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

1. 元字符

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

边界符

用于指定字符的位置:

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

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

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

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

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

示例:

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

用于匹配一类字符:

  1. []:匹配字符集合中的任意一个字符
console.log(/[abc]/.test("andy"));// true(包含"a") console.log(/[abc]/.test("die"));// false(不包含a、b、c中任何一个)
  1. 连字符 -:表示一个范围
console.log(/^[a-z]$/.test("p"));// true(小写字母) console.log(/^[A-Z]$/.test("B"));// true(大写字母) console.log(/^[0-9]$/.test("2"));// true(数字)
  1. 取反符号 ^:在 [] 内使用,表示匹配除指定字符外的任意字符
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)

示例:

// 忽略大小写 console.log(/a/i.test("A"));// true console.log(/^java$/i.test("JAVA"));// true// 全局替换const str2 ="我草,整个沧南市都因林七夜一人而存在,我草";const ret2 = str2.replace(/我草/g,"**");// 替换所有匹配项 console.log(ret2);// "**,整个沧南市都因林七夜一人而存在,**"

简单示例🍂

表单验证

// 验证QQ号(从10000开始)const qqReg =/^[1-9][0-9]{4,}$/;// 验证日期格式(yyyy-mm-dd)const dateReg =/^\d{4}-\d{1,2}-\d{1,2}$/;

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

在这里插入图片描述

Read more

前端通用AI rules定义,适用于Cursor ,Trae,Qorder等AI开发工具

前端通用 AI Rules 定义 (适用于 Cursor、Trae、Qoder、Windsurf、Zed + AI、Codeium、Copilot 等几乎所有主流 AI 代码助手) 以下内容是 2025–2026 年在前端圈被大量验证、反复迭代后相对好用的“通用前端 Rules”模板。 你可以直接复制粘贴到 Cursor 的 Rules / Custom Instructions / 项目 .cursor/rules.md 中,或者 Trae、Qoder 等工具的类似位置。 推荐的通用前端 Rules 结构(2026 年主流写法) # 前端通用 Rules - 适用于 React / Vue

前端网页开发学习(HTML+CSS+JS)有这一篇就够

前端网页开发学习(HTML + CSS + JS)——真的有这一篇就够了 这是一篇极简但完整的实战向学习路径,目标是: 让你在1–3个月内(每天2–4小时)从零到能独立完成中高级响应式网页、常见交互效果和动态页面。 一、先明确目标与学习顺序(非常重要) 最有效的顺序(不要打乱): 1. HTML 基础 + 语义化(1周) 2. CSS 基础 → 布局 → 现代写法(2–4周) 3. CSS 进阶 + 响应式 + 常见特效(2–3周) 4. JavaScript 基础 + DOM 操作(3–4周) 5. JavaScript 进阶 + 事件 + 异步(3–

LiuJuan20260223Zimage镜像结构解析:/root/workspace目录布局、log路径与模型权重存放规范

LiuJuan20260223Zimage镜像结构解析:/root/workspace目录布局、log路径与模型权重存放规范 如果你正在使用基于Xinference部署的LiuJuan20260223Zimage文生图模型服务,并且通过Gradio界面来生成图片,那么你可能会好奇:这个镜像内部到底是怎么组织的?日志文件存在哪里?模型权重又放在哪个目录?了解这些,不仅能帮你更好地排查问题,还能让你对服务的运行状态了如指掌。 这篇文章,我们就来深入解析一下LiuJuan20260223Zimage镜像的内部结构。我会带你从零开始,搞清楚/root/workspace这个核心目录的布局,找到关键的日志文件,并理解模型权重的存放规范。无论你是想查看服务启动状态,还是进行更深度的定制,这篇文章都能给你清晰的指引。 1. 镜像核心:/root/workspace目录全解析 /root/workspace是整个LiuJuan20260223Zimage镜像的工作核心,所有与服务运行相关的文件、日志、配置和模型都存放在这里。理解它的结构,是管理和使用这个服务的第一步。 1.1 目录结构一览

使用 Trae IDE 一键将 Figma 转为前端代码

在现代前端开发中,从设计稿到可用页面的交付往往需要大量重复劳动:切图、手写样式、布局调整……而借助 MCP Server - Figma AI Bridge,我们可以将 Figma 设计稿自动转换成整洁的 HTML/CSS/JS 代码,并立即生成可预览的网页。一键化、傻瓜式操作,让设计交付效率跃升。 本文测试使用的系统环境如下: * Trae IDE 版本:2.4.5 * macOS 版本:14.7 * Node.js 版本:24.6.0 * npx 版本:11.5.2 * Python 版本:3.13.3