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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
TypeScript高级用法的知识点汇总
Dec 17 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
You might like
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP 的 __FILE__ 常量
2007/01/15 PHP
PHP 动态随机生成验证码类代码
2010/04/09 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
python赋值操作方法分享
2013/03/23 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
中专自我鉴定范文
2013/10/16 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2014年司机工作总结
2014/11/21 职场文书
先进单位事迹材料
2014/12/25 职场文书
工伤调解协议书
2016/03/21 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript