【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

一文了解Blob文件格式,前端必备技能之一

一文了解Blob文件格式,前端必备技能之一

文章目录 * 前言 * 一、什么是Blob? * 二、Blob的基本特性 * 三、Blob的构造函数 * 四、常见使用场景 * 1. 文件下载 * 2. 图片预览 * 3. 大文件分片上传 * 四、Blob与其他API的关系 * 1. File API * 2. FileReader * 3. URL.createObjectURL() * 4. Response * 五、性能与内存管理 * 六、实际案例:导出Word文档 * 七、浏览器兼容性 * 八、总结 前言 最近在项目中需要导出文档时,我首次接触到了 Blob 文件格式。作为一个前端开发者,虽然经常听到 "Blob" 这个术语,但对其具体原理和应用场景并不十分了解。经过一番研究和实践,

万象视界灵坛效果展示:神谕勋章墙按‘解析准确率’‘响应速度’‘语义丰富度’三维度评级

万象视界灵坛效果展示:神谕勋章墙按"解析准确率""响应速度""语义丰富度"三维度评级 1. 平台概览 万象视界灵坛(Omni-Vision Sanctuary)是一款基于OpenAI CLIP技术的高级多模态智能感知平台。它将复杂的视觉语义识别过程转化为直观有趣的交互体验,采用独特的16-Bit像素风格设计,为用户带来全新的视觉资产分析方式。 平台核心特点: * 采用CLIP-ViT-L/14多模态预训练模型 * 支持零样本识别(Zero-shot) * 实时计算图像与文本的语义相似度 * 提供毫秒级特征向量提取能力 2. 神谕勋章墙评级体系 2.1 三维度评级标准 万象视界灵坛独创"神谕勋章墙"系统,从三个关键维度对识别结果进行可视化评级: 1. 解析准确率(Accuracy) * 衡量模型识别结果与真实语义的匹配程度 * 评级范围:青铜(60-70%)→白银(70-80%)→黄金(

【AI赋能】MCP+Skill能力下的前端JS逆向自动化落地(附工具)

【AI赋能】MCP+Skill能力下的前端JS逆向自动化落地(附工具)

项目地址 https://github.com/Fausto-404/js-reverse-automation--skill js-reverse-automation--skill 结合chrome-devtools-mcp的能力并加上Skill的规范,实现JSRPC+Flask+autoDecoder方案的前端JS逆向自动化分析,提升JS逆向的效率 适用场景 * 需要快速落地前端签名/加密参数逆向 * 需要将js逆向逻辑封装为可复用的代码 * 需要与 Burp 配合进行抓包、改包 流程设计思路 针对js逆向中常用的远程调用法进行js逆向(如JSRPC+Mitmproxy、JSRPC+Flask等)中,初始配置阶段中面对的定位加密函数、编写注册代码、编写python代码等繁琐操作,通过引入AI的MCP和Skill技术进行赋能,让AI自动完成函数发现与注册代码生成,最终实现从“半自动”到“高自动”的跨越,人员全程只需下方指令,并最终配置一下burp即可完成JS逆向的全流程。 核心能力 * 基于 MCP 连接真实浏览器,触发并跟踪js加密/签名链路

Youtu-VL-4B-Instruct源码实战:基于Gradio自定义组件扩展WebUI的图片批处理功能

Youtu-VL-4B-Instruct源码实战:基于Gradio自定义组件扩展WebUI的图片批处理功能 1. 引言:从单张到批量,解放生产力的新思路 如果你用过Youtu-VL-4B-Instruct的WebUI,肯定体验过它的强大——上传一张图片,问几个问题,模型就能给出精准的回答。无论是识别图片里的文字,还是描述复杂的场景,这个40亿参数的多模态模型都表现得相当不错。 但不知道你有没有遇到过这样的场景:手头有几十张产品图片需要批量添加描述,或者有一堆文档截图需要统一提取文字。这时候,一张一张上传、等待、再上传,效率实在太低了。每次操作都要重复“上传-等待-复制结果”的流程,不仅耗时,还容易出错。 这就是我们今天要解决的问题。原生的WebUI界面虽然友好,但在批量处理方面存在明显短板。它就像一家只接受堂食的餐厅,味道很好,但没法做外卖。而我们需要的是能同时处理多份订单的中央厨房。 好消息是,Gradio框架给了我们足够的灵活性。通过深入源码,我们可以自己动手,为这个WebUI增加一个“图片批处理”功能。想象一下,一次性上传几十张图片,设置好统一的提问模板,然后去喝杯咖