JavaScript入门到精通二十四(正则表达式、元字符、修饰符)

一.什么是正则表达式?

用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。

通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式

正则表达式在JavaScript中的使用场景:

例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中

文(匹配),比如用户名:/^a-z0-9_-3,16$/

过滤掉页面内容中的一些敏感词(替换 ),或从字符串中获取我们想要的特定部分(提取)等

二.正则表达式有什么作用?

1.表单验证(匹配) 2.过滤敏感词(替换) 3.字符串中提取我们想要的部分(提取)

三.正则表达式语法

1.定义正则表达式语法:

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

其中/ /是正则表达式字面量

2.判断是否有符合规则的字符串:

**test()**方法:用来查看正则表达式与指定的字符串是否匹配

javascript 复制代码
regObj.test(被检测的字符串)
javascript 复制代码
<body>
  <script>
    const str = '好好学习,天天向上'
    const reg = /学习/
    console.log(reg.test(str));
  </script>
</body>

3.检索(查找)符合规则的字符串:

**exec()**方法:在一个指定字符串中执行一个搜索匹配

javascript 复制代码
regObj.exec(被检测字符串)

如果匹配成功,exec()方法返回一个数组,否则返回null

javascript 复制代码
<body>
  <script>
    const str = '好好学习,天天向上'
    const reg = /学习/
    console.log(reg.exec(str));
  </script>
</body>

四.元字符

是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。

比如:规定用户只能输入英文26个英文字母,普通字符的话abcdefghijklm.....

但是换成元字符写法:a-z

正则测试工具:在线正则表达式测试

元字符分类:

1.边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)

用来提示字符所处的位置,主要有两个字符

^:表示匹配行首的文本(以谁开始)

$:表示匹配行尾的文本(以谁结束)

如果^和$在一起,表示必须是精确匹配。

2.量词(表示重复次数)

量词用来设定某个模式出现的次数

* 重复零次或更多次

  • 重复一次或更多次

? 重复零次或一次

{n} 重复n次

{n,} 重复n次或更多次

{n,m} 重复n到m次

3.字符类(比如\d表示0~9)

1. 匹配字符集合

后面的字符串只要包含abc中任意一个字符,都返回true(abc只选一个)

javascript 复制代码
<body>
  <script>
    console.log(/^[abc]$/.test('ab')); //false
    console.log(/^[abc]{2}$/.test('ab')); //true
  </script>
</body>

2. 里面加上 - 连字符

使用连字符-表示一个范围(a-z只选一个)

javascript 复制代码
console.log(/^[a-z]$/.test('c')) //true

比如:

a-z表示a到z26个英文字母都可以

a-zA-Z 表示大小写都可以0-9表示0~9的数字都可以

腾讯QQ号:^1-90-9{4,}$ (腾讯QQ号从10000开始)

3. 里面加上^取返符号

比如:a-z匹配除了小写字母以外的字符,注意要写到中括号里面

  1. .匹配除换行符之外的任何单个字符

5.预定义:某些常见模式的简写方式

\d 匹配0-9之间的任一数字,相当于0-9

\D 匹配所有0-9以外的字符,相当于\^O-9

\w 匹配任意的字母、数字和下划线,相当于A-Za-z0-9

\W 除所有字母、数字和下划线以外的字符,相当于\^A-Za-z0-9_

\s 匹配空格(包括换行符、制表符、空格符等),相等于\\t\\r\\n\\w\\f

\S 匹配非空格的字符,相当于\^\\t\\r\\n\\v\\f

五.修饰符

修饰符约束正则执行的某些细节行为,如是否区分大小写、是否支持多行匹配等

语法:

javascript 复制代码
/表达式/修饰符

1.i是单词ignore的缩写,正则匹配时字母不区分大小写

javascript 复制代码
<body>
  <script>
    console.log(/^java$/.test('java')); //true
    console.log(/^java$/.test('JAVA')); //false
    console.log(/^java$/i.test('JAVA')); //true
  </script>
</body>

2.g是单词global的缩写,匹配所有满足正则表达式的结果

3.replace替换:

javascript 复制代码
字符串.replace(/正则表达式/,'替换的文本')
javascript 复制代码
<body>
  <script>
    const str = 'java是一门编程语言'
    const rep = str.replace(/java/i,'js')
    console.log(rep);
  </script>
</body>
相关推荐
西索斯coding1 小时前
Grok 4.7 调用一直 401 怎么办?不是 Key 过期,是 Authorization 头格式问题——排查全流程 + 修复示例
服务器·开发语言·ai·php
葡萄城技术团队2 小时前
在 SpreadJS 里新增右键菜单,把业务动作放到用户手边
前端
大明二代2 小时前
从 RAG 到有记忆的 Agent:Mastra Memory 与 PostgreSQL 实战
前端·javascript·人工智能
deli0072 小时前
代码截图一键出 PNG 实测:3 种窗口风格,长行超 95 字符会被裁
前端
大哥43092 小时前
慢 ≠ 挂:AI 搜索降级判定的设计,与一次 reasoning 模型排查复盘
前端
SEO_juper2 小时前
hreflang 审计工具:外贸多语言站谷歌SEO的隐性杀手
开发语言·人工智能·爬虫·python·seo
UaoN2 小时前
作为全栈开发者,为什么看到 Shopify 回归原生,我依然选择 React Native
前端·后端
WJ.Polar2 小时前
final、单例类、枚举类、抽象类、接口
java·开发语言
PBitW2 小时前
行内编辑,前端如何兜底?😭😭😭
前端·面试