当打开 firebug (也包括 Chrome 等浏览器的自带调试工具)，window 下面会注册一个叫做 console 的对象，它提供多种方法向控制台输出信息，供开发人员调试使用。下面是这些方法的一个简单介绍，适时地运用它们，对于提高开发效率很有帮助。

console.log(object[, object, ...])
使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然，也可以不使用格式化输出来达到同样的目的：

var animal='frog', count=10;
console.log("The %s jumped over %d tall buildings", animal, count);
console.log("The", animal, "jumped over", count, "tall buildings");

console.debug(object[, object, ...])
向控制台输出一条信息，它包括一个指向该行代码位置的超链接。

console.info(object[, object, ...])
向控制台输出一条信息，该信息包含一个表示“信息”的图标，和指向该行代码位置的超链接。

console.warn(object[, object, ...])
同 info。区别是图标与样式不同。

console.error(object[, object, ...])
同 info。区别是图标与样式不同。error 实际上和 throw new Error() 产生的效果相同，使用该语句时会向浏览器抛出一个 js 异常。

console.assert(expression[, object, ...])
断言，测试一条表达式是否为真，不为真时将抛出异常（断言失败）。

console.dir(object)
输出一个对象的全部属性（输出结果类似于 DOM 面板中的样式）。

console.dirxml(node)
输出一个 HTML 或者 XML 元素的结构树，点击结构树上面的节点进入到 HTML 面板。

console.trace()
输出 Javascript 执行时的堆栈追踪。

console.group(object[, object, ...])
输出消息的同时打开一个嵌套块，用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。

console.groupCollapsed()
同 console.group(); 区别在于嵌套块默认是收起的。

console.time(name)
计时器，当调用 console.timeEnd(name);并传递相同的 name 为参数时，计时停止，并输出执行两条语句之间代码所消耗的时间（毫秒）。

console.profile([title])
与 profileEnd() 结合使用，用来做性能测试，与 console 面板上 profile 按钮的功能完全相同。

console.count([title])
输出该行代码被执行的次数，参数 title 将在输出时作为输出结果的前缀使用。

console.clear()
清空控制台

控制台的输出面板右边，是控制台的输入面板（Chrome 调试工具对应为下方），在这里除了可以运行常规的 javascript 代码，还内置了相当数量的命令行可以辅助我们的调试工作，下面是一些常用命令行的简单介绍。

$(id)
返回一个给定 id 的元素。

$$(selector)
返回给定的 css 选择器匹配到的一组元素。

$x(xpath)
返回给定的 XPath 表达式匹配到的一组元素。

$0
在 HTML 面板中选中的元素。

$1
上一次在 HTML 面板中选中的元素。

$n(index)
访问最近 5 个被选中过的元素，index 的范围： 0 – 4。

dir(object)
同 console.dir(object)。

dirxml(node)
同 console.dirxml(node)。

clear()
同 console.clear()。

inspect(object[, tabName])()
在合适的（或一个指定的） tab 中检视一个对象。

keys(object)
返回一个对象的所有属性的键。

values(object)
返回一个对象的所有属性的值。

debug(fn)
在函数第一行添加一个断点，使用 undebug(fn) 移除断点。

monitor(fn)
开启一个函数的调用日志，使用 unmonitor(fn) 关闭该功能。非常有用的一个命令，但是它似乎并没有很好地工作。

monitorEvents(object[, types])
开启一个元素的某个事件（或所有事件）被触发时的日志记录。用例如下：

monitorEvents($0,['click'])

上面的命令行被执行后，将开启当前在 HTML 面板中被选中元素的 click 事件监控，一旦这个元素的 click 事件被触发，事件对象将会在控制台输出。如果不指定第二个参数，将对所有事件进行记录。

profile([title])
同 console.profile([title])

myArray[1000000] = true;
alert(myArray.length); //1000001
[/js]

2. 在数组尾部添加一个新元素：
[js]
var numbers = ['zero', 'one', 'two'];
numbers[numbers.length] = ‘three’;
numbers.push(‘four’);
[/js]

3. 删除数组元素。
js中的数组实际上就是对象，所以delete运算符就可以用来从数组中移除元素：
[js]
var numbers = ['one', 'two', 'three', 'four'];
delete numbers[2]; // ['one', 'two', undefined, 'four']
[/js]
不幸的是，那样会在数组中遗留一个空洞。 通常可以使用splice方法来删除元素：
[js]
var numbers = ['one', 'two', 'three', 'four'];
numbers.splice(2, 1); //['one', 'two', 'four']
[/js]
这个对大型数组来说可能会效率不高。

4. 当属性名是小而连续的整数时，应该使用数组；否则使用对象。

5. 判断是否是数组：
[js]
var is_array = function(value){
return value &&
typeof value === ‘object’ &&
value.constructor === Array;
};
[/js]
不幸的是，它在识别从不同的窗口(window)或帧(frame)里构造的数组时会失败。完整的测试方法如下：
[js]
var is_array = function(value){
return value &&
typeof value === ‘object’ &&
typeof value.length === ‘number’ &&
typeof value.splice === ‘function’ &&
!(value.propertyIsEnumberable(‘length’));
};
[/js]

2. 在javascript中一共有四种调用模式： 方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这些模式在如何初始化关键参数this上存在差异。
a.方法调用模式：
当一个函数被保存为对象的一个属性时，我们称它为一个方法。方法调用模式可以使用this去访问对象，所以它能够从对象中取值或修改对象。
b.函数调用模式：
当一个函数并非一个对象的属性时，它被当作一个函数来调用。当函数以此模式调用时，this被绑定到全局变量，这是语言设计上的一个错误。（正确的情况：当内部函数被调用时，this应该仍然被绑定到外部函数的this变量。）解决方法：如果该方法定义一个变量并给他赋值为this,那么内部函数就可以通过那个变量访问到this,按照约定，给那个变量命名为 that：
[js]
//给 myObject增加一个double方法
myObject.double = function()
{
var that = this; //解决方法

var helper = function()
{
that.value = add(that.value, that.value);
}

helper(); //以函数的形式调用helper。
}

//以方法的形式调用double
myObject.double();
[/js]
c.构造器调用模式：
在一个函数前面带上new来调用，那么将创建一个隐藏连接到该函数的prototype成员的新对象，同时this将会被绑定到那个新对象上。
[js]
//创建一个名为Quo的构造函数。它构造一个带有status属性的对象
var Quo = function(String)
{
this.status = String;
}

//给Quo的所有实例提供一个名为get_status的公共方法
Quo.prototype.get_status = function()
{
return this.status;
}

//构造一个Quo实例
var myQuo = new Quo("confused"); //构造器模式调用
document.writeln(myQuo.get_status());
[/js]
按照约定，构造器函数保存在以大写格式命名的变量里。
d.Apply调用模式:
apply方法接受两个参数，第一个是将被绑定给this的值，第二个就是参数数组。它让我们构建一个参数数组并用其去调用函数。
[js]
//构造一个Quo实例
var myQuo = new Quo("confused"); //构造器模式调用
document.writeln(myQuo.get_status());

//构建一个包含两个数字的数组，并将他们相加
add = function(a, b)
{
return a+b;
}

var anArray = [3, 4];
var sum = add.apply(null, anArray); //7

//构建一个包含status成员的对象
var statusObject = {
status: "A-OK"
};

//statusObject并没有继承自Quo.prototype,但我们可以再statusObject上调用
//get_status方法，尽管statusObject并没有一个名为get_status的方法。
var status = Quo.prototype.get_status.apply(statusObject);
[/js]

3. 参数：
当一个函数被调用时，会有一个默认的参数，就是 arguments “数组”。
[js]
//构造一个将很多值相加的函数

//注意该函数内部定义的变量sum不会与函数外部定义的sum产生冲突。
//该函数只能看到内部的那个变量。
var sum = function()
{
var i, sum=0;
for(i = 0; i < arguments.length; i+=1)
{
sum += arguments[i];
}
return sum;
};

document.writeln(sum(4, 8, 15, 16, 23, 42)); //108
[/js]
注：arguments并不是一个真正的数组。它知识一个“类似数组”的对象。arguments用友一个length属性，但它缺少所有的数组方法。

4. 返回:
一个函数总是会返回一个值。如果没有置顶返回值，则返回undefined。
如果函数以构造器方式被调用，且返回值不是一个对象，则返回this(该新对象)。

5.给类型增加方法：
[js]
Function.prototype.method = function(name, func)
{
this.prototype[name] = func;
return this;
}

//给Number添加一个integer方法，来提取数字钟的整数部分
//根据正负来判断是使用Math.ceil还是Math.floor
Number.method(‘integer’, function(){
return Math[this < 0 ? 'ceil' : 'floor'](this);
});

document.writeln((-10/3).integer()); //-3

//去掉字符串两端空白的方法
String.method(‘trim’, function()
{
return this.replace(/^\s+|\s+$/g, ”);
});
[/js]
基本类型的原型是公共结构，所以在类库混用时务必小心。一个保险的做法就是只在确定没有该方法时再添加：
[js]
//有条件的增加一个方法

Function.prototype.method = function(name, func)
{
if(!this.prototype[name])
{
this.prototype[name] = func;
return this;
}
};
[/js]

6.闭包
理解内部函数能访问外部函数的实际变量而无需复制
[js]
//构造一个函数，用错误的方式给一个数组中的借点设置事件处理程序
//当点击一个节点时，按照预想应该弹出一个对话框显示节点的序号
//但他总是会显示节点的数目

var add_the_handlers = function(nodes) {
var i;
for (i = 0; i < nodes.length; i += 1) {
nodes[i].onclick = function(e) {
alert(i);
}
}
}
[/js]
add_the_handlers函数的目的是给每个事件处理器一个唯一值（i）。它未能达到目的的原因是事件处理器函数绑定了变量i，而不是函数在构造时的变量i的值。
正确的写法：
[js]
//点击一个节点，将会弹出一个对话框显示节点的序号
var add_the_handlers = function (nodes) {
var i;
for (i = 0; i < nodes.length; i +=1 ) {
nodes[i].onclick = function (i) {
return funtion (e) {
return alert(e);
} ;
}(i);
}
}
[/js]
现在，定义了一个函数并立即传递i进去执行， 而不是把一个函数赋值给onclick。那个函数将返回一个事件处理器函数。这个事件处理器函数绑定的是传递进去的i的值，而不只定义在add_the_handlers函数里的i的值。那个被返回的函数被复制给onclick。

7.javascript的单例模式
Javascript的单例就是用对象字面量表示法创建的对象，对象的属性值可以是数值或函数，并且属性值在该对象的生命周期中不会发生变化。他通常作为工具为程序其他部分提供功能支持

8.模块
模块模式的一般形式是：一个定义了私有变量和函数的函数；利用闭包创建可以访问私有变量和函数的特权函数,或者把他们保存到一个可访问的地方。
[js]
String.method(‘deentityify’, function (){
var entity = {
quot: ‘"’,
lt: ‘<’,
gt: ‘>’
}

return function () {
return this.replace(/&([^&;]+);/g,
function (a, b) {
var r = entity[b];
return typeof r === ‘string’ ? r : a;
});
};
}());
[/js]
模块模式利用了函数作用域和闭包来创建绑定对象与私有成员关联，摒弃了全局变量的使用，从而缓解这个JavaScript的最为糟糕的特性之一所带来的影响

1. 当尝试检索对象的一个并不存在的成员元素的值，将返回一个undefined值。可以通过“||”运算符来填充默认值：
[js]
stooge["middle-name"] //undefined
var middle = stooge["middle-name"] || "tom";
[/js]

2. 当尝试检索一个undefined值将会导致TypeError异常。可以通过“&&”运算符来避免错误：
[js]
flight.equipment //undefined
flight.equipment.model //throw "TypeError"
flight.equipment && flight.equipment.model //undefined
[/js]

3. 对象通过引用来传递。他们永远不会被拷贝
[js]
var x = stooge;
x.nickname = ‘Curly’;
var nick = stooge.nickname;
//因为x和stooge是指向同一个对象的引用，所以nick的值为’Curly’

var a={}, b={}, c={};
//a, b和c每个都引用一个<strong>不同</strong>的空对象

a=b=c={}
//a,b和c都引用<strong>同一个</strong>空对象
[/js]

4. 原型连接
通过beget方法创建一个使用原对象作为其原型的新对象
[js]
if (typeof Object.beget !== ‘function’)
{
Object.beget = function (o)
{
var F = function () {};
F.prototype = o;
return new F();
}
}

var another_stooge = Object.beget(stooge);
[/js]
注：
a. 原型连接在更新时是不起作用的
当我们对某个对象作出改变时，不会触及到该对象的原型。
b. 原型连接只有在检索值的时候才被用到
如果尝试去获取对象的某个属性值，且该对象没有此属性名，那么从它的圆形对象中获取属性值。 （如果那个原型对象也没有该属性值，那么再从它的原型中寻找，依次类推，知道该过程左后的重点Object.prototype。如果想要的属性完全不存在于原型链中，那么结果就是undefined值。这个过程称为委托）
c. 原型关系是一种动态关系。
如果我们添加一个新的属性到原型中，该属性会立即对所有基于该原形创建的对象可见。

5. 反射
在一些时候下，我们需要能够在对对象完全不了解的情况下进行处理，并且在处理之前发现他们的属性和方法，这个过程称作反射（reflection）。
在判断对象是否有某一属性时，可以使用”hasOwnProperty“方法，如果对象拥有独有的属性，它将返回true。
注：hasOwnProperty方法不会检查原型链。

6. 枚举
for in 语句可以用来遍历一个对象中的所有属性名。
属性名出现的顺序是不确定的，因此要对任何可能出现的顺序有所准备。如果你想要确保属性以特定的顺序出现，最好的办法就是完全避免使用for in语句，而是创建一个数组，在其中以正确的顺序包含属性名：
[js]
//使用for in语句：
var name;
for (name in another_stooge)
{
if(typeof another_stooge[name] !== ‘function’)
{
document.writeln(name + ‘: ‘ + another_stooge[name]);
}
}

//使用for语句
var i;
var properties = [
'first-name',
'middle-name',
'last-name',
'profession'
]
for (i=0; i<properties.length; i +=1)
{
document.writeln(properties[i] + ‘: ‘ +
another_stooge[properties[i]]);
}
[/js]

function removeEvent( ojb, type, fn ) {
if( obj.detachEvent ) {
obj.detachEvent( ‘on’ + type + obj[ type + fn ] );
obj[ type + fn ] = null;
}
else {
ojb.removeEventListener( type, fn, false );
}
}
[/js]

JS绑定onLoad事件
[js]
function addLoadEvent( func ) {
var oldonload = window.onload;
if( typeof window.onload != ‘function’ ) {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
[/js]
作者: 石巍
原载: 10V的博客
链接: http://www.smartwei.com/js-add-event.html
版权所有，转载时必须以超链接形式注明作者和原始出处及本声明。

作者: 石巍
原载: 10V的博客
版权所有，转载时必须以超链接形式注明作者和原始出处及本声明。

本文链接: http://www.smartwei.com/javascript-url-redirect.html

function getcookie( name )
{
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) )
{
return null;
}
if( start == -1 )
{
return null;
}
var end = document.cookie.indexOf( ‘;’, len );
if( end == -1 )
{
end = document.cookie.length;
}
return unescape( document.cookie.substring( len, end ) );
}

function delcookie( name, path, domain )
{
var exp = new Date();
exp.setTime( exp.getTime() – 1 );
var cval = getcookie( name );
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() +
( ( path ) ? ‘;path’ + path : ” ) +
( ( domain ) ? ‘;domain=’ + domain : ” );
}

[/js]

作者: 石巍
原载: 10V的博客
版权所有，转载时必须以超链接形式注明作者和原始出处及本声明。

本文链接: http://www.smartwei.com/javascript-cookie-functions.html

一、什么是闭包？
“官方”的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话，因为他描述的太学术。其实这句话通俗的来说就是：JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。看下面这段代码：
[js]
function a() {
var i = 0;
function b() {
alert(++i);
}
return b;
}
var c = a();
c();
[/js]

这段代码有两个特点：

1. 函数b嵌套在函数a内部；
2. 函数a返回函数b。

引用关系如图：

当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个我们通常所谓的“闭包”。

让我们说的更透彻一些。所谓“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标 对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目 标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新 的值，和上次那次调用的是各自独立的。

为了更深刻的理解闭包，下面让我们继续探索闭包的作用和效果。

二、闭包有什么作用和效果？
简而言之，闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但你一定能看懂。理解闭包需要循序渐进的过程。
在上面的例子中，由于闭包的存在使得函数a返回后，a中的i始终存在，这样每次执行c()，i都是自加1后alert出i的值。

那么我们来想象另一种情况，如果a返回的不是函数b，情况就完全不同了。因为a执行完后，b没有被返回给a的外界，只是被a所引用，而此时a也只会被b引用，因此函数a和b互相引用但又不被外界打扰(被外界引用)，函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

三、闭包的微观世界
如果要更加深入的了解闭包以及函数a和嵌套函数b的关系，我们需要引入另外几个概念：函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。

1. 当定义函数a的时候，js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境”，如果a是一个全局函数，则scope chain中只有window对象。
2. 当执行函数a的时候，a会进入相应的执行环境(excution context)。
3. 在创建执行环境的过程中，首先会为a添加一个scope属性，即a的作用域，其值就为第1步中的scope chain。即a.scope=a的作用域链。
4. 然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象，但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后，把活动对象添加到a的作用域链的最顶端。此时a的作用域链包含了两个对象：a的活动对象和window对象。
5. 下一步是在活动对象上添加一个arguments属性，它保存着调用函数a时所传递的参数。
6. 最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中，完成了函数b的的定义，因此如同第3步，函数b的作用域链被设置为b所被定义的环境，即a的作用域。

到此，整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c，又函数b的作用域链包含了对函数a的活动对象的引用，也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用，函数b又依赖函数a，因此函数a在返回后不会被GC回收。

当函数b执行的时候亦会像以上步骤一样。因此，执行时b的作用域链包含了3个对象：b的活动对象、a的活动对象和window对象，如下图所示：

如图所示，当在函数b中访问一个变量的时候，搜索顺序是：

1. 先搜索自身的活动对象，如果存在则返回，如果不存在将继续搜索函数a的活动对象，依次查找，直到找到为止。
2. 如果函数b存在prototype原型对象，则在查找完自身的活动对象后先查找自身的原型对象，再继续查找。这就是Javascript中的变量查找机制。
3. 如果整个作用域链上都无法找到，则返回undefined。

小结，本段中提到了两个重要的词语：函数的定义与执行。文中提到函数的作用域是在定义函数时候就已经确定，而不是在执行的时候确定（参看步骤1和3）。用一段代码来说明这个问题：
[js]
function f(x) {
var g = function () { return x; }
return g;
}
var h = f(1);
alert(h());
[/js]
这段代码中变量h指向了f中的那个匿名函数(由g返回)。

• 假设函数h的作用域是在执行alert(h())确定的，那么此时h的作用域链是：h的活动对象->alert的活动对象 ->window对象。
• 假设函数h的作用域是在定义时确定的，就是说h指向的那个匿名函数在定义的时候就已经确定了作用域。那么在执行的时候，h的作用域链为：h的活动对象->f的活动对象->window对象。

如果第一种假设成立，那输出值就是undefined；如果第二种假设成立，输出值则为1。

运行结果证明了第2个假设是正确的，说明函数的作用域确实是在定义这个函数的时候就已经确定了。

四、闭包的应用场景

1. 保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。
2. 在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。
3. 通过保护变量的安全实现JS私有属性和私有方法（不能被外部访问）推荐阅读：http://javascript.crockford.com/private.html
   私有属性和方法在Constructor外是无法被访问的

[js]
function Constructor(…) {
var that = this;
var membername = value;
function membername(…) {…}
}
[/js]
以上3点是闭包最基本的应用场景，很多经典案例都源于此。

五、Javascript的垃圾回收机制
在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。

六、结语
理解JavaScript的闭包是迈向高级JS程序员的必经之路，理解了其解释和运行机制才能写出更为安全和优雅的代码。如果您对本文有任何的建议和疑问，欢迎留言。

作者: 石巍
原载: Felix Woo – 深入理解 JavaScript闭包(closure)
版权所有，转载时必须以超链接形式注明作者和原始出处及本声明。

本文链接: http://www.smartwei.com/javascript-closure.html

匹配中文字符的正则表达式： [\u4e00-\u9fa5]

匹配双字节字符(包括汉字在内)：[^\x00-\xff]

应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

String.prototype.len=function(){return this.replace([^\x00-\xff]/g,”aa”).length;}

匹配空行的正则表达式：\n[\s| ]*\r

匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/

匹配首尾空格的正则表达式：(^\s*)|(\s*$)

应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：

String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, “”);
}

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

利用正则表达式去除字串中重复的字符的算法程序：
var s=”abacabefgeeii”
var s1=s.replace(/(.).*\1/g,”$1″)
var re=new RegExp(“["+s1+"]“,”g”)
var s2=s.replace(re,”")
alert(s1+s2) //结果为：abcefgi
思路是使用后向引用取出包括重复的字符，再以重复的字符建立第二个表达式，取到不重复的字符，两者串连。这个方法对于字符顺序有要求的字符串可能不适用。

得用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1
s=”http://www.gzcynet/page1.htm”
s=s.replace(/(.*\/){0,}([^\.]+).*/ig,”$2″)
alert(s)

用正则表达式限制只能输入中文：onkeyup=”value=value.replace(/[^\u4E00-\u9FA5]/g,”)” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\u4E00-\u9FA5]/g,”))”

用正则表达式限制只能输入全角字符： onkeyup=”value=value.replace(/[^\uFF00-\uFFFF]/g,”)” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\uFF00-\uFFFF]/g,”))”

用正则表达式限制只能输入数字：onkeyup=”value=value.replace(/[^\d]/g,”) “onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,”))”

用正则表达式限制只能输入数字和英文：onkeyup=”value=value.replace(/[\W]/g,”) “onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,”))”

作者: 石巍
版权所有，转载时必须以超链接形式注明作者和原始出处及本声明。

本文链接: http://www.smartwei.com/javascript-reg.html

例子

整篇文章中，都会回过头来参考一个方便的样例 XML 文档，参见 清单 1。此书籍列表包括各种信息，比如作者、两种完全虚构的价格和书名。
清单1: 样例 XML 文档 (book.xml)
[html]

<?xml version="1.0" encoding="utf-8"?>
<catalog>
<book format="trade">
<name>Jennifer Government</name>
<author>Max Barry</author>
<price curr="CAD">15.00</price>
<price curr="USD">12.00</price>
</book>

<book format="textbook">
<name>Unity Game Development Essentials</name>
<author>Will Goldstone</author>
<price curr="CAD">52.00</price>
<price curr="USD">45.00</price>
</book>

<book format="textbook">
<name>UNIX Visual QuickPro</name>
<author>Chris Herborth</author>
<price curr="CAD">15.00</price>
<price curr="USD">10.00</price>
</book>
</catalog>

[/html]

XPath 假定

对于本文中的 XPath 代码，您要做以下假定：

• 已经将 book.xml 文件（参见 清单 1）加载到您的 XPath 实现可以使用的格式。
• 从一个表示文档根的对象开始搜索。就是以 元素作为子元素的那个对象。您将称之为 root，因为它是 XML 文档层次结构的根。

由于在太多不同的平台上有太多的 XPath 实现，所以下面我们将重点放在 XPath 语句本身上，并使用一个类似于 JavaScript 的伪代码来在上下文中展示这些语句；请查看您喜欢的开发平台的类库，了解有关加载 XML 文档和您可用的特定 XML 节点对象的信息。

jQuery 假定

本文中的 jQuery 代码做以下假定：

• 使用的是最新（版本 1.4.0）jQuery 代码（参见 参考资料 中的链接）。
• 已经通过 jQuery.get() 或 jQuery.post() 方法加载了 book.xml 文件，并且已经将最终的 XML 文档存储在一个名为 root 的变量中（与 XPath 例子相同）。

用于做这件事的一些样例代码在 清单 2 中。
清单2:利用 jQuery 加载 XML 样例
[html]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Book Catalog</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
var root = null;

$(document).ready( function(){
$.get( "http://localhost/~chrish/books.xml",
function( data ) {
root = data;

$("p#status").text( "Loaded." );
} );
} );
// ]]></script>
</head>

<body>
<p id="status">
Loading book.xml…
</p>
</body>
</html>

[/html]
在 $(document).ready() 函数中，使用 jQuery get() 方法从本地 Web 服务器加载 books.xml，将最终的文档对象存储在 root 变量中，并用 status ID 设置段落的文本，以表明 XML 已完成加载。有关 jQuery 的更多信息，请查看本文末尾 参考资料 中的相关链接列表。

选择节点

XPath 和 jQuery 的基本目的都是从文档选择节点。一旦选择了一个节点（或一个节点集合），就可以找到您正在寻找的数据以及在需要时操纵文档。
XPath 设计用于确切返回您所寻找的节点；它一般非常特定。另一方面，jQuery 则使得操作大型节点集合非常容易，所以有时候您必须在开始处理节点之前小心地缩小匹配范围。

按名称选择节点

在搜索特定节点时，您通常知道它的名称，或者知道其父元素的名称。
要找到一个特定的元素，您会使用它的名称，如 清单 3 所示。
清单3:按名称选择节点
[html]

/* Find all <book> elements through XPath: */
var result = root.find( "//book" );

/* Find all <book> elements through jQuery: */
var result = $(root).find( "book" );

[/html]
用于选择所有 元素的 XPath 语句（//book）使用两个斜杠 (//)，来指定从当前节点（本例中是 root）开始、所有匹配的节点都会被找到。这是 jQuery 的默认行为，所以您不需要包含任何其他内容。在两种情况下，结果都是 清单 1 中的所有三个 元素。

通常可以通过指定元素路径来缩小搜索结果；结果将是自路径末尾的匹配节点（参见 清单 4）。
清单4:按路径选择节点—两者行为不同
[html]

/* Be more specific (XPath): */
var result = root.find( "/catalog//book" );

/* Be more specific (jQuery): */
var result = $(root).find( "catalog book" );

[/html]
从根元素 (/) 开始，这个 XPath 语句将寻找第一个 元素，然后返回这第一个 元素下的所有 元素。jQuery 语句的行为稍有不同；它将返回所有 元素下的所有 元素（参见 清单 5）。对于例子 book.xml 文件，结果是相同的节点集，但是如果您想要得到 元素下的所有 元素，那会怎么样呢？跟 清单 3 中一样，应该以两个斜杠 (//) 开始 XPath 表达式。
清单5:按路径找出内含的节点—两个例子的行为一样
[html]

/* Get all authors from all books (XPath): */
var result = root.find( "//book//author" );

/* Get all authors from all books (jQuery): */
var result = $(root).find( "book author" );

[/html]
要让 jQuery 跟 清单 4 中的 XPath 样例一样返回第一个 中的 元素，您必须指导它使用它找到的第一个 （参见 清单 6）。
清单6: 匹配第一个 catalog 中的 book—这些例子的行为一样
[html]

/* All books from the first catalog (XPath): */
var result = root.find( "/catalog//book" );

/* All books from the first catalog (jQuery): */
var result = $(root).find( "catalog:first book" );

[/html]
找到元素的最后一次出现（比如项目列表中的最后一个列表项，或者选择列表中的最后一个选项）也是一个常见操作。要正确地将一些东西附加到列表末尾，需要知道此末尾的位置（参见 清单 7）。
清单7: 找到 catalog 中的最后一个 book
[html]

/* The last book from the first catalog (XPath): */
var result = root.find( "/catalog/book[last()]" );

/* The last book from the first catalog (jQuery): */
var result = $(root).find( "catalog:first book:last" );

[/html]
在两种情况下，您都得到第一个 元素中的最后一个 元素，这正是您在寻找的。在 XPath 例子中，last() 函数返回最后匹配元素的索引（用在方括号中）。

选择任意节点

有时，您不知道您在寻找的元素的名称，或者需要找到一个可能在几个不同元素中的元素。在 XPath 和 jQuery 中，都可以使用星号 (*) 来匹配任意元素（参见 清单 8）。
清单8: any 元素
[html]

/* Find all authors in all elements inside of <catalog> (XPath): */
var result = root.find( "/catalog//*//author" );

/* Find all authors in all elements inside of <catalog> (jQuery): */
var result = $(root).find( "catalog:first * author" );

[/html]
注意，我在 jQuery 样例中使用了 :first，以使它的行为完全跟 XPath 版本一样。

按属性选择节点

类似的元素通常具有独特的属性，比如 XHTML 元素中使用的 id 属性，是为了给 XHTML 元素一个惟一的引用 ID（参见 清单 9）。有时，您并不太关心特定的元素，而是关心一个属性为特定值的元素。
清单9:找到那些讨厌的教科书
[html]

/* Find all books that are textbooks (XPath): */
var result = root.find( "//book[@format='textbook']" );

/* Find all books that are textbooks (jQuery): */
var result = $(root).find( "book[format='textbook']" );

[/html]
两个例子都将返回所有具有 format 属性且属性值设置为 textbook 的 元素（清单 1 中的 book.xml 文件中有两个这样的元素）。XPath 的语法使用一个 @ 符号来匹配属性（jQuery 只是将属性括在方括号中），您需要包含两个斜杠 (//) 来匹配所有 元素，但是两个查询非常类似，都很直观。

针对 XHTML 中两个最常见的匹配属性（id 和 class），jQuery 包含了两个快捷方式。在 XPath 中，您必须显式地写出它们（参见 清单 10）。
清单9:找到那些讨厌的教科书
[html]
/* Find the "status" <p>, then the highlighted elements (XPath) */
var result1 = xhtml_root.find( "//p[@id='status']" );
var result2 = xhtml_root.find( "//*[@class='highlight']" );

/* Find the "status" <p>, then the highlighted elements (jQuery) */
var result1 = $( "p#status" );
var result2 = $( ".highlight" );

[/html]
假设您的 XHTML 文档是有效的（确实是的，对吧？），ID 匹配查询将只返回一个元素，因为在有效的 XML 文档中，ID 必须是惟一的。

如果您是层叠样式表（Cascading Style Sheets，CSS）的粉丝，可能注意到了，jQuery 选择器几乎跟 CSS 选择器完全相同。这很方便，因为您只需要记住一个针对通过 jQuery 找到想要的元素和利用 CSS 为元素定义样式的标准。

模拟高级 XPath 特性

XPath 指定了很多在 jQuery 中不必要的有用特性；毕竟，jQuery 运行在浏览器中，可以充分利用 JavaScript 的优势，而 XPath 通常用于比较受限的环境中，比如 XSLT 处理。

当然，只要您想用，这并不能阻止您用 JavaScript 实现这些特性。

很容易数清查询结果的个数（参见 清单 10）。
清单10:多少节点匹配选择器？
[html]

/* How many price entries do you have? (XPath) */
var result = root.find( "count(//price)" );

/* How many price entries do you have? (jQuery) */
var result = $(root).find( "price" ).length;

[/html]
有时只需要知道节点是否包含某个字符串（参见 清单 11）。
清单11:第三个 中包含 Chris 吗？
[html]

/* Does the third <author> have "Chris" in its contents? (XPath) */
var result = root.find( "contains(//book[3]/author,’Chris’)" );

/* Does the third <author> have "Chris" in its contents? (jQuery) */
var result = $(root).find( "book:eq(2) author:contains(‘Chris’)" ).length > 0

[/html]
清单 11 中有一个非常重要的区别需要注意，XPath 的索引从 1 开始，不是从 0 开始。在 jQuery 中，必须使用 :eq(2) 来得到第三个结果。

XPath 也有一个 sum() 函数，它以匹配节点的内容作为参数，将这些参数转换成数值，并返回这些值的和。在使用 jQuery 时，必须编写一个简短的函数来模拟该函数（参见 清单 12）。
清单11:计算一些节点内容的和
[html]
/* Sum the Canadian prices (XPath) */
var result = root.find( "sum(//price[@curr='CAD'])" );

/* Sum the Canadian prices (jQuery) */
function sum( root, selector ) {
var x = 0;
$(root).find( selector ).map( function() {
if( this.text ) {
// Internet Explorer-only
return x += ( this.text * 1 );
}

// Firefox and W3C-compliant browsers
return x += ( this.textContent * 1 );
} );
return x;
}

var result = sum( root, "price[curr='CAD']" );

[/html]
jQuery 中的 map() 方法为每个结果节点运行指定的函数。注意，要得到结果节点的内容，也必须稍微费点事。确保在所有您喜欢的浏览器上测试这类 JavaScript。

您现在应该比较能理解何时以及如何将 XPath 1.0 和 jQuery 1.4 用于类似的任务了。

作者: 石巍
原载: IBM – 利用 XPath-jQuery 集锦手册在 XPath 和 jQuery 之间做选择
版权所有，转载时必须以超链接形式注明作者和原始出处及本声明。

本文链接: http://www.smartwei.com/xpath-vs-jquery.html