omiga » javascript

EditPlus使用详解

omiga — Wed, 23 Dec 2009 12:55:34 +0000

EditPlus（EP）帮助手册中列出了EP的主要功能：

语法高亮
Internet功能
HTML工具栏
文档选择器
用户工具和帮助文件
自动完成
素材文本窗口
文档模板
其他功能

其中“语法高亮”，“自动完成”和“文档模板”在EP中非常灵活，用户皆可根据自己需要进行配置。EP默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript 和 VBScript的语法高亮显示，基本上无需再做过多设置。而“自动完成”和“文档模板”默认支持有限，而且可能并不符合个人日常的一些编码习惯，那么则需要我们自己根据习惯进行配置，才能得心应手。

自动完成

自定义自动完成功能可分为两步：1.编写自动完成文件；2.指定关联路径。

#TITLE=CSS
;EditPlus Auto-completion file v1.0 written by wondger(http://omiga.org).
;This file is provided as a default auto-completion file for CSS.
#CASE=n
#T=reset
/*reset*/
body,h1,h2,h3,h4,h5,h6,ul,ol,p,dl,dt,dd,th,td{margin:0; padding:0;}
table{border-collapse:collapse;}
li{list-style:none;}
em{font-style:normal;}
img{border:none;}
a img{vertical-algin:top;}
/*reset*/
#T={
{^!}
#T=m
margin:^!px;
#T=ma
margin:0 auto;^!
#T=mt
margin-top:^!px;
#T=mr
margin-right:^!px;
#T=mb
margin-bottom:^!px;
#T=ml
margin-left:^!px;

以上为一段CSS自动完成文件代码。自动完成文件每个语句必须以“#”开头。

#TITLE – 为自动完成文件标题
#CASE – 指定是否区分大小写。‘y’表示是，‘n’表示否。默认值是‘n’。
每个自动完成片段以“#t=title”形式的开始。title是你要你扩展的缩写词，换行后开始匹配自动完成文本，直到遇到“#”符号。如：

#T=m
margin:^!px;

^! – 指定每一次自动完成后光标的停留位置。
^ – 转义字符，如果需要在自动完成文本中插入“^”或“#”则需要先进行转义：“^^”，“^#”。

自动完成文件编写完成后，保存为.acp文件在任一文件目录即可。

随后打开“工具”菜单-“首选项”-“文件”-“设置和语法”，为相关文件类型设置自动完成文件，“确定”完成设置。

自此自动完成功能配置完成，在对应类型的文件编码中，空格触发自动完成功能。当然，你可以通过Shift 键或Window徽标键来暂时禁止此功能。

文档模板

我们日常处理的不论是HTML文档，还是CSS,JavaScript文档，都存在一定的文档规范，比如版权信息，title，keywords，description，或者一些固定的文档结构。我们显然不希望每次新建这些文档的同时，都需要重新录入这些代码，即使是“Ctrl+v”也还是有损效率。那么EP的“文档模板”则可帮助我们完成所有的工作。

自定义“文档模板”也分为两步：1.编写文档模板，2.关联模板

编写文档模板非常简单，无任何语法。比如，我需要一个HTML文档模板，那么新建一个HTML文档如下。






title | wondger@gmail.com/

根据个人需要编写模板完成后，保存为.html在任一文件目录。

随后打开“工具”菜单-“首选项”-“文件”-“模板”，在模板列表中选择相应模板关联模板文件即可。模板可以是默认模板，也可以新建模板（MY_PAGE）。

这样便完成“文档模板”设置，现在文件新建菜单中便可选择新建该模板文档。（其实你还可以自定义新建文档快捷键，稍后介绍）

其他功能

自定义快捷键

EP所有操作的快捷键皆在“工具”菜单-“首选项”-“工具”-“键盘”中进行设置。我们以新建模板文档为例。

在“文件”菜单的“命令”中并不存在新建的“MY_PAGE”模板，那么如何自定义“新建MY_PAGE文档”的快捷键？其实这里存在一个对应关系，在“文件”菜单的“命令”列表中存在一个“模板1”-“模板20”的选项列表，这就对应于我们的自定义模板。

在EP的模板列表中默认的HTML和XHTML模板无法删除，那么我们自定义的模板则按照从上到下的顺序为“模板1”、“模板2”…（其实我在想第21个自定义模板怎么办？-_-!）。这里“MY_PAGE”对应于“模板5”，在设置快捷键的时候会提示该快捷键是否已定义，如果分配已定义的快捷键，那么较早的定义会被覆盖。一个命令可以定义多个快捷键。

自动保存

EP具有定时自动保存的功能，保存间隔时间可在“工具”菜单-“首选项”-“文件”中进行设置。

保存时创建备份

EP默认会在保存时自动创建一个.bak备份文件。备份文件存放目录，后缀名皆可自定义。

HTML工具栏

EP具有强大的HTML工具栏，具有插入图像、选择颜色、插入特殊字符、表格、段落、列表、注释、表单等丰富功能。这个HTML工具同时也是可以在“工具”菜单-“首选项”-“工具”-“工具栏”自定义。

OK，以上内容为个人认为是在EP使用中较多涉及的一些功能。除此之外关于软件本身的一些设置，如字体，颜色，背景，布局等，大家就慢慢折腾吧！

ExternalInterface

omiga — Thu, 23 Jul 2009 09:16:23 +0000

ExternalInterface是一个外部的用于实现Actionscript和Flash Player容器之间通信的应用程序接口（诸如AS与JS的通信）。推荐对所有 JavaScript 与 ActionScript 之间的通信使用 ExternalInterface，替代较旧的fscommand()，getURL()方法。

ExternalInterface类有两个公共属性：

available : Boolean　[static][read-only]　指示此播放器是否位于提供外部接口的容器中。
objectID : String　[static][read-only]　在 Internet Explorer 中，返回标签的 id 属性；在 Netscape 中，返回 name 属性。

同时具有两个公共方法：

addCallback(functionName:String, closure:Function):void　[static]　将 ActionScript 方法注册为可从容器调用。
call(functionName:String, … arguments):*　[static]　调用由 Flash Player 容器公开的函数，不传递参数或传递多个参数。

ActionScript调用JavaScript demo

AS:

import flash.events.MouseEvent;
import flash.external.ExternalInterface;
bt.addEventListener(MouseEvent.MOUSE_UP,alert);
function alert(e:MouseEvent):void{
 ExternalInterface.call("alert","a demo for call \n http://omiga.org");
}

直接调用即可,当然,最好检查一下当前容器是否支持外部接口通信。

bt.addEventListener(MouseEvent.MOUSE_UP,alert);
function alert(e:MouseEvent):void{
 if(ExternalInterface.available){
 ExternalInterface.call("alert","a demo for call \n http://omiga.org");
 }
}

JavaScript调用ActionScript demo

AS:

import flash.external.ExternalInterface;
function setText(s){
 i_txt.text = s;
}
ExternalInterface.addCallback("setText",setText);

HTML:

© omiga for omiga, 2009. | Permalink | No comment | Add to del.icio.us
Post tags: AS, AS3, EI, ExternalInterface, ExternalInterfaceas, flash, javascript

性能，还是性能！

omiga — Thu, 28 May 2009 13:17:42 +0000

很简单的一个应用，实现方式当然也是多种多样，最直接的，通过的src属性，但我想这是最废材的方法了，这样一个效果，你至少需要两张图片，然后是更多的DOM操作，你还要面对图片下载延迟的问题。还有啥性能（1，2）可言？

于是我写了以下的实现方式（DEMO）：

function star(id){
	var star = $(id);
	var stars = $(id).getElementsByTagName("li");
	for(var i=0; i
当然要依据特定的DOM，这种方式通过改变背景图片的位置来实现，看起来似乎已经很完美了，可惜这只是较之于src的实现方法而言。
再看一个TZ的改进的版本（DEMO）：
    function $(element){
      return document.getElementById(element) ;
    }
    var obj = $('outter').getElementsByTagName("li") ;
    for (var i=0,k;k=obj[i];i++ ) {
      k.no = i ;
      k.onmouseover = function () {
        for (var i=0;i<=this.no;i++ ) {
          obj[i].style.backgroundPosition = 'left -30px' ;
        }
      }
      k.onmouseout = function () {
        for (var i=0;i<=this.no;i++ ) {
          obj[i].style.backgroundPosition = 'left top' ;
        }
      }
    }
很显然，这个写法比我的又更优化了一些。虽然都是通过改变背景图片的坐标来实现，但是，我使用了一个30K的jpg图片，TZ使用的却是一个只有599B的gif图片，但即使不使用gif，他的图片也会比我的小很多，大概是15倍左右～···，因为具体的实现方式决定了。虽然他的方法增加了更多的DOM操作，但是最大限度地优化网络传输方面的性能，总体性能是最佳的！
只有一个感概：只要有可能，就要最大限度的减少页面下载量，就要最大限度的提升代码性能！

© omiga for omiga, 2009. |
Permalink |
5 comments |
Add to
del.icio.us


Post tags: javascript, ratestar, 性能

逻辑AND(&&)运算符

omiga — Tue, 03 Mar 2009 07:49:02 +0000

先看下面这段代码，注释有运行结果。

var t = true;
var f = false;
var i = 1;
var s = "hello";
var a = [1,10,100];
alert("t&&i: " + (t && i)); //1
alert("f&&i: " + (f && i)); //false

alert("i&&t: " + (i && t)); //true
alert("i&&f: " + (i && f)); //false

alert("i&&s: " + (i && s)); //"hello"
alert("i&&a: " + (i && a)); //1,10,100

alert("s&&i: " + (s && i)); //1
alert("a&&i: " + (a && i)); //1

再看来自w3school的一段文字：

如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：

如果一个运算数是对象，另一个是 Boolean 值，返回该对象。

如果两个运算数都是对象，返回第二个对象。

如果某个运算数是 null，返回 null。

如果某个运算数是 NaN，返回 NaN。

如果某个运算数是 undefined，发生错误。

第一条：如果一个运算数是对象，另一个是 Boolean 值，返回该对象。如果这种说法成立，那么先前测试中的以下代码都应输出i。

alert("t&&i: " + (t && i)); //1
alert("f&&i: " + (f && i)); //false

alert("i&&t: " + (i && t)); //true
alert("i&&f: " + (i && f)); //false

但实际并非如此。再看规则第二条：如果两个运算数都是对象，返回第二个对象。对先前的测试代码稍作修改，把0赋值给i：

var t = true;
var f = false;
var i = 0;
var s = "hello";
var a = [1,10,100];
alert("t&&i: " + (t && i)); //0
alert("f&&i: " + (f && i)); //false

alert("i&&t: " + (i && t)); //0
alert("i&&f: " + (i && f)); //0

alert("i&&s: " + (i && s)); //0
alert("i&&a: " + (i && a)); //0

alert("s&&i: " + (s && i)); //0
alert("a&&i: " + (a && i)); //0

i与另外一个不是boolean类型的运算数的AND运算都返回了i，并不是规则中所说的第二个对象。

再看如下代码，将字符串s赋值成空字符串，将数组a也赋值为空数组：

var i = 0;
var s = "";
var a = [];

alert("i&&s: " + (i && s)); //0
alert("i&&a: " + (i && a)); //0

alert("s&&i: " + (s && i)); //""
alert("a&&i: " + (a && i)); //0

于是，我的结论是：AND(&&) 运算不论运算数的类型是什么，如果运算结果为true，那么返回第二个运算数；如果运算结果为false，那么返回第一个布尔值等于(==)false的运算数。似乎这个结论是正确的，但是仔细看看最后一条测试语句的结果，并不遵循所得出的结论。

其实这里又涉及到另外一个typeof为object的值的布尔运算问题，如果object类型的值为空那么等于运算符(==)会视其为false，但是其他运算符则会视其为true。所以也才有了下面的现象：

alert([]==false); //true
if([]) alert("ok"); //ok

所以AND(&&)运算符测试中的最后一句a&&i其结果为false，但是a为true，所以有结果0。

如此看来，我们得出的结论也是完全正确的。

setTimeout，setInterval参数传递

omiga — Thu, 15 Jan 2009 07:12:11 +0000

可能你曾经试着这样去给setTimeout()或setInterval()传递参数：

setTimeout('func("'+'hello,world!'+'")',2000);

这种方式存在两个明显的弊端：

无法传递object类型的参数
代码混乱，增加维护难度

事实上你完全可以使用闭包来解决这个问题。

function msg(s){
	return function(){alert(s)};
}
var m = msg("hello,world!");
setTimeout(m,2000);

当然你还可以使用curry化的思想，进一步完善代码：

function delayMsg(s){
	function msg(){
		alert(s);
	}
	setTimeout(msg,2000);
}
delayMsg("hello,world!");

© omiga for omiga, 2009. | Permalink | No comment | Add to del.icio.us
Post tags: closure, javascript, setInterval, setTimout, 闭包

javascript之正则表达式（二）

omiga — Sun, 14 Dec 2008 13:19:58 +0000

子表达式

上一篇文章的最后部分中的var reUrl = /^(http):\/\/omiga\.(org)$/gi;已经涉及到子表达式了。用来指定重复次数的元字符只能作用于紧挨着它的字符或元字符，而在实际应用中我们需要进行重复匹配的字符往往不一定就只是一个字符或元字符，就如reUrl中所要匹配的“http”和“org”就是多个字符，这时候就可以使用（和）将多个字符括起来作为一个独立的元素来使用。

同样在上一篇文章中所构造的验证email地址的正则表达式var reMail = /\w+@\w+\.\w+/i;并不完善，一个有效的用户名除了可以是字母、数字、下划线外，还可以是点号，同时域名部分也不能保证是mail.com这行的形式，也完全有可能是mail.mymail.com这样的形式，所以一个更为完善的匹配有效email地址的正则表达式是这样的：

var reEmail = /(\w+\.)*\w+@(\w+\.)+\w+/i;

字表达式允许多重嵌套，而且这种嵌套在理论上是没有限制的，但在实际应用中还是应该根据实际情况适可而止。

回溯引用

在web开发中，我们经常需要去匹配HTML标签，大多数的HTML标签都有一个开始标记和结束标记如

，如果只需单纯的匹配H1和DIV我们可以很容易的构造出该正则表达式：

var reH1 = /.*?<\/h1>/gi;
var reDiv = /.*?<\/div>/gi;

但是我们所要匹配的并不是某个或某几个HTML标签，事实上HTML具体是什么样的形式我们完全是未知的，比如XML的标记我们是完全无法预计的，所以分组匹配在这里完全排不上用场。幸运的是，在正则表达式中回溯引用允许正则表达式模式引用前面的匹配结果。具体应用可以参考下面匹配HTML标签的正则表达式。

var html = "omiga";
var reTag = /<(\w+\d?)>.*?<\/\1>/gi;
document.write(html.match(reTag)); //omiga

reTag最后部分的\1便是一个回溯引用，引用的前面的第一个子模式(\w+\d?)，当然如果前面还存在第二个子模式我们也可以使用\2引用、。注意：回溯引用只能引用前面已经匹配过的结果，而下面这样的写法就是错误的。

var reTag = /<\1>.*?<\/(\w+\d?)>/gi;

回溯引用在替换操作中有着十分广泛的应用。比如我们要将一段文本中的所有网址自动添加上其对应的超链接，即是将“http://omiga.org”的字符串替换成omiga的形式。我们就可以这样处理：

var url = "http://omiga.org";
var reUrl = /(http[s]*:\/{2}(\w+\.)+\w+)/gi;
document.write(url.replace(reUrl,'$1')); //http://omiga.org

$1引用了前面的子模式(http[s]*:\/{2}(\w+\.)+\w+)。注意：javascript中进行替换操作时回溯引用使用”$”而不是”\”。

前后查找

如果我们需要获取h1标签中的文本（包含在h1标签中的文本，不包括h1本身），这个正则表达式应该如何写？比如”

front-end

”，在所有介绍过的方法中，似乎都还没有提及过要匹配某个字符串，但却只返回某些字符前或后的字符串的情况，正则表达式中确实是存在这样的语法。

var fe = "front-end";
var reInnerText = /(?<=).*?(?=<\/h1>))/i;

在reInnerText和/

.*?<\/h1>/i的匹配模式是相同的，唯一不同的返回结果，/

.*?<\/h1>/i会返回整个fe字符串，而reInnerText只返回”front-end”，比较这两个正则表达式可以发现两处不同的写法：(?<=

)，(?=<\/h1>)。(?<=

)定义了一个向后查找模式，即匹配结果只包括”

”后面的部分；(?=<\/h1>)则定义的是一个向前查找模式，匹配结果只返回”

”前的结果；所以reInnerText的匹配结果只返回”

”和”

”之间的内容！前后查找的语法很简单，向前查找是一个以”?=”开头的字表达式，而向后查找确实一个以”?<=”开头的字表达式。

遗憾的javascript并不支持正则表达式的向后查找，所以事实上reInnerText的写法在javascript是有语法错误的。有条件可以使用其他支持前后查找的语言进行验证，比如PHP。

$title = 'front-end';
if(preg_match('/(?<=).*?(?=<\/h1>)/i',$title,$rst)){
   echo $rst[0]; //front-end
}

条件查找

正则表达式还有一种功能强大但却不被经常用到的功能——嵌入条件查找。在回溯引用一节中所介绍的匹配HTML标签的正则表达式并没有考虑诸如这样的元素，而下面的reImg正式一个使用嵌入条件匹配img元素的正则表达式。

var reImg = /<(img)?\s+[^>]+(?(1)\/)>/i;

我兴高采烈的测试着～···奇迹发生了！javascript还是不支持正则条件查找～···囧～···那就不写了吧～···+_+

© omiga for omiga, 2008. | Permalink | No comment | Add to del.icio.us
Post tags: javascript, regexp, regular expression, 正则, 正则表达式

javascript之正则表达式（一）

omiga — Wed, 10 Dec 2008 13:34:03 +0000

定义

在javascript我们可以通过内建的类来定义一个正则表达式。

var reName = new RegExp("omiga");

实际上RegExp类的构造函数可以接受两个参数，除了本身需要匹配的模式字符串外，还可以定义指定额外处理方式的第二个参数。

var reName = new RegExp("omiga","i");　//忽略大小写

我很好奇输出reName会得到什么结果呢？于是：

document.write(reName);

得到结果：/omiga/i，于是我们得到javascript中正则表达式的第二种定义方法（perl风格）：

var reName = /omiga/;

那第二个参数呢？当然，同样可以为其指定第二个参数：

var reName = /omiga/i;

这两种定义方式都是可行的，完全可以根据个人习惯进行选择。就像可以使用var s = new String(“for a simple life”);定义字符串的同时还可以使用var s = “for a simple life”;来定义是完全相同的。建议使用perl风格的写法，除了简洁外，还省去了使用RegExp构造函数定义时需要对“\”转义的麻烦。

如果要匹配字符“\”，perl风格的写法是：

var res = /\\/;

而构造函数的写法则需要对两个“\”都进行转义：

var res = new RegExp("\\\\");

感觉上是不是就麻烦了很多？

记住，在一个完整的正则表达式中“\”后面总是跟着另外一个字符。

javascript中的正则表达式

其实上面已经在开始讲了javascript对正则表达式的实现方式了，只定义了正则表达式，但是如何在javascript中真正使用正则表达式呢？在javascript中RegExp和String对象都有处理正则表达式的方法。

test RegExp的test方法用来测试字符串是否匹配给出的匹配模式，返回布尔值；
exec RegExp的exec方法返回包含第一个匹配的的数组或null；
match String的match方法返回包含所有匹配子字符串的数组；
replace String的replace方法完成string的替换操作，支持正则表达式；
search 与String的indexof方法类似，不同的是search支持正则表达式，而不仅仅是字符串；
split 按照一定规则拆分字符串并将子字符串存储到数组中的String方法。

关于这些函数的具体使用方法，可以参阅JS的相关函数手册。

一个实例对象除了方法当然还有属性，一个正则表达式有以下属性：

global 布尔值，若全局选项g已设置则返回true，否则返回false；
ignoreCase 布尔值，若忽略大小写选项i已设置则返回true，否则返回false；
lastIndex 整数，使用exec或test方法时被填入，表示下次匹配将会从哪个字符位置开始；
multiline 布尔值，表示多行模式选项m是否设置，若设置则返回true，否则返回false；
source 正则表达式的元字符串形式。/\\/的source将返回”\\“。

元字符

在正则表达式中有一些特殊的字符符号我们是不能直接使用的，必须对其进行转义后才能使用。如“\”，因为这些字符在正则表达式中有特殊的语法含义，这类字符被称为元字符，正则表达式中的元字符有：

.,\,/,*,?,+,[,(,),],{,},^,$,|

可能不太好记忆，当无法确定某个字符是否是元字符的时候就勇敢的对其进行转义是没有错的，对不是元字符的字符进行转义是不会出什么问题的，但是如果不对元字符转义就会有意想不到的错误产生了。

分组匹配

一个简单的字符就可以是一个匹配模式，但是现实情况往往不会这么简单。比如我们要匹配一个0-9的数字：

var i = 5;
var j = 6;

这个正则表达式要如何书写才能同时匹配这两个数字呢？简单的字符表达式当然无法完成了，这个时候我们就可以为0-9十个数字来定义一个字符集合（字符类）来进行匹配。

var reNum = /[0123456789]/;
document.write(reNum.test(i)); //true
document.write(reNum.test(j)); //true

使用test方法测试匹配结果都输出了true。

范围匹配

上一个例子使用了分组匹配，但是如果要匹配所有26个英文字母，还要包括大小写，仍然可以使用分组匹配：

var reLetter = /abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ/;

恩，这个正则表达式是完全正确的，但是是不是感觉太长了，有没有办法让它更为简洁一点？当然是有的，为字符或数字指定一个匹配范围就可以了。

var reNum = /[0-9]/;
var reLetter = /[a-zA-Z]/;

这样就可以了，“-”用来定义一个匹配区间，字符的具体顺序由ASCII字符表确定，所以不能写成/A-z/，因为Z-a之间还包含着其他字符。

取非匹配

很多编程语言中都使用“！”取非操作，包括javascript。正则表达式中也有取非操作，比如/[^0-9]/就是一个取非操作的正则表达式了。

var i = 5;
var s = "o";
var rec = /[^0-9]/;
document.write(rec.test(i)); //false
document.write(rec.test(s)); //true

符号^用来完成取非操作，同时^0-9也是必须包含在[]中的，因为^其实还有另外一种特殊用途。

特殊字符

可能你觉得/[a-zA-Z]/，/[0-9]/还是不够简洁，的确，在正则表达式中一些特定的字符集合可以使用一些特殊的元字符来代替。这些特殊的字符并不是必不可少的，但是却可以给我们带来不少方便。/[0-9]/就完全可以写成这样：

var reNum = /\d/;

那大小写字母字符类呢？很遗憾，除了POSIX字符类（javascript不支持POSIX字符类）中有支持大小写字母的特殊字符类外并没有专门替代方法。

常见的特殊字符有：

\d　任何一个数字字符，等价于[0-9]
\D　任何一个非数字字符，等价于[^0-9]
\w　任何一个字母数字或下划线字符，等价于[a-zA-Z_]
\W　任何一个非字母数字和下划线字符，等价于[^a-zA-Z_]
\s　任何一个空白字符，包括换页符、换行符、回车符、制表符和垂直制表符，等价于[\f\n\r\t\v]
\S　任何一个非空白字符，等价于[^\f\n\r\t\v]
.　换行和回车以外的任何单个字符，等价于[^\n\r]

相同字母大小写总是进行取非操作的。

十六进制和八进制字符

在正则表达式中使用十六进制或八进制字符也是完全可行的，他们所匹配的字符即是由其转换成十进制后的数值在ASCII中所对应的字符。

var reAt = /\x40/; //十六进制字符\x40(64)对应字符“@”
var reA = /\0101/; //八进制字符\0101(65)对应字符“A”

重复匹配

以匹配一个email地址为例，mymail@mail.com这样的一个email地址必须包括一个合法的用户名mymail，@符号以及一个合法的域。其中用户名和域名的字符个数都是无法判断的，但是有一点是肯定的——用户名必须至少是一个字符，域名至少是两个字符中间还必须有一个点号。于是我们可以这样做：

var reMail = /\w+@\w+\.\w+/i;
var email = "mymail@mail.com";
document.write(reMail.test(email)); //true

“+”表示字符出现一次或多次，至少出现一次。这个正则表达式其实并不能匹配所有合法的email地址，后面我们继续完善。

除了“+”可以指定至少匹配一次外，还有很多其他的可以指定匹配次数的方式。

?　出现零次或一次，最多一次
*　出现任意次（零次、一次、多次）
+　出现一次或多次，至少一次
{n}　能且只能出现n次
{n,m}　至少出现n次，最多出现m次

www.gogle.com，www.google.com，www.gooogle.com这三个网址都能正确地打开google的首页，于是就可以用{n,m}匹配其中的1个，2个或3个字母”o”。

var gogle = "www.gogle.com";
var google = "www.google.com";
var gooogle = "www.gooogle.com";
var reGoogle = /w{3}\.go{1,3}gle\.com/i;
document.write(reGoogle.test(gogle)); //true
document.write(reGoogle.test(google)); //true
document.write(reGoogle.test(gooogle)); //true

在上面的正则表达式中，我们使用了{3}来制定字符“w”能且只

能出现3次，用{1,3}来制定字母“o”可以出现1到3次。

防止过度匹配

有这样一段HTML文本：

var html = "omigafor a simple lifehttp://omiga.org/";

如果现在要讲及其中间的文本匹配出来，正则表达式可以这样写：

var reEm1 = /.*<\/em>/gi;
document.write(html.match(reEm1)); //"omigafor a simple lifehttp://omiga.org/"
var reEm2 = /.*?<\/em>/gi;
document.write(html.match(reEm2)); //omiga,http://omiga.org/

当使用贪婪模式的时候，”.*”会最大程度地进行字符匹配，所以输出了整个字符串。而在惰性模式中，”.*?”只进行最小限度的匹配，所以完整的输出了我们需要的字符串。

惰性模式的语法很简单，即是在贪婪模式后面加上一个“?”即可。

* –> *?

+ –> +?

{n,} –> {n,}?

位置匹配

var s = “_Don’t do it!”;

如何将单词“do”匹配出来？it’s easy!

var reDo = /do/gi; document.write(s.match(reDo)); //Do,do

但是这个简单的正则表达式/do/gi将“don’t”中的“do”也进行了匹配，可这并不是想要的结果。而在正则表达式中有专门用来进行单词边界匹配的限定符”\b“。

var reDo = /\bdo\b/gi; document.write(s.match(reDo)); //do

“\b”到底匹配的什么呢？”\b”匹配的是一个位置，一个位于”\w“（字母，数字，下划线）和”\W“之间的位置。

既然有”\b”，那有”\B”吗？当然，他和”\b“刚好相反，由来匹配一个不是单词边界的位置。比如上例中匹配”don’t”中的”do”时”\B”就可派上用场。

var reDo = /\Bdo\B/gi; document.write(s.match(reDo)); //Do

在介绍取非匹配的时候介绍^只用位于[]并紧跟[方能取非匹配，而^还有另外一种用途——字符串边界匹配。

^　用来匹配字符串开头

$　用来匹配字符串结尾

比如我们要匹配一个http://omiga.org形式的org域名：

var url = "http://omiga.org"; var reUrl = /^(http):\/\/omiga\.(org)$/gi; document.write(reUrl.test(url)); //true

正则表达式reUrl限制url必须以”http”开头，以”org”结尾。

又如经常被扩展的string方法trim：

function trim(s){ 　　return s.replace(/(^\s*)|(\s*$)/g,""); }

同时我们可以在整个模式的最前面使用(?m)来启用分行匹配模式。这样，^不但匹配正常的字符串开头，还将匹配行分隔符（换行符）后面的开始位置；$不仅匹配正常的字符串结尾，还将匹配行分隔符（换行符）后面的结束位置。

© omiga for omiga, 2008. | Permalink | No comment | Add to del.icio.us
Post tags: javascript, regexp, regular expression, 正则, 正则表达式

javascript图片遮罩放大

omiga — Sat, 27 Sep 2008 08:30:24 +0000

写着玩的～昨天无意看到这个效果。其实我比较感兴趣的是左边的遮罩效果～···

两张图片，拖动的时候获取鼠标坐标改变顶层图片位置即可～···

左边的遮罩搞定了，右边的放大就迎刃而解了～···

查看显示

© omiga for omiga, 2008. | Permalink | 6 comments | Add to del.icio.us
Post tags: javascript, 图片放大, 遮罩

javascript的赋值

omiga — Fri, 12 Sep 2008 05:43:08 +0000

var a = "hello,world!"; var b = a; a = "hello,omiga~"; alert(a); // "hello,omiga~"; alert(b); // "hello,world!"; //-------------------------- var c = 5; var d = c; c++; alert(c); // 6 alert(d); // 5 //-------------------------- var e = true; var f = e; e = !e; alert(e) // false; alert(f) // true; //-------------------------- var i = null; var j = i; i = !null; alert(i); // true alert(j); // null //-------------------------- var m = [1,2,3,4,5]; var n = m; m.push(10); alert(m); // [1,2,3,4,5,10] alert(n); // [1,2,3,4,5,10] n.pop(); alert(m); // [1,2,3,4,5] alert(m); // [1,2,3,4,5] //-------------------------- var s = {"name":"omiga","url":"http://omiga.org"}; var t = s; s.name = "wondger"; alert(s.name); // "wondger" alert(t.name); // "wondger" t.name = "omiga"; alert(t.name); // "omiga" alert(s.name); // "omiga"

运行代码

结论：javascript中变量的赋值根据数据类型而采用不同的赋值方式。对于数组类型，对象类型采用引用赋值；而对于其他数据类型采用按值赋值（重新分配内存）。这是一个错误的结论，请看下文。

PS：将一个变量的值赋给另外一个变量，当然是将其引用进行赋值，不会重新申请内存空间。比如：首先声明的变量a=”hellow,world!”，假设分配内存空间“12345”，那么b=a后，b也指向“12345”的内存空间。但是a=”hello,omiga~”语句会重新为值”hello,omiga~”分配内存“23456”，a也重新指向“23456”，b却依然指向“12345”。但是以上代码中的数组和JSON为什么并没有随其值得改变而改变？因为数组和JSON都只是改变的其内的元素/属性，只是对内存进行了重写，而未重新分配内存，仍然指向同一内存，故会有以上测试结果。我们可以测试为其重新分配内存的情况。

var m = [1,2,3,4,5]; var n = m; m = [1,2,3,4,5,10]; alert(m); // [1,2,3,4,5,10] alert(n); // [1,2,3,4,5] 重新分配内存后m和n指向不同的内存空间，彼此不再影响 n.pop(); alert(m); // [1,2,3,4,5,10] alert(n); // [1,2,3,4] //-------------------------- var s = {"name":"omiga","url":"http://omiga.org"}; var t = s; s = {"name":"wondger","url":"http://omiga.org"}; alert(s.name); // "wondger" alert(t.name); // "omiga" 重新分配内存后t和s指向不同的内存空间，彼此不再影响 t.name = "omiga_w"; alert(s.name); // "wondger" alert(t.name); // "omiga_w"

运行代码

© omiga for omiga, 2008. | Permalink | 4 comments | Add to del.icio.us
Post tags: javascript, 赋值

jQuery中一些不常用的方法属性

omiga — Wed, 20 Aug 2008 04:22:25 +0000

index(subject)

搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。

data()

data(elem)：为页面对象添加唯一标识。

data(name, value)：将数据保存在元素的一个key里面。$("#box").data("shape","rectangle")。

data(name)：获取值。$("#box").data("shape") //"rectangle"。

removeData(name)：删除通过data()方法赋予的值。$("#box").removeData("shape")。

attr(key,fn)

为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。

hasClass(class)

检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是is("." + class)。

val(val)

设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为select元件赋值。参数val(String)要设置的值。

check,select,radio等都能使用为之赋值。参数val(Array)用于 check/select 的值。

slice(start,[end])

选取一个匹配的子集。

add(expr)

把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

参数expr(String, DOMElement, Array)用于匹配元素并添加的表达式字符串，或者用于动态生成的HTML代码，如果是一个字符串数组则返回多个元素。

nextAll([expr])

查找当前元素之后的所有元素。

prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

prevAll([expr])

查找当前元素之前所有的同辈元素。

andSelf()

将先前所选的加入当前元素中。

replaceWith(content)

将所有匹配的元素替换成指定的HTML或DOM元素。参数content(String, Element, jQuery):用于将匹配元素替换掉的内容。

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。参数selector(选择器)用于查找所要被替换的元素。

clone([true])

克隆匹配的DOM元素并且选中这些克隆的副本。设置参数[true]是对象的所有事件处理一并克隆。

offset()

获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

返回Object{top,left}。

one(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

toggle(fn,fn2,[fn3,fn4,...])

每次点击时切换要调用的函数。函数数目可以是多个。

stop()

停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画，他们将被马上执行。

queue([callback/queue])

queue：返回指向第一个匹配元素的队列(将是一个函数数组。

queue(callback)：在匹配的元素的动画队列中添加一个函数。

queue(queue)：将匹配元素的动画队列用新的一个队列来代替(函数数组)。

dequeue()

从动画队列中移除一个队列函数。

jQuery.browser.version

浏览器渲染引擎版本号。

jQuery.boxModel

当前页面中浏览器是否使用标准盒模型渲染页面。

PS:以前很少用这些方法属性，很多还不知道。这跟中文CHM版jQuery API不无关系，那本广为流传的中文版手册已经过时，建议直接阅读官方文档。

© omiga for omiga, 2008. | Permalink | One comment | Add to del.icio.us
Post tags: javascript, jQuery

omiga » javascript

EditPlus使用详解

ExternalInterface

性能，还是性能！

逻辑AND(&&)运算符

setTimeout，setInterval参数传递

javascript之正则表达式（二）

.*?<\/h1>/gi; var reDiv = /.*?<\/div>/gi;

omiga

omiga

front-end

front-end

).*?(?=<\/h1>))/i;

.*?<\/h1>/i的匹配模式是相同的，唯一不同的返回结果，/

.*?<\/h1>/i会返回整个fe字符串，而reInnerText只返回”front-end”，比较这两个正则表达式可以发现两处不同的写法：(?<=

)，(?=<\/h1>)。(?<=

)定义了一个向后查找模式，即匹配结果只包括”

”后面的部分；(?=<\/h1>)则定义的是一个向前查找模式，匹配结果只返回”

”和”

front-end

).*?(?=<\/h1>)/i',$title,$rst)){ echo $rst[0]; //front-end }

javascript之正则表达式（一）

javascript图片遮罩放大

javascript的赋值

jQuery中一些不常用的方法属性

index(subject)

data()

attr(key,fn)

hasClass(class)

val(val)

slice(start,[end])

add(expr)

nextAll([expr])

prev([expr])

prevAll([expr])

andSelf()

replaceWith(content)

replaceAll(selector)

clone([true])

offset()

one(type,[data],fn)

toggle(fn,fn2,[fn3,fn4,...])

stop()

queue([callback/queue])

dequeue()

jQuery.browser.version

jQuery.boxModel

.?<\/h1>/gi; var reDiv = /
.?<\/div>/gi;