首頁 > 開發者 > JavaScript
基本文法：Regex就是“/expression/”+表示搜尋範圍的符號。例如我們要找function這個關鍵詞，就是/function/gi，其中g表示global，就是全域搜尋，i表示ignor，就是忽略大小寫。
在js中，我們通過RegExp類來實現。
這個類裡面有很多很多的符號用來表示不同的索引方法，我先把這個表列一列：
| 元字元 | 說明 | 量詞 | 說明 | 反義字元 | 說明 |
| . | 匹配除了分行符號號(\n)以外的任一字元 | * | 出現次數：[0,+∞) | \W | 字母，數字，底線，漢字以外的字元 |
| ^ | 匹配字串的開始 | + | 出現次數：[1,+∞) | \S | 空白字元以外的字元 |
| $ | 匹配字串的結束 | ? | 出現次數：[0,1] | \D | 數字以外的字元 |
| \b | 匹配單詞邊界 | {n} | 出現次數：n | \B | 匹配非單詞的邊界 |
| \d | 匹配數字 | {n,} | 出現次數：[n,+∞) | [^] | 在字元類中，^號後面的字串以外的任一字元 |
| \s | 匹配任意的空白符 | {n,m} | 出現次數：[n,m] | [-] | 匹配從-前字元到-後字元的字串中的字元/數字 |
| \w | 匹配字母，數字，底線或漢字 |
除了上述符號外，還有三個概念：一個是分組，一個是反向引用，最後是候選。
分組：就是指用()把字串括起來，這樣可以讓字串根據某種規律來組合。同時，括弧還可以進行嵌套，比如用Regex來表達日期的格式：var dateReg=/^(\d{1,4})(-)(\d{1,2}(-)(\d{1,2})$),當然，這個方式也有一定的漏洞，這裡只是表示一下格式問題。
除了這些之外還有方括弧，比如你只希望匹配x y z d w 這幾個字母中的一個，那就寫[xyzdw],如果匹配的是連續的，比如0-4的數字那就[0-4],但是這個是只表示一個字元的。
如果要寫多個，比如匹配ac或者bd，那麼就用“|”符號，寫 (ac|bd)。
比如我們要匹配一個只包含abc的字串，那麼可以寫: abdReg=/^[abc]+$/; 下面是個完整的例子。 複製代碼 代碼如下:<html>
<head>
<title>regular express</title>
<script type="text/javascript" >
var str="agedaga";
var str2="acbaaaccbac";
var abcReg=/^[abc]+$/g;
var test1=false;
var test2=false;
if(abcReg.test(str))
test1=true;
if(abcReg.test(str2))
test2=true;
document.write("result of string "+str+" is: "+test1+"<br> resulet of string "+str2+" is: "+test2);
</script>
</head>
<body >
<body>
</html>
反向引用：是建立在分組基礎上的Regex的應用。首先要知道分組號：按照分組從左至右的順序以左括弧為標誌，從1開始累加。使用辦法有倆：$分組號，或者 \分組號。
第二種適用於在運算式中引用分組的情況，其中“\”是轉義符號，跟平時的意思一樣，在需要匹配保留字元的時候就是用它。
比如我們要匹配一個abc開頭，abc結尾，中間不限的字串：Reg=/^(abc)[a-z]*\1$/; 可以把這一句放在剛才的例子裡嘗試一下，我測試了下沒有錯誤。
幾個常用的匹配正則式：
1.匹配日期：reg=/^\d{4}-(((0[13578]|(10|12))-(0[1-9]|[1-2]\d|3[01]))|(02-(0[1-9])|[1-2]\d)|((0[469]|11)-(0[1-9]|[1-2]\d|30)))$/g;
2.匹配時間：reg=/^([0-1]\d|[2][0-3](:([0-5]\d)){2}$/g;
3.匹配郵箱：reg=/^([a-zA-Z]([0-9a-zA-Z]|(_))*@(([0-9a-zA-Z]|(_))+\.)+[a-zA-Z]{2,9})$/g;
4.匹配中文字元：reg=/^[\u4e00-\u9fa5]+$/g;
javascript操作cookies
cookie是什麼相信大家都了的，所以我也就不死氣巴咧的抄定義了。
用js操作cookie的語句如下：document.cookie=name+"="value+";expires="+date.toGMTString();
接下來我們就用cookie來記錄使用者登陸的使用者名稱和密碼 複製代碼 代碼如下:<html>
<head>
<title>cookie test</title>
<script type="text/javascript" >
function setCookie(cookieName,cookieValue,expires){
document.cookie=cookieName+"="+escape(cookieValue)+";expires="+expires.toGMTString();
}
function conf(){
var form=document.form;
var uname=form.username.value;
var upasw=form.pasw.value;
var expires=new Date();
expires.setTime(expires.getTime()+(7*24*60*60*1000));
setCookie("username",uname,expires);
alert("cookie seted");
}
</script>
</head>
<body >
<form name="form" method="post" action="#">
<table width="300" align="center" border="1">
<tr>
<td align="center" >user name:<input type="text" name="username" ></td>
</tr>
<tr>
<td align="center" >password: <input type="password" name="pasw" ></td>
</tr>
<tr>
<td align="center" ><input type="button" name="confirm" value="confirm" onclick="conf()"></td>
</tr>
</table>
</form>
<body>
</html>
說明一下escape是簡單的加密，expires是生存期，一般定為一周，一周后自動刪除。
當然如果僅僅寫cookie但是不讀的話就白瞎了，於是要學會讀取cookie檔案的內容。
於是我們在script裡面加入兩個讀取用的函數： 複製代碼 代碼如下:<script type="text/javascript" >
function getCookie(cookieObj, cookieName){
var startIndex=cookieObj.indexOf(cookieName);
if(startIndex==-1) return null; // no cookie
startIndex+=cookieName.length+1; //alert(startIndex);
var endIndex=cookieObj.indexOf(";",startIndex);
if (endIndex==-1)
endIndex=cookieObj.length;
return unescape(cookieObj.substring(startIndex,endIndex));
}
function getInfo(){
var form=document.form;
var cookie=document.cookie;
var userName=getCookie(cookie,"username");// get cookie by cookiename
if(userName&&userName.length>0)
form.username.value=userName;
else
alert("no cookie info!");
}
</script>
此外還要再body標籤添一句onload事件：
<body onload="getInfo()" >
於是，這段代碼在IE和FF裡執行無誤，在chrome裡死活出不來cookie。。我實在是想不明白啦~有知道為什麼的大俠麼~求賜教orz
修改cookie有效期間跟修改cookie內容一樣的，不過是找到expires欄位內容，然後修改，如果要刪除cookie，就把它的有效期間設定為昨天就OK了。
userData
跟cookie不同的地方是，userData可以沒有有效期間並且可以儲存更多的資料(640KB cookie：4KB)，所以如果頁面輸入量較大時，可以使用userData來儲存資料。
儲存資料到userData：主要是兩部分：給內容起個名字，把它存到userData中。
學習之前要注意的是，這個是微軟開發的，所以僅適用於IE，經過測試，FF和chrome表示不相容此功能。
這裡有個圖是寫關於儲存的年曆表的：
OK接下來看看userData。
首先要在script前加個style，然後通過設定參數的方法把它給儲存到userData裡： 複製代碼 代碼如下:<html>
<head>
<title>cookie test</title>
<style>
.userData
{
behavior:url(#default#userdata);
}
</style>
<script type="text/javascript" >
function conf(){
var formObj=document.form;
var contentObj=document.content;
contentObj.setAttribute("contentText",contentObj.value);
contentObj.save("contentData"); // 儲存在contentData儲存區
}
</script>
</head>
<body >
<form name="form" method="post" action="#">
<table width="400" align="center" border="1">
<tr>
<td>title:</td>
<td><input type="text" name="title" size="50"></td>
</tr>
<tr>
<td>content:</td>
<td><textarea name="content" class="userData" cols="45" rows="10"></textarea></td>
</tr>
<tr align="center">
<td colspan="2" align="center"><input type="button" name="Save" value="confirm" onclick="conf()"></td>
</tr>
</table>
</form>
<body>
</html>
擷取的函數跟儲存是相反的過程，就是取出來其實很好理解：
添加一個function： 複製代碼 代碼如下:function getContent(){
var formObj=document.form;
var contentObj=formObj.content;
contentObj.load("contentData");
contentObj.value=contentObj.getAttribute("contentText");
}
改好後的完整程式： 複製代碼 代碼如下:<html>
<head>
<title>cookie test</title>
<style>
.userData{behavior:url(#default#userData);}
</style>
<script type="text/javascript" >
function saveContent(){
var formObj=document.form;
var contentObj=formObj.content;
contentObj.setAttribute("contentText", contentObj.value);
contentObj.save("contentData"); // 儲存在contentData儲存區
alert("saved");
}
function getContent(){
var formObj=document.form;
var contentObj=formObj.content;
contentObj.load("contentData");
contentObj.value=contentObj.getAttribute("contentText");
}
</script>
</head>
<body onload="getContent()">
<form name="form" method="post" action="#">
<table width="400" align="center" border="1">
<tr>
<td>title:</td>
<td><input type="text" name="title" size="50"></td>
</tr>
<tr>
<td>content:</td>
<td><textarea name="content" class="userData" cols="45" rows="10"></textarea></td>
</tr>
<tr align="center" >
<td colspan="2">
<input type="button" name="Save" value="confirm" onclick="saveContent()">
</td>
</tr>
</table>
</form>
<body>
</html>
好接下來說個相容還算可以的：（下面這段都是抄的，因為轉載太多我也不知道源出處了。）
localStorage： 相對於其他方案，localStorage有自身的優點：容量大、易用、強大、原生支援；缺點是相容性差些（chrome, safari, firefox，IE 9，IE8都支援 localStorage，主要是IE8以下版本不支援）、安全性也差些（所以請勿使用localStorage儲存敏感資訊）。
非常通俗易懂的介面:
localStorage.getItem(key):擷取指定key本機存放區的值
localStorage.setItem(key,value)：將value儲存到key欄位
localStorage.removeItem(key):刪除指定key本機存放區的值
留意localStorage儲存的值都是字串類型，在處理複雜的資料時，比如json資料時，需要藉助JSON類，將json字串轉換成真正可用的json格式，localStorage第二個實戰教程會重點示範相關功能。localStorage還提供了一個storage事件，在儲存的值改變後觸發。
目前瀏覽器都帶有很好的開發人員調試功能，下面分別是Chrome和Firefox的調試工具查看
報廢了好久，終於抖擻精神把進階1寫好了，以後不能再這麼墮落了哎。。閉關修鍊還是必須的~。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
