七、正则表达式

最新推荐文章于 2024-08-29 14:26:30 发布

槿川001

最新推荐文章于 2024-08-29 14:26:30 发布

阅读量258

点赞数

分类专栏： Web APIs 文章标签：正则表达式 javascript 前端

本文链接：https://blog.csdn.net/qq_55891636/article/details/128088200

版权

Web APIs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

正则表达式

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

补充：检测中文的正则表达式 /^[\u4e00-\u9fa5]$/

作用：

1、表单验证（匹配）

2、过滤敏感词（替换）

3、字符串中提取需要的部分（提取）

语法：

1、定义正则表达式（制定要匹配的规则）

2.1、判断是否有符合规则的字符串

使用test()方法检测要测试的数据是否与正则表达式相匹配

      <script>
          let reg = /前端/
          // 正则表达式的的定义
          let str = '前端工程师'
          let Str = '后端工程师'
          // 要匹配的数据
          console.log(reg.test(str))
          console.log(reg.test(Str))
          // 语法test()方法检测要测试的数据是否与定义的正则表达式相匹配，匹配则返回true不匹配返回false
      </script>

2.2、检索（查找）符合规则的字符串

使用exec()方法在测试数据中找到与正则表达式相匹配的部分并返回，匹配成功返回的是一个数组，否则返回null

  <script>
          let reg = /前端/
          // 正则表达式的的定义
          let STR = '测试,算法,前端,后端'
          // 要匹配的数据
          console.log(reg.exec(STR))
          // exec()方法用于在测试数据中检索（查找）出与正则表达式相匹配的数据并返回，返回的是一个数组
          // 输出打印： ['前端', index: 6, input: '测试,算法,前端,后端', groups: undefined]
          // index表示索引号，从零开始在测试数据的第六个位置查找到
      </script>

元字符

普通字符：大多数字符仅能描述他们本身，这些字符称作普通字符，例如所有的字母和数字

元字符（特殊字符）：具有一些特殊含义的字符，可以极大提高灵活性和强大的匹配功能

参考文档：

MDN：正则表达式 - JavaScript | MDN

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

元字符分类：

1、边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

2、量词（表示重复次数）

3、字符类（比如 \d 表示 0~9）

边界符

^ 表示匹配行首的文本（以谁开始）

$ 表示匹配行尾的文本（以谁结尾）

      <script>
          // ^ 检测行首
          console.log(/^哈/.test('二哈'))//false
          console.log(/^哈/.test('哈哈'))//true
          //$ 检测行尾
          console.log(/哈$/.test('哈皮'))//false
          console.log(/哈$/.test('二哈'))//true
          // ^ 与 $ 搭配使用--精确匹配
          console.log(/^哈$/.test('哈哈'))//false
          // 在精确匹配/^ …… $/中检测对象必须与定义的正则表达式内容完全一样才能返回true
          console.log(/^哈$/.test('哈'))//true
      </script>

量词

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

书写量词表达式一定不要加空格

*表示重复零次或更多次

+表示重复一次或更多次

？表示重复零次或一次

{n} 表示重复n次

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

{n,m} 表示重复n到m次

  <script>
          // * 表示重复零次或更多次
          console.log(/^a*$/.test(''))//true
          console.log(/^a*$/.test('aaaaaa'))//true
          console.log(/^a*$/.test('b'))//false
          console.log('--------')
  
          // + 表示重复一次或更多次
          console.log(/^a+$/.test('a'))//true
          console.log(/^a+$/.test('aaaa'))//true
          console.log(/^a+$/.test(''))//false
          console.log(/^a+$/.test('b'))//false
          console.log(/^a+$/.test('aba'))//false
          console.log('--------')
  
          // ？表示重复零次或一次
          console.log(/^a?$/.test(''))//true
          console.log(/^a?$/.test('a'))//true
          console.log(/^a?$/.test('aa'))//false
          console.log('--------')
  
          // {n} 表示重复n次
          console.log(/^a{3}$/.test(''))//false
          console.log(/^a{3}$/.test('aaa'))//true
          console.log(/^a{3}$/.test('aaba'))//false
          console.log(/^a{3}$/.test('baaa'))//false
          console.log('--------')
  
          // {n,} 表示重复n次或更多次
          console.log(/^a{3,}$/.test(''))//false
          console.log(/^a{3,}$/.test('aaa'))//true
          console.log(/^a{3,}$/.test('aaaa'))//true
          console.log(/^a{3,}$/.test('aabaa'))//false
          console.log(/^a{3,}$/.test('baaaab'))//false
          console.log('--------')
  
          // {n,m} 表示重复n到m次,在{n,m}这个表达式中不能出现空格
          console.log(/^a{3,6}$/.test(''))//false
          console.log(/^a{3,6}$/.test('aaa'))//true
          console.log(/^a{3,6}$/.test('aaaaaaa'))//false
          console.log(/^a{3,6}$/.test('aabaa'))//false
          console.log(/^a{3,6}$/.test('baaaab'))//false
      </script>

字符类

(1) [ ] 匹配字符集合 —— 后面的字符串只要包含 abc 中任意一个字符，都返回 true 。

(2) [ ] 里面加上 - 连字符——使用连字符 - 表示一个范围,(1)的简写形式

  <script>
          // (1) [ ] 匹配字符集合---只要包含[]中任意一个字符即为true
          console.log(/[abc]/.test('abc'))//true
          console.log(/[abc]/.test('andy'))//true
          console.log(/[abc]/.test('bilck'))//true
          console.log(/[abc]/.test('cut'))//true
          console.log(/[abc]/.test('drive'))//false
          // 若加上精确匹配^$,则[]有且只能出现其中一个才为真
          console.log(/^[abc]$/.test('abc'))//false
          console.log(/^[abc]$/.test('a'))//true
          console.log('-----------')
  
          // (2)[ ] 里面加上 - 连字符---使用连字符 - 表示一个范围,算是（1）的简写
          console.log(/[a-c]/.test('abc'))//true,[a-c]即表示abc
          console.log(/[a-c]/.test('a'))//true,任有其中一个即为真
          //[]里面加上^表示取反
          console.log(/[^a-z]/.text('a'))//false
          console.log(/[^a-z]/.text('A'))//true
          // 若加上精确匹配^$,只能取其中一个才为真
          console.log(/^[a-c]$/.test('abc'))//false
          console.log(/^[a-c]$/.test('a'))//true
          console.log('-----------')
  
          console.log(/[a-zA-Z0-9-_]/.test('--aaZZ'))//true
          // 表示测试数据中出现的是小写字母a-z大写字母A-Z数字0-9以及-和_即可返回true不限个数和出现次数
          console.log(/^[a-zA-Z0-9-_]$/.test('-'))//true
          console.log(/^[a-zA-Z0-9-_]$/.test('--'))//true
          // 添加上精确匹配表示测试数据中有且只能出现小写字母a-z大写字母A-Z数字0-9以及-和_中的一个返回true
          console.log(/^[1-9][0-9]{4,}$/.test('10123456'))
          // 表示第一个数只能是[1-9]中的一个，后面的数字在[0-9]中取，因为添加了{4,}即表明后面的数字需要是4位及4位以上才返回true
          // 在这种组合表达式在{}只对它前一个生效，就如这里因为使用了精确匹配所以[1-9]只能取一个，但[0-9]{4,}中[0-9]在{4,}就解除了精确匹配只能取一个的限制，变为取4个及以上
      </script>

(3)[ ] 里面加上 ^ 表示取反，如[ ^a-z]表示除小写字母以外的所有字符（不要带空格，这里由于格式问题只能加个空格）

(4) .匹配除换行符之外的任何单个字符

(5) 预定义：指的是某些常见模式的简写方式

预定类	说明
\d	匹配0-9之间的任一数字，相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[ ^0-9]
\w	匹配任意的字母，数字和下划线，相当于[a-zA-Z0-9_]
\W	除所有字母，数字和下划线以外的字符，相当于[ ^a-zA-Z0-9_]
\s	匹配空格（包括换行符，制表符，空格符等），相当与[\t\r\n\v\f]
\S	匹配非空格的字符，相当于[ ^\t\r\n\v\f]

修饰符

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

语法：

  /表达式/修饰符

i 是单词ignore的缩写，表示在正则匹配时字母不区分大小写

  console.log(/a/i.test('a'))//true
  console.log(/A/i.test('a'))//true

g 是单词global的缩写，表示在正则匹配时匹配所有满足正则表达式的结果（一般只匹配到满足表达式的第一个结果）

replace 替换

语法：

  字符串.replace(/正则表达式/,'替换的文本')

案例---过滤敏感词

      <textarea name="" id="" cols="30" rows="10"></textarea>
      <button>发布</button>
      <p></p>
      <script>
          let textarea = document.querySelector('textarea')
          let btn = document.querySelector('button')
          let p = document.querySelector('p')
          btn.addEventListener('click', function () {
              p.innerHTML = textarea.value.replace(/激情|基情/g, '**')
              // | 是或的意思，表示这两个词都能检索到并进行替换操作，//g,这里在正则表达式后面加上g表示匹配所有满足条件的结果
          })
      </script>