當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript高级之正则表达式

發布時間：2024/7/5 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript高级之正则表达式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 正則表達式概述

1.1 什么是正則表達式

正則表達式（ Regular Expression ）是用于匹配字符串中字符組合的模式。在 JavaScript中，正則表達式也是對象。
正則表通常被用來檢索、替換那些符合某個模式（規則）的文本，例如驗證表單：用戶名表單只能輸入英文字母、數字或者下劃線，昵稱輸入框中可以輸入中文(匹配)。此外，正則表達式還常用于過濾掉頁面內容中的一些敏感詞(替換)，或從字符串中獲取我們想要的特定部分(提取)等。
其他語言也會使用正則表達式，本階段我們主要是利用 JavaScript 正則表達式完成表單驗證。

1.2 正則表達式的特點

靈活性、邏輯性和功能性非常的強。

可以迅速地用極簡單的方式達到字符串的復雜控制。

對于剛接觸的人來說，比較晦澀難懂。比如： ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

實際開發,一般都是直接復制寫好的正則表達式. 但是要求會使用正則表達式并且根據實際情況修改正則表達式. 比如用戶名: /^[a-z0-9_-]{3,16}$/

2. 正則表達式在 JavaScript 中的使用

2.1 創建正則表達式

在 JavaScript 中，可以通過兩種方式創建一個正則表達式。

2.2 測試正則表達式 test

test() 正則對象方法，用于檢測字符串是否符合該規則，該對象會返回 true 或 false，其參數是測試字符串。

3. 正則表達式中的特殊字符

3.1 正則表達式的組成

一個正則表達式可以由簡單的字符構成，比如 /abc/，也可以是簡單和特殊字符的組合，比如 /ab*c/ 。其中特殊字符也被稱為元字符，在正則表達式中是具有特殊意義的專用符號，如 ^ 、$ 、+ 等。

特殊字符非常多，可以參考：
MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
jQuery 手冊：正則表達式部分
正則測試工具: http://tool.oschina.net/regex

這里我們把元字符劃分幾類學習。

3.2 邊界符

正則表達式中的邊界符（位置符）用來提示字符所處的位置，主要有兩個字符。

如果 ^ 和 $ 在一起，表示必須是精確匹配。

3.3 字符類

字符類表示有一系列字符可供選擇，只要匹配其中一個就可以了。所有可供選擇的字符都放在方括號內。

3.4 量詞符

量詞符用來設定某個模式出現的次數。

案例：用戶名驗證

功能需求:

如果用戶名輸入合法, 則后面提示信息為 : 用戶名合法,并且顏色為綠色

如果用戶名輸入不合法, 則后面提示信息為: 用戶名不符合規范, 并且顏色為綠色

分析:

用戶名只能為英文字母,數字,下劃線或者短橫線組成, 并且用戶名長度為 6~16位.

首先準備好這種正則表達式模式 /^[a-zA-Z0-9-_]{6,16}$/

當表單失去焦點就開始驗證.

如果符合正則規范, 則讓后面的span標簽添加 right 類.

如果不符合正則規范, 則讓后面的span標簽添加 wrong 類.

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>span {color: #aaa;font-size: 14px;}.right {color: green;}.wrong {color: red;}</style></head><body><input type="text" class="uname"><span>請輸入用戶名</span><script type="text/javascript">// 功能需求:// 1. 如果用戶名輸入合法, 則后面提示信息為 : 用戶名合法,并且顏色為綠色// 2. 如果用戶名輸入不合法, 則后面提示信息為: 用戶名不符合規范, 并且顏色為綠色var reg = /^[a-zA-Z0-9_-]{6,16}$/var uname = document.querySelector('.uname')var span = document.querySelector('span')uname.onblur = function() {if(reg.test(this.value)) {console.log('正確')span.className = 'right'span.innerHTML = '用戶名格式輸入正確'} else {console.log('錯誤')span.className = 'wrong'span.innerHTML = '用戶名格式輸入錯誤！'}}</script></body> </html>

3.5 括號總結

大括號量詞符. 里面表示重復次數

中括號字符集合。匹配方括號中的任意字符.

小括號表示優先級

可以在線測試: https://c.runoob.com/

3.6 預定義類

預定義類指的是某些常見模式的簡寫方式。

案例：表單驗證

分析:

手機號碼: /^1[3|4|5|7|8][0-9]{9}$/

QQ: [1-9][0-9]{4,} (騰訊QQ號從10000開始)

昵稱是中文: ^[\u4e00-\u9fa5]{2,8}$

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}.register {max-width: 560px;border: 1px solid #CCCCCC;margin: 100px auto;color: #aaa;}.title {text-align: center;padding: 10px;color: #000000;}.register_form {list-style: none;padding: 50px;}.register_form>li {display: flex;justify-content: flex-start;margin-bottom: 15px;align-items: center;}.register_form>li>label {display: flex;justify-content: flex-end;width: 100px;margin-right: 15px;}.register_form>li>input {margin-right: 15px;height: 25px;}.success {color: green;font-size: 12px;}.error {color: red;font-size: 12px;}</style></head><body><div class="register"><h3 class="title">用戶注冊</h3><ul class="register_form"><li><label for="phone">手機號: </label><input id="phone" type="text" /><span class=""></span></li><li><label for="QQ">QQ: </label><input id="QQ" type="text" /><span class=""></span></li><li><label for="name">昵稱: </label><input id="name" type="text" /><span class=""></span></li><li><label for="code">短信驗證碼: </label><input id="code" type="text" /><span class=""></span></li><li><label for="password">密碼: </label><input id="password" type="text" /><span class=""></span></li><li><label for="rePassword">確認密碼: </label><input id="rePassword" type="text" /><span class=""></span></li></ul></div><script type="text/javascript">window.onload = function() {var regphone = /^1[3|4|5|7|8]\d{9}$/ // 手機號碼的正則表達式var regQQ = /^[1-9]\d{4,}$/var regname = /^[\u4e00-\u9fa5]{2,8}$/var regcode = /^\d{6}$/var regpassword = /^[a-zA-Z0-9_-]{6,16}$/var phone = document.querySelector('#phone')var QQ = document.querySelector('#QQ')var name = document.querySelector('#name')var code = document.querySelector('#code')var password = document.querySelector('#password')var rePassword = document.querySelector('#rePassword')function regexp(ele, reg) {ele.onblur = function() {if (reg.test(this.value)) {// console.log('正確')this.nextElementSibling.className = 'success'this.nextElementSibling.innerHTML = '恭喜你，輸入正確'} else {this.nextElementSibling.className = 'error'this.nextElementSibling.innerHTML = '格式不正確，請重新輸入！'}}}rePassword.onblur = function() {if (this.value === password.value) {this.nextElementSibling.className = 'success'this.nextElementSibling.innerHTML = '恭喜你，輸入正確'} else {this.nextElementSibling.className = 'error'this.nextElementSibling.innerHTML = '密碼輸入不一致，請重新輸入！'}}regexp(phone, regphone)regexp(QQ, regQQ)regexp(name, regname)regexp(code, regcode)regexp(password, regpassword)}</script></body> </html>

4. 正則表達式中的替換

4.1 replace 替換

replace() 方法可以實現替換字符串操作，用來替換的參數可以是一個字符串或是一個正則表達式。

4.2 正則表達式參數

案例：敏感詞過濾

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><textarea rows="5" cols="20" id="message"></textarea><button type="button">提交</button><div></div><script type="text/javascript">/* // 替換 replacevar str = 'andy和zep'var newStr = str.replace('andy', 'nana')console.log(newStr)var newStr2 = str.replace(/andy/, 'bob')console.log(newStr2) */var text = document.querySelector('textarea')var btn = document.querySelector('button')var div = document.querySelector('div')btn.onclick = function() {div.innerHTML = text.value.replace(/激情|gay/g, '**')}</script></body> </html>

總結

以上是生活随笔為你收集整理的JavaScript高级之正则表达式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Nodejs 新特性 async awa
下一篇： JS数据结构与算法——冒泡排序（把大的数