`
lucane
  • 浏览: 119304 次
  • 性别: Icon_minigender_1
  • 来自: 江湖
社区版块
存档分类
最新评论

JavaScript正则表达式小知识

阅读更多
需要有JavaScript和Regular Expressions基本知识

1、Regular Expression Object
正则表达式对象:本对象包含正则表达式模式以及表明如何应用模式的标志。

2、RegExp Object
RegExp对象:保存有关正则表达式模式匹配信息的固有全局对象。

这两个是不一样的,具体的参见参考手册
http://msdn.microsoft.com/en-us/library/htbw4ywd(v=VS.85).aspx
这个是Microsoft官方的参考手册
暂时没有发现MDC等其它地方的参考手册有明确说明这一点
https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions
但是这里面提到了这类特性的用法

下面看两段小小的代码,也是从百度页面上抠下来的,做了些小的调整

addClassName = function(d, f) {

    // ...    
    // 判断这个DOM对象是否存在,不存在就直接返回,这些代码都被我省掉了


    // 先把这个DOM对象的class属性的值按space截开转成字符串数组b
    // c是一个去前后空格的函数,简单测试情况下也可以去掉
    var b = d.className.split(" "), c = trim;


    if(!new RegExp("(^|\\s{1,})" + c(f) + "(\\s{1,}|$)").test(d.className)) {

        d.className=c(b.concat(f).join(" "));

    }

};


这个函数看名字就很清楚了,是给页面上的对象的class属性添加值,因为class属性可以有多个用space隔开的值
只是在添加值之前做了很多判断和处理,我们只看正则表达式相关的
也就是那个if语句内的情况
把传进来的属性值和已经存在的class属性值相比较,如果不存在就添加到尾部,如果存在就什么都不做
它通过new创建的正则表达式对象一共可以侦测出class属性值是类似以下的这几种情况,也满足了功能需求

red noborder flashing
noborder flashing
red noborder
noborder


也就是当我们传入"noborder"这个值的时候,如果原来class属性值已经是类似上面这四种情况都可以被侦测出来


再来看另外的一段代码,这段代码跟上面是相反的,就是把class属性中某个指定的值去掉(如果已经存在这个指定的值的话)

removeClassName = function(d, f) {

    // ...    
    // 判断这个DOM对象是否存在,不存在就直接返回,这些代码都被我省掉了


    var c = trim, re = new RegExp("(^|\\s{1,})" + c(f) + "(\\s{1,}|$)", "g");

    d.className = c(d.className.replace(re, "$2"));

};


替换函数是查找到了就替换,并把它替换成$2,这个$2就是RegExp全局对象的一个属性,它始终存储的是最后一次匹配的结果,一共可以保存$1到$9共9个子匹配的结果
如果没有子匹配,默认的$n值就是空字符串
比如我们这里的re正则表达式对象只有两个子匹配,那么就只可能有$1和$2有值,其它都是空串
这里我们用$2来替换,实际$2返回的可能只有任何的空白字符或者字符串结尾,可以用charCodeAt函数将其unicode编码打印出来观察

通过例子来看
如果:
d.className = "red noborder flashing"
f = "noborder"
最后替换的结果就是"red flashing"

如果:
d.className = "noborder flashing"
f = "noborder"
最后替换的结果就是" flashing"

如果:
d.className = "red noborder"
f = "noborder"
最后替换的结果就是"red"

如果:
d.className = "noborder"
f = "noborder"
最后替换的结果就是""
分享到:
评论

相关推荐

    常用java正则表达式

    如果你曾经用过Perl或任何其他内建正则表达式支持的语言,你一定知道用正则表达式处理文本和匹配模式是多么...本文接下来的内容先简要地介绍正则表达式的入门知识,然后以Jakarta-ORO API为例介绍如何使用正则表达式。

    javascript正则表达式基础知识入门.docx

    javascript正则表达式基础知识入门.docx

    正则表达式完整高清版

    全书分为三大部分:第一部分主要讲解正则表达式的基础知识,涵盖了常见正则表达式中的各种功能和结构;第二部分主要讲解关于正则表达式的更深入的知识,详细探讨了编码问题、匹配原理、解题思路;第三部分将之前介绍...

    Javascript正则表达式校验共7页.pdf.zip

    Javascript正则表达式校验共7页.pdf.zip

    javascript正则表达式详解

    本教材介绍正则表达式的入门知识,并以Jakarta-ORO API为例介绍如何使用正则表达式

    JavaScript正则表达式

    JavaScript正则表达式 一、认识正则表达式 1、正则表达式是描述字符模式的对象,正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。 2、String和RegExp都定义了使用正则表达式进行强大...

    java正则表达式.docx

    java正则表达式.docx 如果你曾经用过Perl或任何其他内建正则表达式支持的语言,你一定知道用正则表达式处理...本文接下来的内容先简要地介绍正则表达式的入门知识,然后以Jakarta-ORO API为例介绍如何使用正则表达式。

    Java正则表达式详解

    如果你曾经用过Perl或任何其他内建正则表达式支持的语言,你一定知道用正则表达式处理文本和匹配模式是多么...本文接下来的内容先简要地介绍正则表达式的入门知识,然后以Jakarta-ORO API为例介绍如何使用正则表达式。

    javascript正则表达式基础篇

    主要是介绍javascript正则表达式的一些基础知识,主要是介绍javascript的正则书写方法与常用实例,需要的朋友可以参考下

    正则表达式

    许多语言,包括Perl、PHP、Python、JavaScript和JScript,都支持用正则表达式处理文本,一些文本编辑器用...本文接下来的内容先简要地介绍正则表达式的入门知识,然后以Jakarta-ORO API为例介绍如何使用正则表达式。

    JavaScript正则表达式下之相关方法

    上篇文章给大家介绍了JavaScript 正则表达式上之基本语法介绍了JavaScript正则表达式的语法,有了这些基本知识,可以看看正则表达式在JavaScript的应用了,在一切开始之前,看看RegExp实例的几个属性 RegExp实例...

    Java正则表达式规则(技术文档)

    java正则表达式规则,包含java正则表达式基本知识、JavaScript RegExp对象参考手册、支持正则表达式的 String 对象的方法、定义正则表达式等内容。文档中有表达式的学习视频下载,配合文档会有不错的效果!

    javascript正则表达式 | 知识梳理

    正则表达式由pattern和flags组成,我不知道怎么翻译这个,我用我自己的话解释一下,pattern可以理解为一个函数(做什么), flags可以理解为参数, 比如flags为g为全局匹配,i为忽略大小写。 字面量 这种方法最方便...

    Javascript 正则表达式完全手册

    一下弄懂JS支持的所有正则知识:定义方法,模式匹配,选择和分组,使用方法

    javascript正则表达式基础知识入门

    很长时间没看正则表达式了,碰巧今天用到,温故知新了一把,这里记录下来,分享给大家,都是些基础的知识,重点给大家讲解的是正则表达式中4种常用的方法,50% 的举一反三练习中的原创。

    javascript正则表达式学习之位置匹配

    正则表达式是匹配模式,要么是匹配字符,要么匹配位置。在开发中用到位置匹配的机会很少,但是小编也给大家介绍下关于正则表达式位置匹配的相关知识,感兴趣的朋友跟随小编一起看看吧

    javascript之正则表达式基础知识小结

    javascript之正则表达式基础知识小结,对于学习正则表达式的朋友是个不错的基础入门资料。

    JavaScript对象之正则表达式共16页.pdf.zip

    JavaScript对象之正则表达式共16页.pdf.zip

    JavaScript对象之正则表达式共16页.pdf.zi

    JavaScript对象之正则表达式共16页.pdf.zip

Global site tag (gtag.js) - Google Analytics