JavaScript 正则表达式

简介: 创建正则的两种方式:创建字面量正则表达式,使用//包裹let reg = /\w/复制代码创建正则表达式对象,使用new RegExp()let reg = new RegExp(/\w/)

创建正则的两种方式:


  1. 创建字面量正则表达式,使用//包裹
let reg = /\w/
复制代码
  1. 创建正则表达式对象,使用new RegExp()
let reg = new RegExp(/\w/)
复制代码


选择符 |


"I" 左右两边匹配到一个就算是true

let str = '张三:010-1568413,李四:020-1586640'
let reg = /(010|020)\-\d{7,8}/
console.log(reg.test(str)); // true
复制代码


转义


在字符串中\d和d是一样的

console.log('\d' === 'd') // true
复制代码

在创建字面量的时候直接使用//创建,或者在字符串中转义

let str = '123.abc'
let reg = "\\d+\\.\\w+"
let reg2 = /\d+\.\w+/
console.log(str.match(reg));
console.log(str.match(reg2));
复制代码

1682522578(1).png


边界


以^开始,以$结束,可用于检测网址开头和文件后缀

^开始边界

let str = 'http:www.easyremember.cn'
let reg = /^https?:www\..+/
console.log(reg.test(str));  // true
复制代码

$结束边界

let str = 'C://Users/All Users/abc.txt'
let str2 = 'C://Users/All Users/abc.log'
let reg = /\.txt$/
console.log(reg.test(str));  // true
console.log(reg.test(str2));  // false
复制代码


元字符


\w:所有的字母、数字、下划线

\W:所有的非数字、字母、下划线

\d:所有的数字

\D:所有的非数字

\s:所有的空白字符,换行、空格等

\S:所有的非空白字符

.:除换行以外的任意字符

模式修饰符

i:不区分大小写

g:全局匹配

y:从lastIndex开始匹配

u:处理UTF-16编码字符

m:多行处理

s:单行处理,忽略换行符


原子表


原子表 说明
[] 只匹配其中的一个原子
[^] 只匹配"除了"其中字符的任意一个原子
[0-9] 匹配0-9任何一个数字
[a-z] 匹配小写a-z任何一个字母
[A-Z] 匹配大写A-Z任何一个字母

Tips: \d == [0-9]

\D == [^0-9]


原子组


使用()包裹

引用分组:引用之前原子组匹配到的内容,\1\2……

let str = 'abc123.c123'
let reg = /([a-z]\d+)\.\1/g
console.log(str.match(reg));  // ["c123.123"]
复制代码

分组别名

为不同分组命名,使用?<>命名,使用$<>引用

let str = 'abc123.c123'
let reg = /(?<init>[a-z]\d+)\.\1/g
// console.log(str.match(reg));
console.log(str.replace(reg, `<p>$<init></p>`));
复制代码

1682522617(1).png


重复


+:重复一次或多次

*:重复零次或多次

?:重复零次或一次

{n}:重复n次

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

{n,m}:重复n次到m次

let str = '1234'
let reg = /\d/
let reg2 = /\d+/let reg3 = /^\d{1,2}$/
console.log(str.match(reg));
console.log(str.match(reg2));
console.log(reg3.test(str));
复制代码

1682522643(1).png


字符方法


search

返回要搜索内容的索引,没有返回-1

let str = 'abcdef'
console.log(str.search('ef'));// 4
console.log(str.search(/\w/));  // 0
console.log(str.search('efg'));  // -1
复制代码

match

使用字符串或者正则表达式匹配,返回匹配的内容,匹配不到返回null

let str = 'abcdef'console.log(str.match('ef'));  // ef
console.log(str.match(/\w+/));  // abcdef
复制代码

matchAll:

返回一个可迭代对象

let reg = /<(h[1-6])>[\s\S]+<\/\1>/g
let str = `<h1>前段小枫</h1>    
    <h2>blog.easyremember.cn</h2>`
for (let s of str.matchAll(reg)) {  
  console.log(s);
}
复制代码

1682522674(1).png

split:

使用字符分割字符串

let str = 'abc/def/123'
console.log(str.split('/'));
// ["abc","def","123"]
复制代码

replace

替换字符为

let str = 'abc/def/123'  
console.log(str.replace(/\W/g, '-'));  
// abc-def-123
复制代码


正则方法


test

检测字符串是否符合要求,返回值是一个布尔值

exec

不使用全局匹配与match相同,使用全局匹配会匹配完全部字符串,返回结果是一个可迭代对象

let reg = /<(h[1-6])>[\s\S]+<\/\1>/g
let str = `<h1>前段小枫</h1>
  <h2>blog.easyremember.cn</h2>`
console.log(reg.exec(str));
console.log(reg.exec(str));
复制代码

1682522702(1).png


断言


?=exp

相当于if,但是是后置的例如

<main>  中国努力建设有中国特色社会主义</main>
<script type="text/javascript">  
  let reg = /中国(?=特色)/  
  let str = document.querySelector('main')  
  str.innerHTML = str.innerHTML.replace(reg, '<a href="">中国</a>')
</script>
复制代码

1682522727(1).png

?<=exp

前置断言

let reg = /(?<=有)中国/
let str = document.querySelector('main')
str.innerHTML = str.innerHTML.replace(reg, '<a href="">中国</a>')
复制代码

效果跟前面的?=效果是一样的

?!exp

后面不能出现exp匹配到的内容

?<!exp

前面不能出现exp匹配到的内容

相关文章
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
110 1
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript 正则表达式
JavaScript 正则表达式
18 3
|
3月前
|
JavaScript 前端开发
js中通过正则表达式验证邮箱是否合法
这篇文章提供了一个JavaScript示例,通过正则表达式在网页上验证用户输入的邮箱地址是否合法,并给出了相应的提示信息。
js中通过正则表达式验证邮箱是否合法
|
5月前
|
机器学习/深度学习 JavaScript 前端开发
JavaScript中的正则表达式详细展示
JavaScript中的正则表达式详细展示
39 6
|
5月前
|
JavaScript 前端开发 测试技术
JavaScript进阶-正则表达式基础
【6月更文挑战第21天】正则表达式是处理字符串的利器,JavaScript中广泛用于搜索、替换和验证。本文讲解正则基础,如字符匹配、量词和边界匹配,同时也讨论了常见问题和易错点,如大小写忽略、贪婪匹配,提供代码示例和调试建议。通过学习,开发者能更好地理解和运用正则表达式解决文本操作问题。
47 1
|
4月前
|
JavaScript 数据安全/隐私保护
js 常用正则表达式【实用】
js 常用正则表达式【实用】
26 0
|
4月前
|
存储 JavaScript 前端开发
|
5月前
|
XML JavaScript 数据安全/隐私保护
一篇文章讲明白js常用js正则表达式大全
一篇文章讲明白js常用js正则表达式大全
35 0
|
6月前
|
前端开发 JavaScript
前端 js 经典:正则表达式
前端 js 经典:正则表达式
56 2
|
6月前
|
XML JavaScript 前端开发
【JavaScript | RegExp】正则表达式
【JavaScript | RegExp】正则表达式
71 4