前端 js 经典:正则表达式

简介: 前端 js 经典:正则表达式

1. 作用

正则表达式的作用就是匹配一个字符串

打比方,假如你要判断一个 str 是不是等于 "abc", 可以通过 str == "abc" ? true : false 来判断,匹配返回 true,不匹配返回 false,那如果,要判断是否等于"abc"其中 "abc" 无论哪一个字母是大写都判断为匹配,返回 true,那要怎么处理,不可能写成,str == "abc" || str == "Abc" || str == "aBc" || ... 这样,就很繁琐了,这就需要用到正则表达式,"abc"大小写都匹配通过正则表达式判断为:/^(a|A)(b|B)(c|C)$/, 通过正则的test()方法,就可以满足需求了 /^(a|A)(b|B)(c|C)$/.test(str)

2. 定义

// ^: 以什么开始 $: 以什么结束
/^$/;

3. 方法

// demo
let reg = /^y[a-zA-Z0-9_]*coder$/;
let str = "yqcoder";
 
// 正则的方法
// 满足匹配返回true,否则false
reg.test(str); // true
// 返回匹配正则的值,否则返回null
reg.exec(str); // ['yqcoder', index: 0, input: 'yqcoder', groups: undefined]
 
// 字符串匹配正则方法
// 替换满足正则的字符串
str.replace(reg, "super"); // 'super'
// 返回匹配的值
str.match(reg); // ['yqcoder', index: 0, input: 'yqcoder', groups: undefined]

4. 正则字符

[0-9] or \d: 单个数字

\D : 非数字

\W : 非 0-9a-zA-Z

\S : 非空白字符

. : 非换行符\n 的所有字符

[a-zA-Z0-9_] 或 \w: 包括下划线在内的字母数字

\s: 空白字符(空格 ,制表符\t,换页符\f,换行符\n,回车符\r)

5. 次数

+                 : 至少1次

?                 : 可有可无

*                  : 0-无穷次

{x}               : 指定x次

{min, }         : 至少min次

{0, max}      : 最多max次

{min, max}  : min到max次

6. 需要转义的特殊字符

* . ? + ^ $ | \ / [ ] ( ) { }

7. 操作符

\t 制表符 ('\u0009')

\n 换行符 ('\u000A')

\r 回车符 ('\u000D')

\f 换页符 ('\u000C')

\a 响铃符 ('\u0007')

\e 转义符 ('\u001B')

8. 常用正则

// 正整数:人数,排名
/^\d+$/;
// 正浮点数:金额
/^\d+(\.\d+)?$/;
// 汉字
/^[\u4e00-\u9fa5]{0,}$/;
// 英文和数字
/^[A-Za-z0-9]+$/;
// 邮箱
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
// 手机
/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
// 网址
/[a-zA-z]+://[^\s]*/
// 电话号码
/^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$/;
// 身份证号(15位、18位数字)
/^\d{15}|\d{18}$/;
// 密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线)
/^[a-zA-Z]\w{5,17}$/;


目录
相关文章
|
10月前
|
前端开发
前端使用正则表达式提取经纬度 度分秒值
前端使用正则表达式提取经纬度 度分秒值
252 14
前端使用正则表达式提取经纬度 度分秒值
|
11月前
|
JavaScript 前端开发 API
|
10月前
|
前端开发
前端使用正则表达式检查是否为十六进制字符串
前端使用正则表达式检查是否为十六进制字符串
241 6
|
11月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
409 8
|
11月前
|
JavaScript 前端开发 容器
|
12月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
11527 23
|
11月前
|
JavaScript 前端开发
|
11月前
|
存储 JavaScript 前端开发
|
11月前
|
移动开发 JavaScript 前端开发
|
11月前
|
存储 JavaScript 前端开发

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    855
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    382
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    298
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    267
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    388
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    574
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    562
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    183
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    505
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    339