javascript正則表達(dá)式的使用示例

發(fā)布時(shí)間：2021-04-21 11:35:49 來源：億速云閱讀：206 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)javascript正則表達(dá)式的使用示例的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

JavaScript是什么

JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。

正則表達(dá)式的作用

簡單來講正則表達(dá)式的作用就是進(jìn)行字符串的增刪改查，雖然javascritpt語言已經(jīng)有及其完善的操作字符串的api，但是正則表達(dá)式會(huì)讓你操作字符串更簡單方便

創(chuàng)建正則表達(dá)式的方式

字面量形式

需要注意的是字面量形式的正則表達(dá)式是沒有辦法操作變量的，如下

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

除非改成這樣

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

使用對象的形式創(chuàng)建正則表達(dá)式

使用對象的形式創(chuàng)建的好處就是能夠直接接受正則變量

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

小案例-實(shí)現(xiàn)輸入字符高亮

其實(shí)就是和瀏覽器的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('輸入想要高亮內(nèi)容')
  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)); //true
console.log(/a|b/.test(str2)); //true

對轉(zhuǎn)義的理解

自己的話理解就是，有些特殊符號如：{} [] . 等本來在正則表達(dá)式中就已經(jīng)賦予了它的含義，如果單獨(dú)使用會(huì)按照本身賦予的含義編譯，如果需要匹配這些特殊符號本身，那么需要在這些符號前面加上一個(gè) ‘’ 來加以區(qū)別

小數(shù)點(diǎn)本身的正則含義是除換行符外的任何字符

// 匹配小數(shù)點(diǎn) \.
let price = 23.34
console.log(/\d+\.\d+/.test(23.34)); //true

但是需要注意的來了

如果你是用對象方法聲明的正則表達(dá)式的話，你需要在轉(zhuǎn)義字符前多使用一次 ’ / ’ ,因?yàn)閷ο舐暶髡齽t表達(dá)式傳入的是字符串，他的解析方式不同

如下

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

console.log('/\d+\.\d+/');

javascript正則表達(dá)式的使用示例
需要改成：

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

再來一個(gè)

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

字符邊界約束

^ : 限定以其后面的第一個(gè)字符為開始
$: 限定以其前面的第一個(gè)字符為結(jié)束

寫一個(gè)監(jiān)測必須以數(shù)字開頭結(jié)束的字符串

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個(gè)的字符串都會(huì)成功，因?yàn)闆]有開始和結(jié)束的限定，match會(huì)在字符串中任意取6個(gè)字符，所以也算作是成功的

<!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	匹配數(shù)字
\D	匹配除了數(shù)字的其他字符
\s	匹配空白（換行符也算）
\S	除了空白的其他字符
\w	匹配字母數(shù)字下劃線
\W	除了字母數(shù)字下劃線
.	匹配除了換行符的任意字符

匹配一個(gè)郵箱

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正則表達(dá)式的使用示例

用 [ ] 巧妙匹配所有字符

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

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

javascript正則表達(dá)式的使用示例
可以用 [\s\S] [\d\D] 匹配所有字符

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

javascript正則表達(dá)式的使用示例

模式符

i : 不區(qū)分大小寫
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} 所有數(shù)字，類似于 \d
[\p{N}\p{L}] 所有數(shù)字和所有字母，類似于 \w
\P{L} 不是字母，等價(jià)于 [^\p{L}]
\P{N} 不是數(shù)字，等價(jià)于 [^\p{N}]

let str = "sadhusafsafha.啥事愛上撒大聲地?!"// 匹配字符
console.log(str.match(/\p{L}/gu));// 匹配標(biāo)點(diǎn)符號
console.log(str.match(/\p{P}/gu));// 匹配漢字
console.log(str.match(/\p{sc=Han}/gu));

javascript正則表達(dá)式的使用示例

模式符 u
此修飾符標(biāo)識能夠正確處理大于\uFFFF的Unicode字符。
也就是說，會(huì)正確處理四個(gè)字節(jié)的UTF-16編碼。
此修飾符是ES2015新增，更多正則表達(dá)式新特性可以參閱ES2015 正則表達(dá)式新增特性一章節(jié)。

比如有些時(shí)候，一些寬字節(jié)的字符匹配不到，就需要用到模式符/u

lastIndex屬性

let str = 'nihaowoshizhongguoren'
let reg = /\w/g
console.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正則表達(dá)式的使用示例

有效率的y模式

和g的區(qū)別就是，g模式只要還有滿足條件的字符就會(huì)繼續(xù)下去匹配，而y模式只要下一個(gè)字符不滿足匹配條件，就會(huì)停止匹配。它的作用是讓匹配更具有效率，一旦遇到條件不符合的就不會(huì)再檢測后面的字符了

let str = '尼采的電話是:516515614,111111111,2222222222 沒重要的事千萬不要打給他，因?yàn)樗呀?jīng)瘋了'
let reg = /(\d+),?/yreg.lastIndex = 7
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));

javascript正則表達(dá)式的使用示例

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

[] 代表原子表:可選擇匹配 ()代表原子組

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正則表達(dá)式的使用示例
其實(shí)上面還是有點(diǎn)缺陷
就是將date改成這樣的時(shí)候 2021-4/9 前后兩個(gè)符號不一致的時(shí)候還是能夠匹配到，這個(gè)時(shí)候就可以用到原子組了

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正則表達(dá)式的使用示例
加了一個(gè) () 后面的\1代表要和前面的()相同才能行

郵箱驗(yàn)證

// 郵箱驗(yàn)證
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]+)+  表示括號之內(nèi)的內(nèi)容有1個(gè)或多個(gè)

javascript正則表達(dá)式的使用示例

原子組的替換操作

替換h標(biāo)簽為p標(biāo)簽

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>'));/**
 *   
  <p>hello</p>
  <p>asdas</p>
  <p>dasdad</p>
 */let res = str.replace(reg, ($0, $1, $2) => {
  return `<p>${$2}</p>`})/**
 * 上面回調(diào)函數(shù)中的 $0 代表的是整個(gè)匹配到的內(nèi)容，之后的$1 $2 就是從左
 * 到右的原子組匹配到的內(nèi)容
 */console.log(res);

javascript正則表達(dá)式的使用示例

不記錄分組

https? 代表前面的字符s可以有也可以沒有代表不記錄到我們的
下面的(?:\w+.) 原子組中的 ?: 代表不記錄到我們的組編號之中

let str = `
  https://www.nihao.com
  http://nihao.com
`
let reg = /https?:\/\/((?:\w+\.)?\w+\.(?:com|cn|net))/gi

let urls = []

while ((res = reg.exec(str))) {
  urls.push(res[1])
}
console.log(urls);

所以有沒有www都能匹配到
javascript正則表達(dá)式的使用示例

多種重復(fù)匹配基本使用

+ ：一個(gè)或多個(gè)
* ：零個(gè)或多個(gè)
{a,b}： a-b范圍內(nèi)的出現(xiàn)次數(shù)
?：零個(gè)或1個(gè)

// 多種重復(fù)匹配基本使用
let str = 'asddddddddd'
let str2 = 'as'
console.log(str.match(/sd+/)); //1個(gè)或多個(gè)
console.log(str2.match(/sd*/)); //0個(gè)或多個(gè)
console.log(str.match(/sd{2,3}/)); // 2或3個(gè)
console.log(str.match(/sd?/)); // 0個(gè)或1個(gè)

javascript正則表達(dá)式的使用示例

// 重復(fù)匹配對原子組的影響
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正則表達(dá)式的使用示例

禁止貪婪

使用正則/sd+/ 匹配上面字符串時(shí)+會(huì)默認(rèn)貪婪多個(gè)d，+后面加個(gè)？就只會(huì)匹配一個(gè)d了這就是禁止貪婪

// 禁止貪婪
let str = 'asdddddd'/**
 * 使用正則/sd+/ 匹配上面字符串時(shí)+會(huì)默認(rèn)貪婪多個(gè)d
 * +后面加個(gè)？就只會(huì)匹配一個(gè)d了  這就是禁止貪婪
 */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正則表達(dá)式的使用示例

斷言匹配

?= 后邊是什么的

應(yīng)該注意的是：斷言只是對前面匹配的條件限定，并不參與實(shí)際的匹配結(jié)果中。
?= 中的等于號后面如果是個(gè)a，那么前面的匹配字符需要后面是a才會(huì)被匹配

// 斷言匹配  ?=  后邊是什么的
let str = '我愛你，你愛他'
let reg = /愛(?=你)/  //匹配后面有一個(gè),號的love
console.log(str.replace(reg, '不愛'));  //我不愛你，你愛他

使用斷言規(guī)范價(jià)格

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

javascript正則表達(dá)式的使用示例

?<= 前面是什么的

理解上面的第一個(gè)斷言這個(gè)也就能猜到意思了

//  ?<=  前面是什么的
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正則表達(dá)式的使用示例

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

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

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

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

字符串正則方法

search : 返回索引值，找不到就是-1
match: 返回匹配后的字符結(jié)果數(shù)組
matchAll 返回全局匹配的迭代對象
split 分割字符串形成數(shù)組

/// 字符串正則方法
let str = 'i love you'

console.log(str.search('u')); // 返回索引值，找不到就是-1
console.log(str.search(/o/));

// 返回匹配后的字符結(jié)果  數(shù)組
console.log(str.match(/o/));  //["o", index: 3, input: "i love you", groups: undefined]

// matchAll split
let 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正則表達(dá)式的使用示例

$符號在正則替換中的使用

$& 代表匹配到的內(nèi)容
$` 代表匹配到的前面內(nèi)容
$’ 代表匹配到的后面內(nèi)容

let date = '2013/5/6'


let str = '(010)88888888  (020)88888888'
let reg = /\((\d{3,4})\)(\d{7,8})/g
console.log(str.replace(reg, "$1-$2"));
// 010-88888888  020-88888888

// $&  代表匹配到的內(nèi)容  
// $`  代表匹配到的前面內(nèi)容
// $'  代表匹配到的后面內(nèi)容
let str = '我愛你'
console.log(str.replace(/愛/, '不$&')); //我不愛你
console.log(str.replace(/愛/, "$`")); //我我你
console.log(str.replace(/愛/, "$'")); //我你你

感謝各位的閱讀！關(guān)于“javascript正則表達(dá)式的使用示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

javascript正則表達(dá)式的使用示例

JavaScript是什么

正則表達(dá)式的作用

創(chuàng)建正則表達(dá)式的方式

字面量形式

使用對象的形式創(chuàng)建正則表達(dá)式

小案例-實(shí)現(xiàn)輸入字符高亮

選擇符

對轉(zhuǎn)義的理解

字符邊界約束

元字符

用 [ ] 巧妙匹配所有字符

模式符

多行匹配

字符屬性

lastIndex屬性

有效率的y模式

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

郵箱驗(yàn)證

原子組的替換操作

不記錄分組

多種重復(fù)匹配基本使用

禁止貪婪

斷言匹配

?= 后邊是什么的

?<= 前面是什么的

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

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

字符串正則方法

$符號在正則替換中的使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽