天天看点

javascript 正则表达式

ECMAScript基础:

  1. numberObject.toFixed(2); 填充到两位小数

     var numberObject = new Number(9);

    numberObject.toFixed(2);// outputs 9.00

  2. stringObject.lastIndexOf();

     "akescript.cn".indexOf("c") = 4;

    "akescript.cn".lastIndexOf("c") = 10; 

  3. stringObject.localeCompare(stringObject2);stringObject按字母排序排在参数之前则返回负数(-1);相同返回0 ;反之返回正数(1)var string1= new String("ake");

    string1.localeCompare("ke") //outputs -1

    string1.localeCompare("ake") //outputs 0

    string1.localeCompare("a") // outputs 1

  4. stringObject.slice(sNum,eNum);  类似于substring()方法,不同的是参数为负有效。

    "akescript".substring(3); // outputs "script"

    "akescript".slice(-6); // outputs "script"

  5. delete object.name 移除已自定义的属性或方法的引用

     var o = new Object;

    o.name = "ake87";

    alert(o.name); // outputs "ake87"

    delete o.name;

    alert(o.name); // outputs undefined

  6. void对任何值都返回undefined

    <a href="javascript:void(window.open('about:blank'));">Open</a> 

  7. 一元加号"+"将字符串的数字转变为数字

    var sNum = "44"; var iNum = +sNum;

     alert(typeof iNum) ; //outputs "number"

  8. undefined类型不能用于逻辑与或非的运算
  9.  ===、!== 在比较之前不进行类型的转换
  10.  functionObject.length得到该函数默认的参数个数

    于2008-11-25。以后不知道还会不会这么认真。。。

对象基础

  1. 数组可根据需要增加或减少项。增加只需要把存放值的项放入下一个未使用的位置即可。

    var arr=new Array(3); var arr[4]="ake" // arr.length=5   arr[3]=null;

  2. var str="green";    var arr = str.split(""); // arr = ["g","r","e","e","n"];
  3. arr.slice(sNum,eNum); 同样对数组有效。操作的不是字符而是数组的项。
  4. array.pop();   删除数组的最后一项,并返回该项的值。

    array.push(); 在数组的最后一个位置之后,添加一个数组项,参数为添加的项值

  5. array.shift()/ unshift();使用方法同上,不同的是操作的不是最后一项,而是第一项。
  6. array.reverse();颠倒数组项的顺序。

    array.sort(); 将数组想的值转换为字符串,比较后按“升序”排列数组。

  7. splice(sNum,dNum,items);数组中插入项。sNum:插入的位置,dNum:删除的项的个数,items:插入的项值。

    array.splice(0,2);删除数组的前两项。

    array.splice(2,0,"ake","script"); 在数组第二项位置插入“ake”和“script”值。

    array.splice(2,1,"ake","script"); 删除数组的第二项,并插入项“ake”和“script”。

  8. 应该尽量避免使用escape(); 若有需要可是使用encodeURI();
  9. 得到一个在2-9之间的随机数。

    Math.floor(Math.random()*8 + 2); ==> Math.floor(Math.random()*total_Numbers + first_item_value);

  10. 字符串了连接:建议使用join()方法,该方法比使用“+”连接字串更节约时间。
  11. StringBuffer类:

    function StringBuffer(){this._strings  = new Array;}StringBuffer.prototype.append = function(str){this._strings.push(str);};StringBuffer.prototype.toString = function(){return this._strings.join("");};

  12. 类的创建:使用构造函数和原型的方法。this+prototype。

    类的继承:使用构造函数和原型链的方法。call()/append() + prototype

    构造函数——> 属性; 原型——> 方法。

浏览器中的JavaScript

  1. moveBy(dx,dy);resizeBy(dw,dh);窗口相对移动或相对改变,参数为改变的值。

    moveTo(dx,dy);resizeTo(dw,dh);窗口移动到dx,dy;窗口大小变为宽dw高dh。

  2. IE:window.screenLeft,window.screenTop——判断窗口的位置

    document.body.offsetWidth(offsetHeight)获取视窗口的大小(HTML页面的区域)

    Mozilla,Opera,safari:window.screenX(screenY) 判断窗口位置。

    innerWidth(Height) 判断视窗口的大小。

    window.outerWidth(outerHeight) 判断浏览器窗口的大小。

  3. alert(只有OK按钮)——confirm(OK和Cancel按钮)——prompt(OK、Cancel按钮和一个text文本框)
  4. 在执行一组指定的代码前等待一段时间,使用暂停(setTimeout);若要反复执行某些代码,则使用间隔(setInterval)

    js暂停方法:var TimeoutId = setTimeout(someFunction,1000);clearTimeout(TimeoutId);

  5. 每当浏览器遇到</script>时,它都假定代码块是完整的。(即使它出现在JavaScript字符串中),这时应该截断它:"</scr" + "ipt>"。
  6. 当页面完全载入后使用write()会抹去当前页面的所有内容。
  7. 对window.open打开的窗体写入代码使用命令:document.open();document.write();docuemnt.close();
  8. location.href方法导航页面会将新的URL地址记入“历史”中。location.replace不会(about document.URL??)
  9. location.reload();参数为true时,页面将从服务器重新载入;false时,从缓存中重新载入。

    若需要使用,最好把reload()放在最后一行。

  10. cookieEnabled:说明是否启用了cookie的boolean值。javaEnabled(),是否启用了java

    注意不同浏览器的可用性

  11. screen.availWidth/availHeight:窗口可使用的屏幕宽/高度,其中包括操作系统元素(如windows的工具栏)

    screen.width/height :屏幕的宽/高度,以像素计

  12. screen.colorDepth:用户表示颜色的位数

    2008-11-26

DOM基础

  1. 特性/方法        类型/返回类型

    nodeName        String

    nodeValue        String

    nodeType        Number

    ownerDocument        Document

    firstChild        Node

    lastChild        Node

    childNodes        NodeList

    previousSibling        Node

    nextSibling        Node

    hasChildNodes()        Boolean

    attributes        NamedNodeMap*        包含了代表一个元素的特性的Attr对象;仅用于Element节点

    appendChild(node)        Node

    removeChild(node)        Node

    replaceChild(newnode,oldnode)        Node        在childNodes中的oldnode替换成newnode

    insertBefore(newnode,refnode)        Node        在childNodes中的refnode之前插入newnode

    *NamedNodeMap——同时用数值和名字进行索引的节点表;用于表示元素特性。

  2. <html/>元素:var oHtml = document.documentElement;

    <head/>元素:var oHead = oHtml.firstChild || oHtml.childNodes[0] || oHtml.childNodes.item(0);

    <body/>元素:var oBody = oHtml.lastChild || oHtml.childNodes[1] || oHtml.childNodes.item(1);

  3. Mozilla认为元素之间的空白都是Text节点,而IE则会忽略这些空白。
  4. 使用nodeType特性检验节点类型。
  5. getNamedItem(name)——返回nodeName属性值等于name的节点;

    removeNamedItem(name)——删除nodeName属性值等于name的节点;

    setNamedItem(node)——将node添加到列表中,按其nodeName属性进行索引;

    item(pos)——像NodeList一样,返回在位置pos的节点;

    这些方法都是返回一个Attr节点,而非特性值。——貌似比较复杂的方法。。。

  6. getAttribute(name)——等于attributes.getNamedItem(name).value;

    setAttribute(name,newvalue)——等于attributes.getNamedItem(name).value=newvalue;

    removeAttribute(name)——等于attributes.removeNamedItem(name)。

    相对上一种方法好直观的多,也简洁的多。

  7. document.getElementsByTagName("*")返回document中包含的所有元素。

    当参数是一个星号的时候,IE6.0并不返回所有的元素,必须使用document.all来替代它

  8. document.getElementsByName();返回name值等于指定值的所有元素。

    但在IE6.0和Opera7.5在这个方法使用上还存在一些错误。它们还会返回id等于指定名称的元素。它们还仅仅检查<input/>和<img/>元素。

  9. 对于document.getElementById()方法在IE6.0中会返回与给定的ID匹配的name特性的元素。
  10. 方法        描述

    createAttribute(name)        用给定名称name创建特性节点

    *createCDASection(text)        用包含文本text的文本子节点创建一个CDATASection

    createComment(text)        创建包含文本text的注释节点

    createDocumentFragment()        创建文档碎片节点(什么东西??)

    createElement(tagname)        创建标签名为tagname的元素

    *createEntityReference(name)        创建给定名称的实体引用节点

    *createProcessingInstruction(target,data)        创建包含给定target和data的PI节点

    createTextNode(text)        创建包含文本text的文本节点

    *只有Mozilla浏览器支持此方法。

  11. 所有的的DOM操作必须在页面完全载入之后才能进行。当页面正在载入时,要向DOM插入相关代码是不可能的,因为在页面完全下载到客户端机器之前,是无法完全构建DOM树的。
  12. 一旦把节点添加到document.body(或者它的后代节点)中,页面就会刷新并反映出这个变化。所以,若要向document添加大量数据时会是页面不断的刷新变化。想要避免这种情况,可以使用创建文档碎片的方法:createDocumentFagment();将要添加的节点先appendChild()添加到这个创建的文档碎片对象上,然后一次性将文档碎片以appendChild方法添加到document.body中。前一个appendChild()的调用实际上并不是把文档碎片节点本身追加到<body/>元素中,而是仅仅追加碎片中的子节点。(?)
  13. Attribute的方法属于核心的DOM方法;而如oA.href的直接引用属性的方法属于HTML DOM的方法。
  14. setAttribute()在IE上有些许问题,因此最好使用HTML DOM的方法,且个人觉得此种方法更直观和简洁。
  15. <table/>元素的方法:

    caption——指向<caption/>元素(如果存在)

    tBodies——<tbody/>元素的集合

    tFoot——指向<tfoot/>元素(如果存在)

    tHead——指向<thead/>元素(如果存在)

    rows——表格中所有行的集合

    createTHead()——创建<thead/>元素并将其放入表格

    createTFoot()——创建<tfoot/>元素并将其放入表格

    createCaption()——创建<caption/>元素并将其放入表格

    deleteTHead()——删除<thead/>元素

    deleteTFoot()——删除<tfoot/>元素

    deleteCaption()——删除<caption/>元素

    deleteRow(position)——删除指定位置上的行

    insertRow(position)——在rows集合中的指定位置插入一个新行

  16. <tbody/>元素添加以下内容:

    rows——<tbody/>中所有行的集合

    <tr/>元素添加以下内容:

    cells——<tr/>元素中所有的单元格

    deleteCell(position)——删除给定位置上的单元格

    insertCell(position)——在cells集合的给定位置插入一个新的单元格

  17. 以上方法仅仅属于DOM level1的部分。DOM level2中的功能:DOM遍历(NodeIterator)和TreeWalker方法。

    目前只有Mozilla和其他少数浏览器支持DOM level2以上的功能,所以这些方法可以暂时不予以考虑。

  18. implementation对象用来确定给定的DOM实现到底支持DOM的哪些部分。用document.implementation.hasFeature("要检查的特征","特征的版本")方法来检验。

    但这个方法有其明显的缺陷——DOM实现是否与DOM标准一致是由去进行实现的人(或公司)决定的。故该方法的结果其实并不一定是完全真实的,包括Mozilla。

  1. sString:被指定的要匹配的字符串。

    var reg=/regstr/gi;创建个RegExp对象。regstr:正则表达式;g:全局匹配;i:不区分大小写。

    reg.test(sString);如果给定字串(只有一个参数)匹配该模式,则返回true,否则返回false

    reg.exec(sString);返回一个数组。数组中的第一个条目是第一个匹配;其他的反向引用。(?)

    sString.match(reg);该方法返回一个包含在字符串中的所有匹配的数组。

    sString.search(reg);返回在字符串中出现的一个匹配的位置(int)。

  2. sString.replace(reg,reStrOrFunc);第二个参数可以是字符串或者函数(应该要有返回值吧?)

    sString.split(reg);参数可以是正则表达式,如/\,/:“,”

  3. 元字符:( [ { \ ^ $ | ) ? * + .
  4. 特殊字符:

    \t         制表符

    \n         换行符

    \r         回车符

    \f         换页符

    \a        alert字符

    \e        escape字符

    \cx      与X相对应的控制字符

    \b        回退字符

    \v        垂直制表符

    \0        空字符

  5. 字符类:

    以下内容是个人的理解,如果您觉得其内容有误导他人的嫌疑,请留言相告,我会修改的。

    [abc],简单类:匹配方括号中任一字符,a或b或c;

    ^,负向类:是非的意思,如[^ab]表示匹配不包含a或b的情况;

    [a-z],范围类:匹配从a到z的字符。注意该例子不包含A-Z之间的字符,或者你可以使用i选项;

    组合类:是由多种类组合而成的字符类。如:[a-k7-8\n],匹配所有a-k以及7-8的字符,以及一个换行符;

  6. 预定义类: 等同于: 匹配

    .                  [^\n\r]                除了换行和回车之外的任意字符

    \d                [0-9]                 数字

    \D               [^0-9]                非数字字符

    \s                [ \t\n\x0B\f\r]      空白字符

    \S               [^ \t\n\x0B\f\r]     非空白字符

    \w               [a-zA-Z_0-9]     单词字符(英文字符、数字和下划线)

    \W              [^a-zA-Z_0-9]   非单词字符

  7. 量词:

    简单量词:

    ?  出现零次或一次

    *  出现零次或多次(任意次数)

    +  出现一次或多次(至少出现一次)

    {n}  出现n次(固定次数)

    {n,m} 至少出现n次,但不超过m次

    {n,} 至少出现n次

    2008.12.1

  8. 贪婪的、惰性的和支配性的量词

    贪婪量词:先看整个字符串是否匹配。若没有发现匹配,则去掉最后字符串的最后一个字符再尝试匹配,如此循环,直到发现一个匹配或者字符串不剩一个字符。目前为止讨论的都是贪婪的量词。

    惰性量词:先看字符串中的第一个字母是否匹配。若没有发现匹配,则读入下一个字符进行匹配尝试,如此循环,直到发下一个匹配或者整个字符串都检查过也没有匹配。它与贪婪量词的工作方式恰好相反。

    支配量词:只尝试匹配整个字符串,若没有发现匹配,停止尝试。(返回false)

    贪婪         惰性         支配         描述

    ?               ??            ?+           零次或一次出现

    *                *?             *+           零次或多次出现

    +               ++            ++           一次或多次出现

    {n}            {n}?          {n}+        恰好n次出现

    {n,m}       {n,m}?    {n,m}+    至少n次至多m次出现

    {n,}           {n,}?        {n,}+       至少n次出现

    PS:浏览器对支配量词的支持还很不完善。IE和Opera不支持支配量词,使用会抛出一个错误。Mozilla不会产生错误,但它会将支配量词看作是贪婪的。

  9. 分组:通过使用一系列小括号()包围一系列字符、字符类以及量词来使用。

     String.prototype.trim = function(){var reg = /^\s+(.*?)\s+$/;return this.replace(reg,$1);}//该方法与其他语言中的trim()方法一样,用以除去字符串头尾的空格。

  10. .1:在完成表达式计算后,每个分组都被存放在一个特殊的地方以备将来使用。这些存储在分组中的特殊值,称之为反向引用。如:(a?(b?(c?))),第一个反向引用为(a?(b?(c?))),第二个为(b?(c?)),第三个为(c?)。
  11. .2:在使用正则表达式对象的test()、match()或search()方法后,反向引用的值可以从RegExp构造函数中获得。如:

    var sString = "#123456789";

    var reg = /#(\d+)/;

    reg.test(sString);

    alert(RegExp.$1);//outputs "123456789"

    还可以直接在定义分组的表达式中包含反向引用。如 /dogdog/ === /(dog)\1/

    .3:反向引用可以用在String对象的replace()方法中:

    var sString = "1234 56789";

    var reg = /(\d{4}) (\d{4})/;

    var sNew = sString.replace(reg,"$2 $1");

    alert(sNew);//outputs "5678 1234";

  12. 候选操作符,“|”:类似于或操作。

    var reg = /badword|otherbadword/gi;

    var sString = "this is a string using badword1 and badword2";

    var sNew = sString.replace(reg,"****");

    alert(sNew);//outputs "this is a string using ****1 and ****2";//屏蔽敏感字词

  13. 创建反向引用的分组称之为捕获性分组,而非捕获性分组则无需存储结果;非捕获性分组创建方法:(?: /*..*/ )

    String.prototype.stripHTML = function(){var reg=/<(?:.|\s)*?>/g;return this.replace(reg,"");}//剔除字串中的HTML标签

    var sTest = "<b>this is a test string</br>";

    alert(sTest.stripHTML());//outputs "this is a test string"

  14. 前瞻:告诉正则表达式运算器向前看一些字符而不移动其位置,简单讲:当某个特定的字符分组出现在另一个字符串之前时,才去捕获它(或匹配它)。

    前瞻存在正向前瞻和负向前瞻。

    正向前瞻检查的是接下来出现的是不是某个特定字符集。而负向前瞻则检查接下来的不应该出现的特定字符集。(两则相对是非的关系,相关字符是否相连)

  15. 创建正向前瞻要将模式放在(?=和)之间。注意这不是分组,分组不会考虑前瞻的存在。

    var sString1 = "bedroom";

    var sString2 = "bedding";

    var reg = /(bed(?=room))/;

    alert(reg.test(sString1));//outputs "true"

    alert(RegExp.$1);    //outputs "bed"//引用不包含"room"

    alert(reg.test(sString2));//outputs "false"

    以上为正向前瞻,创建负向前瞻要将模式放在(?!和)之间。上个例子用负向前瞻将匹配bedding。

    尽管JavaScript支持正则表达式前瞻,但它不支持后瞻。后瞻可以匹配这种模式:“匹配b当且仅当它前面没有a”。

  16. 边界      描述

    ^            行开头

    $           行结尾

    \b         单词的边界

    \B         非单词的边界

  17. 多行模式

    在正则表达式后面添加m选项:/(\d)/gm。将对每行进行匹配而不是只对全局。多行模式会改变^和&的边界行为。

  18. RegExp对象的实例属性:

    global——Boolean值,表示g(全局选项)是否已设置。

    ignoreCase——Boolean值,表示i(忽略大小写选项)是否已设置。

    lastIndex——整数,代表下次匹配将会从哪个字符位置开始(只有当使用exec()或test()函数才会填入,否则为0)。

    multiline——Boolean值,表示m(多行模式选项)是否已设置。

    source——正则表达式的源字符串形式。例如,表达式/[ba]*/的source将返回“[ba]*”。

  19. 属性lastIndex表示正则表达式在某个字符串中停止之前,查找了多远:

    var sString="bbq is short for barbecue";

    var reg=/b/g;

    reg.exec(sString);

    alert(reg.lastIndex);//outputs "1"

    alert(reg.lastIndex);//outputs "2"

    alert(reg.lastIndex);//outputs "18"

    alert(reg.lastIndex);//outputs "21"

    可以自行设定lastIndex;

  20. 静态的RegExp属性:

    长名                短名        描述

    input                 $_        最后用于匹配的字符串(传递给exec()或test()的字符串)

    lastMatch        $&        最后匹配的字符

    lastParen        $+        最后匹配的分组

    leftContext       $`        在上次匹配的前面的字串

    multiline          $*        用于指定是否所有的表达式都使用多行模式的布尔值

    rightContext    $'        在上次匹配之后的字串

    这些属性可以告诉你,关于刚使用exec()或test()完成的匹配的一些特定信息

    var sString = "this has been a short,short summer";

    var reg  = /(s)hort/g;

    alert(RegExp.input);        //outputs "this has been a short,short summer"

    alert(RegExp.leftContext);        //outputs "this has been a"

    alert(RegExp.rightContext);        //outputs ", short summer"

    alert(RegExp.lastMatch);        //outputs "short"

    alert(RegExp.lastParen);        //outpus "s"

  21. IE和Opera并不支持RegExp.multiline,所以最好单独的对每个表达式设置m选项而不要直接设置这个标记。
  22. 日期验证函数:

    function isValidDate(str){   var reg=/(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20\d{2})/;    return reg.test(str);}

    alert(isValidDate("5/5/2004"));        //outputs "true"

    alert(isValidDate("5/13/2004"));        //outputs "false"

  23. 电子邮件地址验证函数:

    function isValidEmail(str){      var reg=/^(?:\w+\.?)*\w+@(?:\w+\.?)*\w+$/;     return reg.test(str);}

    alert(isValidEmail("ake87#126.com"));        //outputs false