正则表达式(一)

2022-09-27 本文已影响0人未路过

1.什么是正则表达式？

Regular Expression
正则表达式是一种字符串匹配利器，可以帮助我们搜索、获取、替代字符串；

2.正则表达式定义

正则表达式主要由两部分组成：模式（patterns）和修饰符（flags）

    // 创建正则
    // 1> 匹配的规则pattern
    // 2> 匹配的修饰符flags
const re1 = new RegExp("abc", "ig")
const re2 = /abc/ig

1，/g 表示该将用来在输入字符串中查找所有可能的匹配，返回的结果可以是多个。如果不加/g最多只会匹配一个

2，/i 表示匹配的时候不区分大小写

3.正则表达式的使用方法

image.png

2.1 exec方法

表达式
RegExpObject.exec(string)
是RegExp对象的主要方法，根据pattern对str进行正则表达式的匹配。
参数
string要检索的字符串；

exec()接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组，或者在没有匹配项的情况下返回null。

返回值
返回匹配结果数组，如匹配不到返回null。

//创建正则
const re1 = /abc/ig
const message = "fdabc123 faBC323 dfABC222 A2324aaBc"

  // 1.exec方法: 用于检验字符串是否匹配正则规则

   const res1 = re1.exec(message)
   console.log(res1)
   /* ['abc', index: 2, input: 'fdabc123 faBC323 dfABC222 A2324aaBc', groups: undefined] */

2.2 test方法

表达式
是正则表达式的一个方法，用于检测一个字符串是否匹配正则规则。
如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
RegExpObject.test(string)
3、使用参数
String：必需。要检测的字符串

/123456/.test("123456")   //ture
/123456/.test("abc123456")   //ture
/123456/.test("123456abc")   //ture
/123456/.test("12345")   //flase
//创建正则
const re1 = /abc/ig
const message = "fdabc123 faBC323 dfABC222 A2324aaBc"

  // 2.test方法: 检测某一个字符串是否符合正则的规则
  if (re1.test(message)) {
    console.log("message符合规则")
  } else {
    console.log("message不符合规则")
  }
  //message符合规则

2.3 match方法

match() 方法返回一个字符串匹配正则表达式的结果

表达式
string.match(regexp)
参数
reg：一个正则表达式对象，如果传入的不是正则表达式，则会隐式的调用new RegExp(obj) 将其转为正则表达式。如果不传则会返回一个包含空字符串的数组[""]


const re1 = /abc/ig
const message = "fdabc123 faBC323 dfABC222 A2324aaBc"

console.log(message.match())
//['', index: 0, input: 'fdabc123 faBC323 dfABC222 A2324aaBc', 
//groups: undefined]

3.返回值
1，如果reg使用g(全局搜索)标志，则返回字符串与正则表达式匹配的所有结果组成的数组，如果没有匹配的字符串则返回null
2，如果reg没有使用g(全局搜索)标志，则返回第一个匹配的字符串和其他相关的匹配信息。包括：
groups：一个捕获组对象或undefined（如果没有定义命名捕获组）
index：匹配的结果的开始索引位置
input：搜索的字符串

只有在/g的时候才返回数组

//创建正则
const re1 = /abc/ig
const message = "fdabc123 faBC323 dfABC222 A2324aaBc"

//String的方法
//1.match
var str="Hello world Hello world!"
console.log(str.match("world") )
/*
['world', index: 6, input: 'Hello world!', groups: undefined]
*/
console.log(/world/.exec(str))
/*
['world', index: 6, input: 'Hello world!', groups: undefined]
*/
console.log(str.match(/world/))
/*
[world]
 */
 console.log(str.match(/world/g))
 // ['world', 'world']
 console.log(str.match(/worldsss/g))
//null

不写g的话，就是返回结果内容相关数组，也就只有第一个，和exec是一样的。有g的话，就是返回只有匹配结果的数组。一个结果的话，数组里面只有一个元素，有两个匹配的结果的话，数组里面就有两个元素。

2.4 matchAll方法

matchAll() 方法返回一个包含所有匹配正则表达式的结果及其分组捕获组的迭代器

表达式
str.matchAll(reg)
参数
reg：正则表达式对象。如果不是正则表达式则会使用new RegExp(obj)隐式转换为正则表达式。表达式必须设置为 g (全局模式)否则会报错。
返回值
一个迭代器，可以使用for…of…，数组新增的扩展符(…)或Array.from()实现功能
参数是普通对象的时候


const result = message.matchAll("abc")
//RegExpStringIterator {}
console.log(result.next())
console.log(result.next())
console.log(result.next())
console.log(result.next())
/*
test.html:25 {value: Array(1), done: false}
test.html:27 {value: undefined, done: true}done: truevalue: undefined[[Prototype]]: Object
test.html:28 {value: undefined, done: true}
test.html:29 {value: undefined, done: true}
*/


console.log(message.matchAll("abcdefsssss"))
//RegExpStringIterator {}
console.log(message.matchAll("abcdefsssss").next())//{value: undefined, done: true}

如果没有匹配的结果的话，调用next，第一个返回的就是
{value: undefined, done: true}
有的话的话，value是一个数组，数组里面是与结果有关的信息
，包括匹配的结果，结果的索引，源字符串，grous等

参数是正则表达式

//创建正则
const re1 = /abc/ig
const message = "fdabc123 faBC323 dfABC222 A2324aaBc"

//String的方法
//2.matchAll
console.log(message.matchAll(/abc/ig))
//RegExpStringIterator {}
const result = message.matchAll(re1)
console.log(result.next())
console.log(result.next())
console.log(result.next())
console.log(result.next())
console.log(result.next())

/*
{value: Array(1), done: false}
test.html:22 {value: Array(1), done: false}
test.html:23 {value: Array(1), done: false}
test.html:24 {value: Array(1), done: false}
test.html:25 {value: undefined, done: true}
*/
const result2 = message.matchAll(re1)
for (const item of result2){
  console.log(item)
}
/*
['abc', index: 2, input: 'fdabc123 faBC323 dfABC222 A2324aaBc', groups: undefined]
test.html:36 ['aBC', index: 10, input: 'fdabc123 faBC323 dfABC222 A2324aaBc', groups: undefined]
test.html:36 ['ABC', index: 19, input: 'fdabc123 faBC323 dfABC222 A2324aaBc', groups: undefined]
test.html:36 ['aBc', index: 32, input: 'fdabc123 faBC323 dfABC222 A2324aaBc', groups: undefined]
*/

2.5 search

search() 方法用于检索字符串中指定的子字符串，查找并返回指定字符串第一次出现的位置

如果没有找到任何匹配的子串，则返回 -1。

表达式
string.search(searchvalue)
参数值
searchvalue 必须。查找的字符串或者正则表达式。
如果不是正则，也会调用 new RegExp(obj) 转为正则的。
返回值
Number 与指定查找的字符串或者正则表达式相匹配的 String 对象起始位置。

//创建正则
const re1 = /abc/ig
const message = "fdabc123 faBC323 dfABC222 A2324aaBc"

//String的方法
//3.search
console.log(message.search('abc'))//2
console.log(message.indexOf('abc'))//2
/*
其实区别在于 search 是强制正则的，而 indexOf 只是按字符串匹配的。
*/
console.log(message.search('abcddddd'))//-1

console.log(message.search(/abc/ig))//2

2.6 replace方法

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。返回替换后的字符串，且原字符串不变。
！！！返回的是新字符串，不改变源字符串。

找到匹配的东西，并且替换它。
不写g的话，就只替换第一个。
写g的话，就替换所有的。

表达式
var newStr = str.replace(regexp|substr, newSubStr|function)
参数
regexp/substr：规定子字符串或者要替换的模式的RegExp对象。如果访值是字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为RegExp对象。
newSubStr/function：一个字符串值。规定了替换文本或生成替换文本的函数。
返回值
一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

const re1 = /abc/ig
const message = "fdabc123 faBC323 dfABC222 A2324aaBc"

//String的方法
//4.replace
console.log(message.replace('abc', 'ppp'))
//fdppp123 faBC323 dfABC222 A2324aaBc
//只能替换abc， 不认识大小写
console.log(message.replace(/abc/ig, 'ppp'))
//fdppp123 fppp323 dfppp222 A2324appp

2.7 split

split() 方法用于把一个字符串分割成字符串数组。

提示：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

！！！返回的是新数组，不改变源字符串。
注意： split() 方法不改变原始字符串。

表达式
string.split(separator,limit)
参数
separator 可选。字符串或正则表达式，从该参数指定的地方分割 string Object。
limit 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
返回值
Array 一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 string Object 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

//创建正则
const re1 = /abc/ig
const message = "fdabc123 faBC323 dfABC222 A2324aaBc"

//String的方法
//5.split
var str="How are you doing today?";
var n=str.split(" ",3);
console.log(n)//['How', 'are', 'you']
n=str.split("a",3);
console.log(n)//['How ', 're you doing tod', 'y?']
const result4 = message.split(re1)
console.log(result4)
// ['fd', '123 f', '323 df', '222 A2324a', '']

3.案例

<!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" />
    <p class="tip">请输入账号</p>

    <script>
      // 创建正则
  
      // 案例: 让用户输入的账号必须是aaaaa以上
       const inputEl = document.querySelector("input")
      const tipEl = document.querySelector(".tip")

       inputEl.oninput = function() {
         const value = this.value
         if (/^a{5,8}$/.test(value)) {
           tipEl.textContent = "输入的内容符合规则要求"
         } else {
           tipEl.textContent =  "输入的内容不符合规则要求, 请重新输入"
         }
       }
      //oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。
    </script>
  </body>
</html>