编程 Javascript

javascript 进阶篇1 正则表达式，cookie管理，userData

Posted in Javascript onMarch 14, 2012

首先，什么事正则表达式呢，其实引入概念很多时候并不能帮我们明白它到底是什么，所以我先简单描述下，正则表达式，其实就是一个记录字符串规则则的字符串，等我们看完这一部分，也就能明白它到底是什么了。

基本语法：正则表达式就是“/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	匹配字母，数字，下划线或汉字

除了上述符号外，还有三个概念：一个是分组，一个是反向引用，最后是候选。
分组：就是指用()把字符串括起来，这样可以让字符串根据某种规律来组合。同时，括号还可以进行嵌套，比如用正则表达式来表达日期的格式：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>

反向引用：是建立在分组基础上的正则表达式的应用。首先要知道分组号：按照分组从左到右的顺序以左括号为标志，从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表示不兼容此功能。
这里有个图是写关于存储的年历表的：

javascript 进阶篇1 正则表达式，cookie管理，userData

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写好了，以后不能再这么堕落了哎。。闭关修炼还是必须的~。

javascript 进阶篇1 正则表达式，cookie管理，userData

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

function, new function, new Function之间的区别

Mar 08 Javascript

javascript学习网址备忘

May 29 Javascript

JS实现可改变列宽的table实例

Jul 02 Javascript

jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

Mar 06 Javascript

jQuery截取指定长度字符串的实现原理及代码

Jul 01 Javascript

js闭包实例汇总

Nov 09 Javascript

JavaScript子窗口调用父窗口变量和函数的方法

Oct 09 Javascript

易操作的jQuery表单提示插件

Dec 01 Javascript

vue一个页面实现音乐播放器的示例

Feb 06 Javascript

jQuery仿移动端支付宝键盘的实现代码

Aug 15 jQuery

jQuery实现图片随机切换、抽奖功能(实例代码)

Oct 23 jQuery

vue + elementUI实现省市县三级联动的方法示例

Oct 29 Javascript

javascript 基础篇4 window对象，DOM

Mar 14 #Javascript

javascript 基础篇3 类，回调函数，内置对象，事件处理

Mar 14 #Javascript

javascript 基础篇2 数据类型，语句，函数

Mar 14 #Javascript

javascript 基础篇1 什么是js 建立第一个js程序

Mar 14 #Javascript

JSON.stringify 语法实例讲解

Mar 14 #Javascript

33个优秀的 jQuery 图片展示插件分享

Mar 14 #Javascript

asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

Mar 14 #Javascript