【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

Leaflet赋能:WebGIS视角下的省域区县天气可视化实战攻略

Leaflet赋能:WebGIS视角下的省域区县天气可视化实战攻略

目录 前言 一、空间数据基础 1、省域空间检索 2、区县天气信息检索 二、天气数据简介 1、省域天气数据获取 2、区县名称不一致 三、SpringBoot后台实现 1、Java后台天气数据查询 2、控制层实现 四、WebGIS前端实现 1、气温颜色及图例初始化 2、气温数据展示实现 五、成果展示 1、湖南省天气展示 2、西藏自治区天气展示 六、总结 前言         在当今数字化时代,地理信息系统(GIS)技术与Web技术的深度融合,为地理信息的可视化展示带来了前所未有的机遇。WebGIS作为一种基于网络的地理信息系统,能够将地理空间数据以直观、便捷的方式呈现给用户,极大地拓展了地理信息的应用范围和价值。而天气数据作为与人们生活息息相关的重要地理信息之一,其可视化展示对于气象预报、灾害预警、交通规划、农业生产等诸多领域都有着极为重要的意义。本文将从WebGIS的视角出发,

前端SSG:静态站点生成的艺术

前端SSG:静态站点生成的艺术 毒舌时刻 前端SSG?这不是给博客用的吗? "我的应用需要动态内容,SSG不适合"——结果首屏加载慢,SEO差, "SSG就是静态HTML,太简单了"——结果构建时间长,数据更新困难, "我用SSR就够了"——结果服务器压力大,响应慢。 醒醒吧,SSG不是简单的静态HTML,而是一种现代化的前端架构! 为什么你需要这个? * 性能优异:静态文件加载快,无需服务器渲染 * SEO友好:所有内容都是静态的,搜索引擎容易收录 * 部署简单:可以部署到任何静态文件服务器 * 安全性高:没有服务器端代码,减少攻击面 反面教材 // 反面教材:纯静态HTML <!DOCTYPE html> <html> <head>

Backend For Frontend(BFF)架构介绍(为前端量身定制的后端服务)由前端维护

文章目录 * Backend For Frontend(BFF):为前端量身定制的后端服务 * 一、痛点:微服务架构下的前端困境 * 二、什么是 BFF? * 三、BFF 的核心价值 * 四、架构实践要点 * 典型部署流程 * 技术选型建议 * 与 API Gateway 的区别 * 五、何时该用 BFF?何时慎用? * ✅ 推荐场景 * ⚠️ 谨慎场景 * 六、写在最后 Backend For Frontend(BFF):为前端量身定制的后端服务 当微服务遇上多端开发,前端开发者是否还在为“拼接口”而深夜加班?BFF 可能是你的破局关键。 一、痛点:微服务架构下的前端困境 在微服务盛行的今天,一个简单的商品详情页可能需要调用: * 商品服务(基础信息) * 评价服务(

前端WebSocket实战:别再只会用HTTP了

前端WebSocket实战:别再只会用HTTP了

前端WebSocket实战:别再只会用HTTP了 毒舌时刻 这代码写得跟网红滤镜似的——仅供参考。 各位前端同行,咱们今天聊聊前端WebSocket。别告诉我你还在用轮询获取实时数据,那感觉就像每隔一分钟就去敲门问"好了没"——烦人又低效。 为什么你需要WebSocket 最近看到一个项目,实时聊天功能用轮询实现,每秒请求一次服务器,我差点当场去世。我就想问:你是在做实时通信还是在做DDoS攻击? 反面教材 // 反面教材:轮询获取数据 function startPolling() { setInterval(async () => { const response = await fetch('/api/messages'); const messages = await response.json(); updateMessages(messages); }, 1000); // 每秒请求一次 } // 服务器:求放过 // 带宽:我扛不住了 毒舌点评: