面向對象編程-正則表達式
我相信不管是學什麼語言，是哪個派路的對這幾個字應該不會陌生吧，正則表達式終於讓我給碰到了，之前看到了說實話那是真看不懂，一點頭緒沒有，猜我都猜不出是什麼意思，今天終於把這個了解了一番，大概對正則也有一個把握了，今天主要是學習了js的正則一些應用，比如說表單驗證啊、中文輸入驗證啊、敏感詞的替換啊、提取字符串啊這些、
1.
首先第一個案例來一個初次認識正則表達式學到的一些基礎，是一個座機號碼的驗證案例，
本案例兩個注意點 一個是正則表達式的或只有一個豎線
一個是驗證時候數字也要加引號
<!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> <!-- 座機號碼驗證 全國座機號碼兩種格式 010-12345678 或者 0100-1234567 --> <script> var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/ // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/ // var reg = /^\d{3,4}-\d{7,8}$/ console.log(reg.test('010-12345689')); // 本案例兩個注意點 一個是正則表達式的或只有一個豎線 // 一個是驗證時候數字也要加引號 </script> </body> </html>
2.
第二個案例來一個替換的案例，這個案例大家應該不陌生，比如在網上問候對方爸媽的時候經常會碰到這種尷尬情況，打出了好大些字，很有成就準備發出去的時候，結果全把精髓部分變成了*號
<!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> <textarea name="" id="" cols="30" rows="10"></textarea> <button>提交</button> <div></div> <script> var text = document.querySelector('textarea') var btn = document.querySelector('button') var div = document.querySelector('div') btn.onclick = function() { div.innerHTML = text.value.replace(/激情|愛情/g, '**') } </script> </body> </html>
3.
接下來是一個比較繁瑣的一個案例，一個關於表單驗證的案例
window.addEventListener('load', function() {
var tel = /^1[3|4|5|8|9]\d{9}$/
var phone = document.querySelector('#tel')
function getBlur(obj, regexp, str) {
obj.onblur = function() {
if (regexp.test(this.value)) {
this.nextElementSibling.innerText = ''+str+'輸入正確'
this.nextElementSibling.className = 'success'
} else {
this.nextElementSibling.innerText = ''+str+'輸入錯誤'
this.nextElementSibling.className = 'error'
}
}
}
// 1.手機號碼驗證
getBlur(phone, tel, '手機號')
// 2.QQ驗證
var regqq = /^[1-9]\d{4,10}$/
var qq = this.document.querySelector('#qq')
getBlur(qq, regqq, 'QQ號')
// 3.中文漢字匹配
// 漢字採用的正則是中文第一個的Unicode編碼和最後一個
var uname = /^[\u4e00-\u9fa5]{2,8}$/
var nc = this.document.querySelector('#nc')
getBlur(nc, uname, '昵稱')
// 4.短訊驗證碼
var msgreg = /^\d{6}$/
var msg = this.document.querySelector('#msg')
getBlur(msg, msgreg, '驗證碼')
// 5.密碼
var pasreg = /^\w{6,16}$/
var pwd = this.document.querySelector('#pwd')
getBlur(pwd, pasreg, '密碼')
// 6.確認密碼
var surePwd = this.document.querySelector('#surepwd')
surePwd.onblur = function() {
if (this.value == pwd.value) {
this.nextElementSibling.innerText = '密碼輸入正確'
this.nextElementSibling.className = 'success'
} else {
this.nextElementSibling.innerText = '兩次密碼不一樣'
this.nextElementSibling.className = 'error'
}
}
})
5.
然後是關於字符串同時也能被正則所使用的兩個 方法一個是替換的replace方法，一個是可以作為關鍵字搜索的提取方法
<!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> <script> /* 將下列字符串使用正則表達式替換文本 將字符串 'cqyzsC012QzAabcd'中的acq(忽略大小寫)替換為'你好' */ var str = 'cqyzsC012QzAabcd' var str1 = '' str1 = str.replace(/[acq]/gi, '你好') console.log(str1); </script> </body> </html>
<!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> <script> /* 郵箱提取 將字符串'小明：大神么么噠，正好是我想要的，我的郵箱是[email protected]小紅： 我老公最愛看這個了，我想給他一個驚喜，么么么噠，郵箱是[email protected]我：好人一生平安，郵箱是[email protected]'中所有 的郵箱號碼提取出來 */ var str = '小明：大神么么噠，正好是我想要的，我的郵箱是[email protected]小紅：我老公最愛看這個了，我想給他一個驚喜，么么么噠，郵箱是[email protected]我：好人一生平安，郵箱是[email protected]' // console.log(str); var str1 = str.match(/[a-zA-Z]+@[a-zA-Z0-9]+.com/g) console.log(str1); </script> </body> </html>
