1. Toy模板网首页
  2. > Toy博客

前端系列：正则表达式RegExp详解

8月前 作者：Code技术分享 分类：Toy博客 阅读(55) 违法举报

这篇具有很好参考价值的文章主要介绍了前端系列：正则表达式RegExp详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

正则创建

  • 字面量创建

    const str = 'asdf123sds3234'
const regexp = /\d+/g
const res = str.match(regexp)
console.log(res) //['123', '3234']

  • 构造函数

    const str = 'asdf123asad23121'
const regexp = new RegExp('\\d+', 'g')
const res = str.match(regexp)
console.log(res) // ['123', '23121']

匹配方法

  • 字符串方法

    • match:返回一个字符串匹配正则表达式的结果,如果未找到匹配则为null

      const str = 'asdf123sds3234'
const regexp = /\d+/g
const res = str.match(regexp)
console.log(res) //['123', '3234']

    • search:返回正则表达式在字符串中首次匹配项的索引;否则，返回 -1

      const str = 'as12121es121sd'
const regexp = /\d+/
const res = str.search(regexp)
console.log(res) // 2

    • replace:返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一[正则表达式]，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项

      const str = 'asahsashhuihui12332467y7'
const regexp = /(hui)|(123)/g
const res = str.replace(regexp, '*')
console.log(res) //asahsash***32467y7
const res2 = str.replace(regexp, (arg) => {
    return '*'.repeat(arg.length)
})
console.log(res2) //asahsash*********32467y7

    • split:方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置

      const str = 'cccasdfgd9asasdsa12121'
const regexp = /a/
const res = str.split(regexp)
console.log(res) //['ccc', 'sdfgd9', 's', 'sds', '12121']

  • 正则对象方法

    • test:执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false

      let str = 'asdhadhjkhjk12323879789pjdhjfhj'
let regexp = /\d+/
let res = regexp.test(str)
console.log(res) // true
regexp = /m/
res = regexp.test(str)
console.log(res) // false

    • exec:方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null

      let str = 'sfkdhjk12238jks544jk'
let regexp = new RegExp('\\d+', 'g')
let res = regexp.exec(str)
console.log(res) //['12238', index: 7, input: 'sfkdhjk12238jks544jk', groups: undefined]
res = regexp.exec(str)
console.log(res) //['544', index: 15, input: 'sfkdhjk12238jks544jk', groups: undefined]

元字符

  • . :匹配默认除(\n,\r,\u2028,\u2029)之外的任何单个字符

    const str = 'adad12121dfe234s'
const regexp = /./
const res = str.replace(regexp, '*')
console.log(res) //*dad12121dfe234s

  • \ :转义符，它有两层含义

    • 表示下一个具有特殊含义的字符为字面值

    • 表示下一个字符具有特殊含义（转义后的结果是元字符内约定的）

    const str = 'sdsds/dfdfd12121'
const regexp = /\/d/
const res = regexp.test(str)
console.log(res) //true

  • \d :匹配任意一个阿拉伯数字的字符

    const str = 'xsdsd3121xcxx12121cx'
const regexp = /\d+/
const res = regexp.exec(str)
console.log(res) //['3121', index: 5, input: 'xsdsd3121xcxx12121cx', groups: undefined]

  • \D :匹配任意一个非阿拉伯数字的字符

    const str = 'xsdsd3121xcxx12121cx'
const regexp = /\D+/
const res = regexp.exec(str)
console.log(res) //['xsdsd', index: 0, input: 'xsdsd3121xcxx12121cx', groups: undefined]

  • \w :匹配任意一个（字母、数字、下划线）的字符

    const str = '@qwqwq_asas12121df0df0l;ll'
const regexp = /\w+/g
const res = str.match(regexp)
console.log(res) //['qwqwq_asas12121df0df0l', 'll']

  • \W :匹配任意一个非（字母、数字、下划线）的字符

    const str = '@qwqwq_asas12121df0df0l;ll'
const regexp = /\W+/g
const res = str.match(regexp)
console.log(res) //['@', ';']

  • \s :匹配一个空白符，包括空格、制表符、换页符、换行符和其他的Unicode 空格

    const str = 'sdhjk\n\rsdsd\n'
const regexp = /\s+/g
const res = str.replace(regexp, '-')
console.log(res) //sdhjk-sdsd-

  • \S :匹配一个非空白符

    const str = 'sdhjk\n\rsdsd\n'
const regexp = /\S+/g
const res = str.match(regexp)
console.log(res) //['sdhjk', 'sdsd']

  • \t :匹配一个水平制表符（horizontal tab）

    const str = 'sdhjk\tsdsd'
const regexp = /\t/
const res = regexp.test(str)
console.log(res) //true

  • \r :匹配一个回车符（carriage return）

    const str = 'sdhjk\rsdsd'
const regexp = /\r/
const res = regexp.test(str)
console.log(res) //true

  • \n :匹配一个换行符（linefeed）

    const str = 'sdhjk\nsdsd'
const regexp = /\n/
const res = regexp.test(str)
console.log(res) //true

  • \v :匹配一个垂直制表符（vertical tab）

    const str = 'sdhjk\vsdsd'
const regexp = /\v/
const res = regexp.test(str)
console.log(res) //true

  • \f :匹配一个换页符（form-feed）

    const str = 'sdhjk\fsdsd'
const regexp = /\f/
const res = regexp.test(str)
console.log(res) //true

字符集合

  • [xyz] :一个字符集合。匹配方括号中的任意字符，包括转义序列。你可以使用破折号（-）来指定一个字符范围。对于点（.）和星号（*）这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义，不过转义也是起作用的

    const str = 'dfgd12312df57676ds'
const regexp = /[1-9]+/g
const res = str.match(regexp)
console.log(res) //['12312', '57676']

  • [^xyz] :一个反向字符集。也就是说， 它匹配任何没有包含在方括号中的字符。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的

    const str = 'dfgd12312df57676ds'
const regexp = /[^1-9]+/g
const res = str.match(regexp)
console.log(res) //['dfgd', 'df', 'ds']

  • [\b] :匹配一个退格(backspace)。（不要和\b 混淆了。）

    const str = `dfgd12312df\b57676ds`
const regexp = /[\b]/g
const res = str.match(regexp)
console.log(res) //['\b']

边界

  • ^ :匹配输入的开始。如果多行标志被设置为 true，那么也匹配换行符后紧跟的位置

    const str = `sds234fsd\nsd4345ds\nsqwq`
const regexp = /^sd.*/gm
const res = str.match(regexp)
console.log(res) //['sds234fsd', 'sd4345ds']

  • $ :匹配输入的结束。如果多行标志被设置为 true，那么也匹配换行符前的位置

    const str = `sds234fsd\nsd4345ds\nsqwq`
const regexp = /^sd.*d$/gm
const res = str.match(regexp)
console.log(res) //['sds234fsd']

  • \b :匹配一个词的边界。一个词的边界就是一个词不被另外一个“字”字符跟随的位置或者前面跟其他“字”字符的位置，例如在字母和空格之间。注意，匹配中不包括匹配的字边界。换句话说，一个匹配的词的边界的内容的长度是 0。（不要和[\b]混淆了）

    const str = `this is dog`
const regexp = /\bi/
const res = str.match(regexp)
console.log(res) //['i', index: 5, input: 'this is dog', groups: undefined]

  • \B :匹配一个非单词边界

    const str = `this is dog`
const regexp = /[a-z]+\Bi[a-z]+/
const res = str.match(regexp)
console.log(res) //['this', index: 0, input: 'this is dog', groups: undefined]

分组

  • () :对表达式进行分组，类似数学中的分组，也称为子项

    • 索引分组:(x)

      const str = 'asabvb\r121ghjsdhj sdsds'
const regexp = /(\w+)\r(\w+)/
const res = str.match(regexp)
console.log(res) //['asabvb\r121ghjsdhj', 'asabvb', '121ghjsdhj', index: 0, input: 'asabvb\r121ghjsdhj sdsds', groups: undefined]

    • 命名分组:(?),groups 属性

      const str = 'asabvb\r121ghjsdhj sdsds'
const regexp = /(?<str>\w+)\r(\w+)/
const res = str.match(regexp)
console.log(res) //['asabvb\r121ghjsdhj', 'asabvb', '121ghjsdhj', index: 0, input: 'asabvb\r121ghjsdhj sdsds', groups: {str: 'asabvb'}]

    • 捕获匹配:(x)

      const str = 'this is dog'
const regexp = /(this)/
const res = str.match(regexp)
console.log(RegExp.$1) //this
console.log(res) //['this', index: 0, input: 'this is dog', groups: undefined]

    • 非捕获匹配:(?:x)

      //简而言之就是不捕获文本 ，也不针对组合计进行计数
const str = 'this is dog'
const regexp = /(?:this)/
const res = str.match(regexp)
console.log(RegExp.$1) //''
console.log(res) //['this', index: 0, input: 'this is dog', groups: undefined]

    • 断言/预查

      • 正向肯定断言:x(?=y)
      const str = 'iphone8iphone11iphoneNumber'
const regexp = /iphone(?=\d{1,2})/g
const res = str.replace(regexp, '苹果')
console.log(res) //苹果8苹果11iphoneNumber
      • 正向否定断言:x(?!y)
      const str = 'iphone8iphone11iphoneNumber'
const regexp = /iphone(?!\d{1,2})/g
const res = str.replace(regexp, '苹果')
console.log(res) //iphone8iphone11苹果Number
      • 负向肯定断言
      const str = '10px20px30pxxpx'
const regexp = /(?<=\d{2})px/g
const res = str.replace(regexp, '像素')
console.log(res) //10像素20像素30像素xpx
      • 负向否定断言
      const str = '10px20px30pxxpx'
const regexp = /(?<!\d{2})px/g
const res = str.replace(regexp, '像素')
console.log(res) //10px20px30pxx像素

数量词汇

  • x{n} :n 是一个正整数，前面的模式 x 连续出现 n 次时匹配

    let str = '123ab_cd123'
let regexp = /[a-z]{3}/g
let res = str.replace(regexp, '*')
console.log(res) //123ab_cd123
regexp = /[a-z]{2}/g
res = str.replace(regexp, '*')
console.log(res) //123*_*123

  • x{n,m} :n 和 m 为正整数，前面的模式 x 连续出现至少 n 次，至多 m 次时匹配

    let str = '123ab_cd123'
let regexp = /[a-z]{1,2}/g
let res = str.replace(regexp, '*')
console.log(res) //123*_*123
regexp = /[a-z]{1,1}/g
res = str.replace(regexp, '*')
console.log(res) //123**_**123

  • x{n,} :n 是一个正整数，前面的的模式 x 连续出现至少 n 次时匹配

    let str = '123abwasdsd_123'
let regexp = /[a-z]{1,}/g
let res = str.replace(regexp, '*')
console.log(res) //123*_123

  • x* :匹配前面的模式 x 0 次或多次，等价于 {0,}

    let str = '123abwasdsd_123'
let regexp = /123*/g
let res = str.replace(regexp, '*')
console.log(res) //*abwasdsd_*

  • x+ :匹配前面的模式 x 1 次或多次,等价于 {1,}

    let str = '123abwasdsd_123'
let regexp = /123+/g
let res = str.replace(regexp, '*')
console.log(res) //*abwasdsd_*

  • x? :匹配前面的模式 x 0 次或 1 次,等价于 {0,1}

    let str = '123abwasdsd_123'
let regexp = /d_123?/g
let res = str.replace(regexp, '*')
console.log(res) //123abwasds*

  • x|y :匹配 x 或 y

    let str = '123abwasdsd_123'
let regexp = /[A-Z]|[a-z]+/g
let res = str.replace(regexp, '*')
console.log(res) //123*_123

匹配模式

  • g:全局搜索

    let str = '123abwasdsd_123'
let regexp = /\d+/
let res = str.replace(regexp, '*')
console.log(res) //*abwasdsd_123
regexp = /\d+/g
console.log(regexp.global) // true
res = str.replace(regexp, '*')
console.log(res) //*abwasdsd_*

  • i:不区分大小写搜

    let str = '123abCasdsd_123'
let regexp = /[a-z]+/g
let res = str.replace(regexp, '*')
console.log(res) //123*C*_123
regexp = /[a-z]+/gi
console.log(regexp.ignoreCase) // true
res = str.replace(regexp, '*')
console.log(res) //123*_123

  • m:多行搜索

    let str = `abas
asds`
let regexp = /^\w+/gm
console.log(regexp.multiline) // true
let res = str.replace(regexp, '*')
console.log(res) //* *

  • s:允许 .匹配换行符

    let str = `<div>hello world
            </div>`
let regexp = /<div>.*<\/div>/gs
console.log(regexp.dotAll)
let res = regexp.test(str)
console.log(res) //true

  • u:使用 unicode 码的模式进行匹配

    console.log(/^.$/.test('\uD842\uDFB7')) //false
console.log(/^.$/u.test('\uD842\uDFB7')) //true
console.log(/^.$/u.unicode) // true

  • y:执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始文章来源地址https://www.toymoban.com/news/detail-785782.html

    const str = '121278789s834234dsssdf'
const regexp = /\d+/gy
console.log(regexp.sticky)
console.log(regexp.exec(str)) // ['121278789', index: 0, input: '121278789s834234dsssdf', groups: undefined]
console.log(regexp.exec(str)) // null

RegExp 方法特性

;/a/[Symbol.match]('abc')
;/a/[Symbol.matchAll]('abc')
;/a/[Symbol.replace]('abc', 'A')
;/a/[Symbol.search]('abc')
;/-/[Symbol.split]('a-b-c')
const str = 'asfs1212343sdsds12asa'
let regexp = /\d+/g
regexp.exec(str)
console.log(RegExp.input) //asfs1212343sdsds12asa
console.log(RegExp.$_) //asfs1212343sdsds12asa
console.log(regexp.lastIndex) //11
console.log(RegExp.lastMatch) //1212343
console.log(RegExp['$&']) //1212343
console.log(RegExp.leftContext) //asfs
console.log(RegExp['$`']) //asfs
console.log(RegExp.rightContext) //sdsds12asa
console.log(RegExp["$'"]) //sdsds12asa
regexp = /(\d+)([a-z]+)/g
const res = str.replace(regexp, '$1')
console.log(RegExp.$1) //12
console.log(RegExp.$2) //asa

到了这里，关于前端系列：正则表达式RegExp详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • JS正则表达式：常用正则手册/RegExp/正则积累

    JS正则表达式：常用正则手册/RegExp/正则积累

    一、正则基础语法 JavaScript 正则表达式 | 菜鸟教程 JS正则表达式语法大全（非常详细） 二、使用场景 2.1、 校验中国大陆手机号的正则表达式 正则 解释 序号 正则 解释 1 ^1 以数字 1 开头 2 [3456789] 第二位可以是 3、4、5、6、7、8、9 中的任意一个 3 d{9} 后面是 9 个数字 示例代码

    2024年02月14日
    浏览(37)
  • 前端JavaScript入门-day08-正则表达式

    前端JavaScript入门-day08-正则表达式

    (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 介绍 语法  元字符  边界符  量词  字符类： 修饰符 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象，通常用

    2024年02月13日
    浏览(50)

  • MySQL数据库——MySQL REGEXP：正则表达式

    正则表达式主要用来查询和替换符合某个模式（规则）的文本内容。例如，从一个文件中提取电话号码，查找一篇文章中重复的单词、替换文章中的敏感语汇等，这些地方都可以使用正则表达式。正则表达式强大且灵活，常用于非常复杂的查询。 MySQL 中，使用  REGEXP  

    2024年02月01日
    浏览(37)

  • 【23JavaScript 正则表达式】深入解析JavaScript正则表达式：基础概念、常用方法和实例详解，轻松掌握强大的文本模式匹配工具

    正则表达式是一种强大的文本模式匹配工具，用于在字符串中搜索和操作特定的文本模式。在JavaScript中，正则表达式提供了一种灵活的方式来处理字符串操作。 在JavaScript中，可以通过使用字面量表示法或RegExp对象来创建正则表达式。 字面量表示法 RegExp对象 JavaScript中的正则

    2024年02月08日
    浏览(50)
  • RegExp正则表达式左限定右限定左右限定,预查询,预查寻,断言 : (?＜= , (?= , (?＜! , (?!

    RegExp正则表达式左限定右限定左右限定,预查询,预查寻,断言 : (?＜= , (?= , (?＜! , (?!

    (?= , (?= , (?! , (?! 有好多种称呼 , 我称为: 左限定, 右限定, 左否定, 右否定 (?=左限定)    (?=右限定) (?!左否定)    (?!右限定) 再提炼 ?=    ?= ?!    ?! 其它的称呼 正则表达式预查寻分为 4 种: 正向肯定预查: (?=pattern) (?=pattern) 正向否定预查: (?!pattern) (?!pattern) 反向肯定预查

    2024年02月20日
    浏览(38)
  • JavaScript从入门到精通系列第二十九篇：正则表达式初体验

    JavaScript从入门到精通系列第二十九篇：正则表达式初体验

      文章目录 一：正则表达式 1：简介 2：正则表达式 3：检查字符串         正则表达式应用的场景是什么呢？比方说检查客户注册的电子邮件的格式的标准性。让计算机基于固定的格式，去检测用户输入的电子邮件地址是不是正确的电子邮件地址。         正则表达式用于

    2024年02月06日
    浏览(47)

  • Oracle使用regexp_like报错ORA-12733 正则表达式太长

    注：此篇内容并没有解决正则表达式太长的问题。 在命令行窗口连接数据库： 其中： username  是你的数据库用户名。 password  是你的数据库密码。 hostname  是数据库服务器的主机名或IP地址。 port  是监听端口，默认是1521。 SID  是系统标识符，是数据库实例的唯一名称。

    2024年04月15日
    浏览(33)

  • 身份证号码的正则表达式及验证详解(JavaScript，Regex)

    简言 在做用户实名验证时，常会用到身份证号码的正则表达式及校验方案。本文列举了两种验证方案，大家可以根据自己的项目实际情况，选择适合的方案 身份证号码说明 居民身份证号码，正确、正式的称谓应该是“公民身份号码”。根据【中华人民共和国国家标准 GB 11

    2023年04月20日
    浏览(29)
  • VBA提高篇_ 31 VBA调用正则表达式_RegExp.Pattern/Global/Execute(s)/Replace(s,r)

    VBA提高篇_ 31 VBA调用正则表达式_RegExp.Pattern/Global/Execute(s)/Replace(s,r)

    RegExp对象: 属于外部对象,对应的变量需要声明为Object对象,并使用CreateObject函数创建 用于创建各种外部对象,只要将该对象的完整类名作为参数(字符串形式),即可返回一个该类的对象 例: CreateObject(“word.application”),返回一个微软的word对象,用于打开和修改Word对象 结果存入在M

    2024年02月09日
    浏览(35)

  • 【JavaScript】正则表达式

    正则表达式用于对字符串模式匹配及检索替换 修饰符 描述 i 执行对大小写不敏感的匹配。 g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m 执行多行匹配。 表达式 描述 [abc] 查找方括号之间的任何字符。 [^abc] 查找任何不在方括号之间的字符。 [0-9] 查找任

    2024年01月21日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包