Regex是對字串操作的一種邏輯公式,就是用事先定義好的一些特定字元、及這些特定字元的組合,組成一個“規則字串”,這個“規則字串”用來表達對字串的一種過濾邏輯。 Regex的用處非常廣泛,下面講解一下JavaScript下的Regex:
Regex文法:
文法 1
re = /pattern/[flags]
文法 2
re = new RegExp("pattern",["flags"])
參數
re
必選項。將要賦值為Regex模式的變數名。
Pattern
必選項。要使用的Regex模式。如果使用文法 1,用 "/" 字元分隔模式。如果用文法 2,用引號將模式引起來。
flags
可選項。如果使用文法 2 要用引號將 flag 引起來。標誌可以組合使用,可用的有:
· g (全文尋找出現的所有 pattern),比如你有一幾百行的字串要搜尋,那麼你要加g標識(js預設搜尋範圍為一行搜尋)
· i (忽略大小寫)
· m (多行尋找), js預設尋找到第一個符合的字串就完成任
例:
Regexp.js
function match() { str1 = "this is JAVA java Java , this is a first RegExp programe!"; //str2 = "java"; re = /java/i; re2 = /java/g; re3 = new RegExp("java", "i"); r = str1.match(re); r2 = str1.match(re2); r3 = str1.match(re3); document.writeln(r); document.writeln(r2); document.writeln(r3);}
Test.html
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <script language="javascript" src="regexp.js"></script> <script> match(); </script> </body></html>
註冊驗證register.js
function checkUserName() { var username = document.getElementsByName("userName")[0].value; //re = new RegExp("\s*","g"); //re = /(\s*)/g //var isEmpty = re.test(usrname); var nameWarning = ""; if (!(new RegExp("\\S+")).test(username)) { //判斷使用者名稱是否為空白 //alert("請輸入使用者名稱!"); nameWarning = "請輸入使用者名稱!"; document.getElementById("namechick").innerText = nameWarning; return false; } document.getElementById("namechick").innerText = nameWarning; return true;}function checkPassword() { var pwdWarning = ""; var password = document.getElementsByName("password")[0].value; if (password != "" && !(new RegExp("^(\\s*)$")).test(password)) {//密碼不為空白 if(!/\w{6}/.test(password)) { //密碼不是6位的字元或數字 pwdWarning = "密碼為6位的字元或數字"; } } else { //密碼為空白 pwdWarning = "請輸入密碼!"; document.getElementById("pwdchick").innerText = pwdWarning; return false; } document.getElementById("pwdchick").innerText = pwdWarning; return true;}function checkEmail() { var emailWarning = ""; var email = document.getElementsByName("email")[0].value; if (!(new RegExp("[\\w[._]]+@[\\w[._]]+\\.[\\w]+")).test(email)) { //密碼不是6位的字元或數字 emailWarning = "郵箱格式不正確!"; //return false; } document.getElementById("emailchick").innerText = emailWarning; return true;}
register.html
<html><head><title>註冊</title><style type="text/css">.STYLE1 {color: #FF0000}</style><script language="JavaScript" src="register.js"></script><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body><h2 align="center"><strong>註冊:</strong></h2><br><form action="success.html" method="post"onsubmit="return checkForm(this);"><table width="400" border="0" align="center"><tbody><tr><td> 使用者名稱:</td><td><input type="text" name="userName" onblur ="return checkUserName();"></td><td id="namechick" class="STYLE1"></td></tr><tr><td> 密碼:</td><td><input type="password" name="password" onblur ="return checkPassword();"></td><td id="pwdchick" class="STYLE1"></td></tr> <tr><td> 郵 箱:</td><td><input type="text" name="email" onblur ="return checkEmail();"></td><td id="emailchick" class="STYLE1"></td></tr><tr> <td align="center" colspan="3"><input type="submit" name="login" value="注 冊"></td></tr> </tbody></table><br></form></body></html>
success.html
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h1 align="center">註冊成功!</h1> </body></html>