扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >javascript正则表达式的使用示例
  • 310

0
分享到

javascript正则表达式的使用示例

2023-06-14 18:06:59 310人浏览 泡泡鱼
摘要

这篇文章给大家分享的是有关javascript正则表达式的使用示例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。JavaScript是什么JavaScript是一种直译式的脚本语言，其解释器被称为JavaScri

这篇文章给大家分享的是有关javascript正则表达式的使用示例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

JavaScript是什么

JavaScript是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript是被广泛用于客户端的脚本语言，最早是在html网页上使用，用来给HTML网页增加动态功能。

正则表达式的作用

简单来讲正则表达式的作用就是进行字符串的增删改查，虽然javascritpt语言已经有及其完善的操作字符串的api，但是正则表达式会让你操作字符串更简单方便

创建正则表达式的方式

字面量形式

需要注意的是 字面量形式的正则表达式 是没有办法操作变量的，如下

const reg = "sattre is smart"let x = 's'console.log(/x/.test(reg)); //false

除非改成这样

// eval是把字符串变成js表达式console.log(eval(`/${x}/`).test(str));

使用对象的形式创建正则表达式

使用对象的形式创建的好处就是能够直接接受正则变量

const x = 'a'let regs = new RegExp(x) let str = 'All we need is love'let reg = new RegExp('A', 'g') // 第二个参数代表匹配的模式console.log(reg.test(str));

小案例-实现输入字符高亮

其实就是和浏览器的ctrl+f功能差不多

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta Http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <p id="main">    All we need is love  </p></body><script>  const cin = prompt('输入想要高亮内容')  const reg = new RegExp(cin, 'g')  let mainp = document.querySelector('#main')  console.log(mainp);  mainp.innerHTML = mainp.innerHTML.replace(reg, matched => {    return `<span style="color:red">${matched}</span>`  })</script></html>

选择符

‘ | ’ 此为选择符，选择符两边的字符都可以匹配，都有效

let str1 = 'a'let str2 = 'b'console.log(/a|b/.test(str1)); //trueconsole.log(/a|b/.test(str2)); //true

对转义的理解

自己的话理解就是，有些特殊符号如：{} [] . 等本来在正则表达式中就已经赋予了它的含义，如果单独使用会按照本身赋予的含义编译，如果需要匹配这些特殊符号本身，那么需要在这些符号前面加上一个 ‘’ 来加以区别

小数点本身的正则含义是除换行符外的任何字符

// 匹配小数点 \.let price = 23.34console.log(/\d+\.\d+/.test(23.34)); //true

但是需要注意的来了

如果你是用对象方法声明的正则表达式的话，你需要在转义字符前多使用一次 ’ / ’ ,因为对象声明正则表达式传入的是字符串，他的解析方式不同

如下

let reg = new RegExp('\d+\.\d+')console.log(reg.test(price)); //false
console.log('/\d+\.\d+/');

javascript正则表达式的使用示例
需要改成：

let reg1 = new RegExp('\\d+\\.\\d+')console.log(reg1.test(price)); //true

再来一个

const url = 'https://space.bilibili.com/17819768/' console.log(/https?:\/\/\w+\.\w+\.\w+\/\d+\//.test(url)); //true

字符边界约束

  • ^ : 限定以其后面的第一个字符为开始

  • $: 限定以其前面的第一个字符为结束

写一个监测必须以数字开头结束的字符串

let str = '2dasdjifeiorepo'let str2 = '3Dsf5'console.log(/^\d\w+\d$/.test(str));console.log(/^\d\w+\d$/.test(str2));

注意：^ 如果用在[ ] 中 还有除了[ ] 中的字符以外都可以匹配的意思

let str = `张三:155565666523,李四:2564154156561`console.log(str.match(/[^\d,:]+/g));

注意 ：这里如果没有 ^ $ 的话 任意的超过6个的字符串都会成功，因为没有开始和结束的限定，match会在字符串中任意取6个字符，所以也算作是成功的

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <input type="text" name="user">  <span></span>  <script>    let input = document.querySelector("[name='user']")    let span = document.querySelector('span')    console.log(input);    input.addEventListener('keyup', function () {      // console.log(this.value.match(/^\w{3,6}$/));      if (this.value.match(/^\w{3,6}$/)) {        span.innerHTML = '正确格式'      }else{        span.innerHTML = '请输入3-6位字符'      }    })  </script></body></html>

元字符

元字符匹配
\d匹配数字
\D匹配除了数字的其他字符
\s匹配空白（换行符也算）
\S除了空白的其他字符
\w匹配字母 数字 下划线
\W除了字母数字下划线
.匹配除了换行符的任意字符

匹配一个邮箱

let str = `#$%483023989@qq.com`let str2 = `483023989@qq.com`console.log(str.match(/^\w+@\w+\.\w+$/));console.log(str2.match(/^\w+@\w+\.\w+$/));

javascript正则表达式的使用示例

用 [ ] 巧妙匹配所有字符

如下，如果不加[ ] 代表完整匹配abc ，加了 [ ] ，代表可以匹配abc中的任意一个字符

let str = 'aaaabsdsc'console.log(str.match(/[abc]/g));console.log(str.match(/abc/g));

javascript正则表达式的使用示例
可以用 [\s\S] [\d\D] 匹配所有字符

let str = '$%^&*()(*&^&*(sfhsdjf   asdoia ..fdsdgf nsefxg\][iogjpsf'console.log(str.length);console.log(str.match(/[\s\S]/g));

javascript正则表达式的使用示例

模式符

  • i : 不区分大小写

  • g: 全局匹配

let str = 'Www'console.log(str.match(/w/gi)); //["W", "w", "w"]

多行匹配

 // 多行匹配 let str = ` #1 js,200元 #    #2 Vue,500元 #    #3 angular,199元 # song   #4 node.js,188元 #   `let res = str.match(/\s*#\d+\s+.+\s+#\s+$/gm).map(item => {  item = item.replace(/\s*#\d+\s*/, '').replace(/#/, '')  let [name, price] = item.split(",")  return { name, price }})console.log(res);

字符属性

\p 后面加上{x} x代表要匹配的字符属性 具体意思如下

元字符 含义

  • \p{L} 所有字母

  • \p{N} 所有数字，类似于 \d

  • [\p{N}\p{L}] 所有数字和所有字母，类似于 \w

  • \P{L} 不是字母，等价于 [^\p{L}]

  • \P{N} 不是数字，等价于 [^\p{N}]

let str = "sadhusafsafha.啥事爱上撒大声地?!"// 匹配字符console.log(str.match(/\p{L}/gu));// 匹配标点符号console.log(str.match(/\p{P}/gu));// 匹配汉字console.log(str.match(/\p{sc=Han}/gu));

javascript正则表达式的使用示例

模式符 u
此修饰符标识能够正确处理大于\uFFFF的Unicode字符。
也就是说，会正确处理四个字节的UTF-16编码。
此修饰符是ES2015新增，更多正则表达式新特性可以参阅ES2015 正则表达式新增特性一章节。

比如有些时候，一些宽字节的字符匹配不到，就需要用到模式符/u

lastIndex属性

let str = 'nihaowoshizhongguoren'let reg = /\w/GConsole.log(reg.lastIndex);console.log(reg.exec(str));console.log(reg.lastIndex);console.log(reg.exec(str));while ((res = reg.exec(str))) {  console.log(res);}

javascript正则表达式的使用示例

有效率的y模式

和g的区别就是，g模式只要还有满足条件的字符就会继续下去匹配，而y模式只要下一个字符不满足匹配条件，就会停止匹配。它的作用是让匹配更具有效率，一旦遇到条件不符合的就不会再检测后面的字符了

let str = '尼采的电话是:516515614,111111111,2222222222 没重要的事千万不要打给他，因为他已经疯了'let reg = /(\d+),?/yreg.lastIndex = 7console.log(reg.exec(str));console.log(reg.exec(str));console.log(reg.exec(str));console.log(reg.exec(str));

javascript正则表达式的使用示例

原子表和原子组的基本使用

[] 代表原子表:可选择匹配 ()代表原子组

let str = 'paul_sattre'console.log(str.match(/st/g)); //需要st一起才能匹配console.log(str.match(/[st]/g)); //需要只要有s 或者 t 就可以匹配
let date1 = '2021/4/9'let date2 = '2021-4-9'console.log(date1.match(/\d+[-\/]\d+[-\/]\d+/));console.log(date2.match(/\d+[-\/]\d+[-\/]\d+/));

javascript正则表达式的使用示例
其实上面还是有点缺陷
就是将date改成这样的时候 2021-4/9 前后两个符号不一致的时候还是能够匹配到，这个时候就可以用到原子组了

let date1 = '2021/4/9'let date2 = '2021-4-9'let date3 = '2021-4/9'console.log(date1.match(/\d+([-\/])\d+\1\d+/));console.log(date2.match(/\d+([-\/])\d+\1\d+/));console.log(date3.match(/\d+([-\/])\d+\1\d+/));

javascript正则表达式的使用示例
加了一个 () 后面的\1代表要和前面的()相同才能行

邮箱验证

// 邮箱验证let str = '483023989@qq.com.cn'let reg = /^[\w]+@[\w]+(\.[\w]+)+///["483023989@qq.com.cn", ".cn", index: 0, input: "483023989@qq.com.cn", groups: undefined]console.log(str.match(reg));// (\.[\w]+)+  表示括号之内的内容有1个或多个

javascript正则表达式的使用示例

原子组的替换操作

替换h标签为p标签

let str = `  <h2>hello</h2>  <h3>asdas</h3>  <h4>dasdad</h4>`let reg = /<(h[1-6])>([\s\S]+)<\/\1>/gi// console.log(str.replace(reg, '<p>$2</p>'));let res = str.replace(reg, ($0, $1, $2) => {  return `<p>${$2}</p>`})console.log(res);

javascript正则表达式的使用示例

不记录分组

https? 代表前面的字符s可以有也可以没有 代表不记录到我们的
下面的(?:\w+.) 原子组中的 ?: 代表不记录到我们的组编号之中

let str = `  https://www.nihao.com  http://nihao.com`let reg = /https?:\/\/((?:\w+\.)?\w+\.(?:com|cn|net))/gilet urls = []while ((res = reg.exec(str))) {  urls.push(res[1])}console.log(urls);

所以有没有www都能匹配到
javascript正则表达式的使用示例

多种重复匹配基本使用

+ ： 一个或多个
* ： 零个或多个
{a,b}： a-b范围内的出现次数
?： 零个或1个

// 多种重复匹配基本使用let str = 'asDDDdddddd'let str2 = 'as'console.log(str.match(/sd+/)); //1个或多个console.log(str2.match(/sd*/)); //0个或多个console.log(str.match(/sd{2,3}/)); // 2或3个console.log(str.match(/sd?/)); // 0个或1个

javascript正则表达式的使用示例

// 重复匹配对原子组的影响let str = 'asdddddsd'console.log(str.match(/(sd)+/g));  //["sd", "sd"]

限定用户名为3-8位并且是以字母开头

// 限定用户名为3-8位并且是以字母开头let username = 'a_coding'let username1 = '2fdsdfd'let username2 = 's'let username3 = 'asdsadsadsad';console.log(/^[a-z]\w{2,7}$/i.test(username));console.log(/^[a-z]\w{2,7}$/i.test(username1));console.log(/^[a-z]\w{2,7}$/i.test(username2));console.log(/^[a-z]\w{2,7}$/i.test(username3));

javascript正则表达式的使用示例

禁止贪婪

使用正则/sd+/ 匹配上面字符串时+会默认贪婪多个d，+后面加个？就只会匹配一个d了 这就是禁止贪婪

// 禁止贪婪let str = 'asdddddd'console.log(str.match(/sd+/)); //sdddddd console.log(str.match(/sd+?/)); //sd console.log(str.match(/sd*/)); //sdddddd console.log(str.match(/sd*?/)); //sd console.log(str.match(/sd{1,4}/));//sdddd console.log(str.match(/sd{1,4}?/));//sd

javascript正则表达式的使用示例

断言匹配

?= 后边是什么的

应该注意的是：断言只是对前面匹配的条件限定，并不参与实际的匹配结果中。
?= 中的等于号后面如果是个a，那么前面的匹配字符需要后面是a才会被匹配

// 断言匹配  ?=  后边是什么的let str = '我爱你，你爱他'let reg = /爱(?=你)/  //匹配后面有一个,号的loveconsole.log(str.replace(reg, '不爱'));  //我不爱你，你爱他

使用断言规范价格

let lessons = `  js,343元,400次  node.js,300.00元,134次  java,500元,432次`let reg = /(\d+)(.00)?(?=元)/gilessons = lessons.replace(reg, (v, ...args) => {  console.log(args);  args[1] = args[1] || '.00'  return args.slice(0, 2).join('')})console.log(lessons);

javascript正则表达式的使用示例

?<= 前面是什么的

理解上面的第一个断言这个也就能猜到意思了

//  ?<=  前面是什么的let str = '我爱你，你爱他'let reg1 = /(?<=你)爱/console.log(str.replace(reg1, '不爱'));// 我爱你，你不爱他

使用断言模糊电话号码

let users = `  乔丹电话:54088888888,  艾弗森电话;08888888845`// 给电话号码的后4位变成*let reg = /(?<=\d{7})\d+/g// console.log(users.match(reg));users = users.replace(reg, '*'.repeat(4))console.log(users);

javascript正则表达式的使用示例

?! 后面不是什么的就匹配

let str = 'hfewhieuwhf43758435efhiuewfhiew'let reg = /[a-z]+(?!\d+)$/i  //取后面不是数字的字母 注意这里的这个$非常重要console.log(str.match(reg)); //efhiuewfhiew

?<! 前面不是什么的就匹配

let str = 'asdae334dsfdsff'let reg = /(?<!\d+)[a-z]+/iconsole.log(str.match(reg));  //asdae

字符串正则方法

  • search : 返回索引值，找不到就是-1

  • match: 返回匹配后的字符结果 数组

  • matchAll 返回全局匹配的迭代对象

  • split 分割字符串形成数组

/// 字符串正则方法let str = 'i love you'console.log(str.search('u')); // 返回索引值，找不到就是-1console.log(str.search(/o/));// 返回匹配后的字符结果  数组console.log(str.match(/o/));  //["o", index: 3, input: "i love you", groups: undefined]// matchAll splitlet date = '2001-1/1'console.log(date.split(/[-\/]/)); //["2001", "1", "1"]

matchAll

<body>  <h2>all we need is love</h2>  <h3>all we need is love</h3>  <h4>all we need is love</h4>  <script>    let reg = /<(h[1-6])>([\s\S]+?)<\/\1>/gi    const content = document.body.innerHTML.matchAll(reg)    // console.log(content);    let res = []    for (const it of content) {      // console.log(it);      res.push(it[2])    }    console.log(res);    let str = 'woainiw'    // 为低端浏览器自定义原型方法matchALl    String.prototype.matchAll = function (reg) {      let res = this.match(reg)      if (res) {        let str = this.replace(res[0], '^'.repeat(res[0].length))        let match = str.matchAll(reg) || []        return [res, ...match]      }    }    console.log(str.matchAll(/(w)/i));  </script></body>

javascript正则表达式的使用示例

$符号在正则替换中的使用

$& 代表匹配到的内容
$` 代表匹配到的前面内容
$’ 代表匹配到的后面内容

let date = '2013/5/6'let str = '(010)88888888  (020)88888888'let reg = /\((\d{3,4})\)(\d{7,8})/gconsole.log(str.replace(reg, "$1-$2"));// 010-88888888  020-88888888// $&  代表匹配到的内容  // $`  代表匹配到的前面内容// $'  代表匹配到的后面内容let str = '我爱你'console.log(str.replace(/爱/, '不$&')); //我不爱你console.log(str.replace(/爱/, "$`")); //我我你console.log(str.replace(/爱/, "$'")); //我你你

感谢各位的阅读！关于“javascript正则表达式的使用示例”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

--结束END--

本文标题: javascript正则表达式的使用示例

本文链接: https://lsjlt.com/news/274105.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • javascript正则表达式的使用示例
    这篇文章给大家分享的是有关javascript正则表达式的使用示例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。JavaScript是什么JavaScript是一种直译式的脚本语言，其解释器被称为JavaScri...
    99+
    2023-06-14
  • JavaScript正则表达式的示例分析
    这篇文章主要为大家展示了“JavaScript正则表达式的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript正则表达式的示例分析”这篇文...
    99+
    2024-04-02
  • Javascript常用正则表达式的示例分析
    小编给大家分享一下Javascript常用正则表达式的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！模式修饰符的可选参数...
    99+
    2024-04-02
  • JavaScript正则表达式使用实例分析
    本篇内容主要讲解“JavaScript正则表达式使用实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript正则表达式使用实例分析”吧!背景我有一个Node服务，希望对访问进来...
    99+
    2023-06-30
  • MySQL中REGEXP正则表达式的使用示例
    这篇文章将为大家详细讲解有关MySQL中REGEXP正则表达式的使用示例，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。正则表达式描述了一组字符串。最简单的正则表达式是不含...
    99+
    2024-04-02
  • Linux的grep正则表达式示例
    这篇文章主要介绍“Linux的grep正则表达式示例”，在日常操作中，相信很多人在Linux的grep正则表达式示例问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Linux的grep正则表达式示例”的疑惑有所...
    99+
    2023-06-12
  • 怎么使用javascript正则表达式
    本篇内容介绍了“怎么使用javascript正则表达式”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！表单验...
    99+
    2024-04-02
  • JavaScript如何使用正则表达式
    正则表达式是一种用来匹配字符串的模式，可以用于验证、搜索、替换字符串等。JavaScript内置支持正则表达式，本篇文章将介绍JavaScript如何使用正则表达式。正则表达式比较复杂，如果您初次接触它，可能会感到困惑。但是只要您理解了基本...
    99+
    2023-05-14
  • JavaScript正则表达式实例分析
    这篇文章主要讲解了“JavaScript正则表达式实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript正则表达式实例分析”吧！1. 概...
    99+
    2024-04-02
  • 正则表达式详析+常用示例
    目录一、正则的含义二、正则表达式的应用场景三、常用的格式校验四、元字符五、反义代码 六、限定符七、分组匹配八、贪婪与非贪婪九、零宽断言十、常用的实用正则表达式一、正则的含义...
    99+
    2024-04-02
  • jmeter正则表达式的示例分析
    小编给大家分享一下jmeter正则表达式的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！使用jmeter时经常有这样的情况：一个完整的操作流程，需先完成某个操作，获得某个值或数据信息，然后才能进行下一步的操作（也就...
    99+
    2023-06-14
  • VB.NET正则表达式的示例分析
    小编给大家分享一下VB.NET正则表达式的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.选择符 VB.NET正则表达式中“ &brvbar;”...
    99+
    2023-06-17
  • 正则表达式组的示例分析
    这篇文章主要为大家展示了“正则表达式组的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“正则表达式组的示例分析”这篇文章吧。正则表达式组的理解把正则表达式的一部分放在圆括号内，你可以将它们...
    99+
    2023-06-17
  • JavaScript正则表达式怎么用
    这篇文章主要为大家展示了“JavaScript正则表达式怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript正则表达式怎么用”这篇文章吧。什...
    99+
    2024-04-02
  • SQL正则表达式及mybatis中使用正则表达式的方法
    小编给大家分享一下SQL正则表达式及mybatis中使用正则表达式的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！mysql...
    99+
    2024-04-02
  • JavaScript 正则表达式详解
    目录1. 正则表达式创建2. 使用模式2.1 使用简单模式2.2 使用特殊字符3. 应用3.1 切分字符串3.2 分组3.3 贪婪匹配3.4 正则表达式标志3.5 test() 方法...
    99+
    2024-04-02
  • javascript中正则表达式分组、断言的示例分析
    这篇文章主要为大家展示了“javascript中正则表达式分组、断言的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“javascript中正则表达式分组...
    99+
    2024-04-02
  • JavaScript正则实现表达式以字母开头的示例
    这篇“JavaScript正则实现表达式以字母开头的示例”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“JavaScript正则实现表达式以字母开头的示例”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥...
    99+
    2023-06-06
  • shell中正则表达式的示例分析
    这篇文章给大家分享的是有关shell中正则表达式的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。正则表达式匹配中文字符的正则表达式：[u4e00-u9fa5]评注：匹配中...
    99+
    2024-04-02
  • vbs中正则表达式的代码示例
    这篇文章给大家分享的是有关vbs中正则表达式的代码示例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。<% Function RegExpTest(patrn, strng)  ...
    99+
    2023-06-08
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作