<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Pivot Code &#187; JavaScript</title>
	<atom:link href="http://www.pivotcode.com/category/web-development/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.pivotcode.com</link>
	<description>欢迎来我的小思想绽放的地方……</description>
	<lastBuildDate>Sun, 30 Oct 2011 13:37:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>JSON基础</title>
		<link>http://www.pivotcode.com/json-basic/</link>
		<comments>http://www.pivotcode.com/json-basic/#comments</comments>
		<pubDate>Thu, 26 Aug 2010 02:14:44 +0000</pubDate>
		<dc:creator>Vidar Liu</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[json]]></category>

		<guid isPermaLink="false">http://www.pivotcode.com/?p=696</guid>
		<description><![CDATA[JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition &#8211; December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。 它可以通过序列化把一个简单对象转换为一个简单的字符串,在网络中进行传输,然后在客户端进行反序列化,得到原始对象.功能上和XML差不多,只是它的体积小,在客户端解析方便,所以被广泛使用 JSON建构于两种结构： “名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。 值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。 这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。 JSON具有以下这些形式： 对象是一个无序的”&#8216;名称/值&#8217;对”集合。一个对象以”{“（左括号）开始，”}”（右括号）结束。每个”名称”后跟一个”:”（冒号）；”&#8216;名称 /值&#8217; 对”之间使用”,”（逗号）分隔。 数组是值（value）的有序集合。一个数组以”["（左中括号）开始，"]“（右中括号）结束。值之间使用”,”（逗号）分隔。 值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。 字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。 字符串（string）与C或者Java的字符串非常相似。 数值（number）也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。 空白可以加入到任何符号之间。 以下描述了完整的语言。(以上部分摘自:http://www.json.org/json-zh.html) JSON举例(javascript中使用json): 先来个最简单的: 1 2 3 [...]]]></description>
			<content:encoded><![CDATA[<p>JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition &#8211; December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。</p>
<p>它可以通过序列化把一个简单对象转换为一个简单的字符串,在网络中进行传输,然后在客户端进行反序列化,得到原始对象.功能上和XML差不多,只是它的体积小,在客户端解析方便,所以被广泛使用</p>
<p>JSON建构于两种结构：</p>
<p>“名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。</p>
<p>值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。</p>
<p>这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。</p>
<p>JSON具有以下这些形式：</p>
<p>对象是一个无序的”&#8216;名称/值&#8217;对”集合。一个对象以”{“（左括号）开始，”}”（右括号）结束。每个”名称”后跟一个”:”（冒号）；”&#8216;名称 /值&#8217; 对”之间使用”,”（逗号）分隔。</p>
<p>数组是值（value）的有序集合。一个数组以”["（左中括号）开始，"]“（右中括号）结束。值之间使用”,”（逗号）分隔。</p>
<p>值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。</p>
<p>字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。</p>
<p>字符串（string）与C或者Java的字符串非常相似。</p>
<p>数值（number）也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。</p>
<p>空白可以加入到任何符号之间。 以下描述了完整的语言。(以上部分摘自:http://www.json.org/json-zh.html)</p>
<p>JSON举例(javascript中使用json):</p>
<p>先来个最简单的:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">         <span style="color: #003366; font-weight: bold;">var</span> user <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;Id&quot;</span><span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;Name&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Hubery&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;Age&quot;</span><span style="color: #339933;">:</span><span style="color: #CC0000;">23</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;Email&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;hubery@163.com&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
         <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Id</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//这样访问也没问题alert(user[&quot;Id&quot;]);</span>
         <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #000066;">Name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
         <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Age</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
         <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Email</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>我们添加Address属性,定义更细的用户信息结构:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"> <span style="color: #003366; font-weight: bold;">var</span> user <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
             <span style="color: #3366CC;">&quot;Id&quot;</span><span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>
             <span style="color: #3366CC;">&quot;Name&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Hubery&quot;</span><span style="color: #339933;">,</span>
             <span style="color: #3366CC;">&quot;Age&quot;</span><span style="color: #339933;">:</span><span style="color: #CC0000;">23</span><span style="color: #339933;">,</span>
             <span style="color: #3366CC;">&quot;Address&quot;</span><span style="color: #339933;">:</span>
               <span style="color: #009900;">&#123;</span>
                   <span style="color: #3366CC;">&quot;City&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Beijing&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;ZipCode&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;111111&quot;</span>
               <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
             <span style="color: #3366CC;">&quot;Email&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;hubery@163.com&quot;</span>
           <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Id</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #000066;">Name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Age</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Address</span>.<span style="color: #660066;">City</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Address</span>.<span style="color: #660066;">ZipCode</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Email</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>下面我们把Address属性定义成数组,用户有两个Address:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"> <span style="color: #003366; font-weight: bold;">var</span> user <span style="color: #339933;">=</span>  <span style="color: #009900;">&#123;</span>
             <span style="color: #3366CC;">&quot;Id&quot;</span><span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>
             <span style="color: #3366CC;">&quot;Name&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Hubery&quot;</span><span style="color: #339933;">,</span>
             <span style="color: #3366CC;">&quot;Age&quot;</span><span style="color: #339933;">:</span><span style="color: #CC0000;">23</span><span style="color: #339933;">,</span>
             <span style="color: #3366CC;">&quot;Address&quot;</span><span style="color: #339933;">:</span>
               <span style="color: #009900;">&#91;</span>
                 <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;City&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Beijing&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;ZipCode&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;111111&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
                 <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;City&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Langfang&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;ZipCode&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;222222&quot;</span><span style="color: #009900;">&#125;</span>
               <span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
             <span style="color: #3366CC;">&quot;Email&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;hubery@163.com&quot;</span>
           <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Id</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #000066;">Name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Age</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Address</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">City</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//还可以这样:alert(user.Address[0][&quot;City&quot;]);</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Address</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">ZipCode</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Address</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">City</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Address</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">ZipCode</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>user.<span style="color: #660066;">Email</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>如果我们想要一个用户列表,能行吗?答案是,没问题!</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"> <span style="color: #003366; font-weight: bold;">var</span> user <span style="color: #339933;">=</span>  <span style="color: #009900;">&#91;</span> <span style="color: #009900;">&#123;</span>
                 <span style="color: #3366CC;">&quot;Id&quot;</span><span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>
                 <span style="color: #3366CC;">&quot;Name&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Hubery&quot;</span><span style="color: #339933;">,</span>
                 <span style="color: #3366CC;">&quot;Age&quot;</span><span style="color: #339933;">:</span><span style="color: #CC0000;">23</span><span style="color: #339933;">,</span>
                 <span style="color: #3366CC;">&quot;Address&quot;</span><span style="color: #339933;">:</span>
                   <span style="color: #009900;">&#91;</span>
                     <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;City&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Beijing&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;ZipCode&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;111111&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
                     <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;City&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Langfang&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;ZipCode&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;222222&quot;</span><span style="color: #009900;">&#125;</span>
                   <span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
                 <span style="color: #3366CC;">&quot;Email&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;hubery@163.com&quot;</span>
               <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
               <span style="color: #009900;">&#123;</span>
                 <span style="color: #3366CC;">&quot;Id&quot;</span><span style="color: #339933;">:</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span>
                 <span style="color: #3366CC;">&quot;Name&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Chris&quot;</span><span style="color: #339933;">,</span>
                 <span style="color: #3366CC;">&quot;Age&quot;</span><span style="color: #339933;">:</span><span style="color: #CC0000;">24</span><span style="color: #339933;">,</span>
                 <span style="color: #3366CC;">&quot;Address&quot;</span><span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;City&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Beijing&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;ZipCode&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;100085&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
                 <span style="color: #3366CC;">&quot;Email&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;chris@163.com&quot;</span>
               <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span>
&nbsp;
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Id: &quot;</span><span style="color: #339933;">+</span>user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Id</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>Name: &quot;</span><span style="color: #339933;">+</span>
           user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #000066;">Name</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>Age: &quot;</span><span style="color: #339933;">+</span>
           user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Age</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>Address: (&quot;</span><span style="color: #339933;">+</span>
           user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Address</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">City</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;,&quot;</span><span style="color: #339933;">+</span>user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Address</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">ZipCode</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;) (&quot;</span><span style="color: #339933;">+</span>user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Address</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">City</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;,&quot;</span><span style="color: #339933;">+</span>user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Address</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">ZipCode</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;)<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>Email: &quot;</span><span style="color: #339933;">+</span>
           user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Email</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
           <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Id: &quot;</span><span style="color: #339933;">+</span>user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Id</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>Name: &quot;</span><span style="color: #339933;">+</span>
           user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #000066;">Name</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>Age: &quot;</span><span style="color: #339933;">+</span>
           user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Age</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>Address: (&quot;</span><span style="color: #339933;">+</span>
           user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Address</span>.<span style="color: #660066;">City</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;,&quot;</span><span style="color: #339933;">+</span>user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Address</span>.<span style="color: #660066;">ZipCode</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;)<span style="color: #000099; font-weight: bold;">\r</span><span style="color: #000099; font-weight: bold;">\n</span>Email: &quot;</span><span style="color: #339933;">+</span>
           user<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">Email</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<h2  class="related_post_title">随机日志</h2><ul class="related_post"><li><a href="http://www.pivotcode.com/html5-resume/" title="HTML5初探——个人HTML5简历">HTML5初探——个人HTML5简历</a></li><li><a href="http://www.pivotcode.com/scrollbar-at-the-some-time-scroll/" title="同时滚动的滚动条">同时滚动的滚动条</a></li><li><a href="http://www.pivotcode.com/the-eight-questions-in-life/" title="人生中八大经典问题">人生中八大经典问题</a></li><li><a href="http://www.pivotcode.com/leading-the-web-to-its-full-potental-6/" title="第六期web标准化交流会心得">第六期web标准化交流会心得</a></li><li><a href="http://www.pivotcode.com/jquery-1-4-new-features/" title="jQuery 1.4 的新特性">jQuery 1.4 的新特性</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pivotcode.com/json-basic/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>基础Javasctipt正则表达式</title>
		<link>http://www.pivotcode.com/sample-javasctipt-regular-expressions/</link>
		<comments>http://www.pivotcode.com/sample-javasctipt-regular-expressions/#comments</comments>
		<pubDate>Thu, 15 Apr 2010 02:29:03 +0000</pubDate>
		<dc:creator>Vidar Liu</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[perl]]></category>
		<category><![CDATA[RegExp]]></category>
		<category><![CDATA[regular expression]]></category>
		<category><![CDATA[正则表达式]]></category>

		<guid isPermaLink="false">http://www.pivotcode.com/?p=610</guid>
		<description><![CDATA[对于正则的使用，先前一直都是一个概念性的东西，只是知道用它可以匹配字符格式。后来在项目中遇到关于字符操作的问题，才开始着手对正则进行一些了解。而对于当时的那种了解，也只不过是项目的一时所需，只找到了适合自己的代码，然后应用到项目使用。因此从没有真正的去系统的学习。今天在订阅中看到幸福收藏夹转载的一篇关于javascript正则表达式的教程，看了一段以后就了解了关于正则表达式很多基础的系统性东西，因此转过来分享一下，也方便以后自己的复习。 网上正则表达式的教程够多了，但由于javascript的历史比较悠久，也比较古老，因此有许多特性是不支持的。我们先从最简单地说起，文章所演示的正则基本都是perl方式。 元字符 ( [ { \ ^ $ &#124; ) ? * + . 预定义的特殊字符 字符 正则 描述 \t /\t/ 制表符 \n /\n/ 制表符 \r /\r/ 回车符 \f /\f/ 换页符 \a /\a/ alert字符 \e /\e/ escape字符 \cX /\cX/ 与X相对应的控制字符 \b /\b/ 与回退字符 \v /\v/ 垂直制表符 \0 /\0/ 空字符 字符类 简单类 原则上正则的一个字符对应一个字符，我们可以用[]把它们括起来，让[]这个整体对应一个字符。如 alert&#40;/ruby/.test&#40;&#34;ruby&#34;&#41;&#41;;//true alert&#40;/[abc]/.test&#40;&#34;a&#34;&#41;&#41;;//true alert&#40;/[abc]/.test&#40;&#34;b&#34;&#41;&#41;;//true [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p>对于正则的使用，先前一直都是一个概念性的东西，只是知道用它可以匹配字符格式。后来在项目中遇到关于字符操作的问题，才开始着手对正则进行一些了解。而对于当时的那种了解，也只不过是项目的一时所需，只找到了适合自己的代码，然后应用到项目使用。因此从没有真正的去系统的学习。今天在订阅中看到幸福收藏夹转载的一篇关于javascript正则表达式的教程，看了一段以后就了解了关于正则表达式很多基础的系统性东西，因此转过来分享一下，也方便以后自己的复习。</p></blockquote>
<p>网上正则表达式的教程够多了，但由于javascript的历史比较悠久，也比较古老，因此有许多特性是不支持的。我们先从最简单地说起，文章所演示的正则基本都是perl方式。<br />
<span id="more-610"></span></p>
<h3>元字符</h3>
<p>( [ { \ ^ $ | ) ? * + .</p>
<h3>预定义的特殊字符</h3>
<table>
<col width="33%"></col>
<col width="33%"></col>
<col width="33%"></col>
<thead>
<tr>
<th>字符</th>
<th>正则</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>\t</td>
<td>/\t/</td>
<td>制表符</td>
</tr>
<tr>
<td>\n</td>
<td>/\n/</td>
<td>制表符</td>
</tr>
<tr>
<td>\r</td>
<td>/\r/</td>
<td>回车符</td>
</tr>
<tr>
<td>\f</td>
<td>/\f/</td>
<td>换页符</td>
</tr>
<tr>
<td>\a</td>
<td>/\a/</td>
<td>alert字符</td>
</tr>
<tr>
<td>\e</td>
<td>/\e/</td>
<td>escape字符</td>
</tr>
<tr>
<td>\cX</td>
<td>/\cX/</td>
<td>与X相对应的控制字符</td>
</tr>
<tr>
<td>\b</td>
<td>/\b/</td>
<td>与回退字符</td>
</tr>
<tr>
<td>\v</td>
<td>/\v/</td>
<td>垂直制表符</td>
</tr>
<tr>
<td>\0</td>
<td>/\0/</td>
<td>空字符</td>
</tr>
</tbody>
</table>
<h3>字符类</h3>
<p><strong>简单类</strong></p>
<p>原则上正则的一个字符对应一个字符，我们可以用[]把它们括起来，让[]这个整体对应一个字符。如</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/ruby/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ruby&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[abc]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[abc]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;b&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[abc]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;c&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;a bat ,a Cat,a fAt bat ,a faT cat&quot;</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[bcf]at/gi</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//bat,Cat,fAt,bat,faT,cat</span></pre></div></div>

<p><strong>负向类</strong></p>
<p>也是在那个括号里做文章，前面加个元字符进行取反，表示匹配不能为括号里面的字符。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[^abc]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//false</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[^abc]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;b&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//false</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[^abc]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;6&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[^abc]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;gg&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span></pre></div></div>

<p><strong>范围类</strong></p>
<p>还是在那个中括号里面做文章。有时匹配的东西过多，而且类型又相同，全部输入太麻烦，我们可以用它。特征就是在中间加了个横线。</p>
<p><strong>组合类</strong></p>
<p>还是在那个中括号里面做文章。允许用中括号匹配不同类型的单个字符。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[a-f]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;b&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[a-f]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;k&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//false</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[a-z]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;h&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[A-Z]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;gg&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//false</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[^H-Y]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;G&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[0-9]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;8&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[^7-9]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;6&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
&nbsp;
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[a-m1-5\n]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[a-m1-5\n]/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;3&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\&quot;</span>
alert(/[a-m1-5<span style="color: #000099; font-weight: bold;">\n</span>]/.test(a))//true
alert(/[a-m1-5<span style="color: #000099; font-weight: bold;">\n</span>]/.test(&quot;</span>r<span style="color: #3366CC;">&quot;))//false</span></pre></div></div>

<p><strong>预定义类</strong></p>
<p>还是在那个中括号里面做文章，不过它好像已经走到尽头了。由于是中括号的马甲，因此它们还是对应一个字符。</p>
<table>
<thead>
<tr>
<th>字符</th>
<th>等同于</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>.</td>
<td>[^\n\r]</td>
<td>除了换行和回车之外的任意字符</td>
</tr>
<tr>
<td>\d</td>
<td>[0-9]</td>
<td>数字字符</td>
</tr>
<tr>
<td>\D</td>
<td>[^0-9]</td>
<td>非数字字符</td>
</tr>
<tr>
<td>\s</td>
<td>[ \t\n\x0B\f\r]</td>
<td>空白字符</td>
</tr>
<tr>
<td>\S</td>
<td>[^ \t\n\x0B\f\r]</td>
<td>非空白字符</td>
</tr>
<tr>
<td>\w</td>
<td>[a-zA-Z_0-9]</td>
<td>单词字符(所有的字母)</td>
</tr>
<tr>
<td>\W</td>
<td>[^a-zA-Z_0-9]</td>
<td>非单词字符</td>
</tr>
</tbody>
</table>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\d/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;3&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\d/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;w&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//false</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\D/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;w&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\w/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;w&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\w/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;司&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//false</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\W/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;徒&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\s/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot; &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\S/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot; &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//false</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\S/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;正&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/./</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;美&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/./</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;  &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\&quot;</span>
alert(/./.test(a))//true</span></pre></div></div>

<h3>量词</h3>
<p>由于元字符与特殊字符或字符类或者它们的组合（中括号）甚至它们的马甲（预定义类）都是一对一进行匹配。我们要匹配“司徒正美这个词”，最简单都要 /…./，如果长到50多个字符岂不是要死人。因此我们逼切需要一个简单的操作，来处理这数量关系。</p>
<p><strong>简单量词</strong></p>
<table>
<thead>
<tr>
<th>代码</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>?</td>
<td>软性量词</td>
<td>出现零次或一次</td>
</tr>
<tr>
<td>*</td>
<td>软性量词</td>
<td>出现零次或多次(任意次)</td>
</tr>
<tr>
<td>+</td>
<td>软性量词</td>
<td>出现一次或多次（至道一次）</td>
</tr>
<tr>
<td>{n}</td>
<td>硬性量词</td>
<td>出现零次或一次</td>
</tr>
<tr>
<td>{n,m}</td>
<td>软性量词</td>
<td>至少出现n次但不超过m次</td>
</tr>
<tr>
<td>{n,}</td>
<td>软性量词</td>
<td>至少出现n次(+的升级版)</td>
</tr>
</tbody>
</table>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/..../</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;司徒正美&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/司徒正美/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;司徒正美&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[\u4e00-\u9fa5]{4}/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;司徒正美&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[\u4e00-\u9fa5]{4}/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;司徒正美55&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^[\u4e00-\u9fa5]+$/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;正则表达式&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^[\u4e00-\u9fa5]+$/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;正则表达式&amp;amp;*@@&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//false</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\d{6}/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;123456&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[ruby]{2}/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;rr&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[ruby]{2}/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ru&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[ruby]{2}/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ry&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span></pre></div></div>

<p>/[\u4e00-\u9fa5]/用于匹配单个汉字。</p>
<p><strong>贪婪量词，惰性量词与支配性量词</strong></p>
<p>贪婪量词，上面提到的所有简单量词。就像成语中说的巴蛇吞象那样，一口吞下整个字符串，发现吞不下（匹配不了），再从后面一点点吐出来（去掉最后一 个字符，再看这时这个整个字符串是否匹配，不断这样重复直到长度为零）</p>
<p>隋性量词，在简单量词后加问号。由于太懒了，先吃了前面第一个字符，如果不饱再捏起多添加一个（发现不匹配，就读下第二个，与最初的组成一个有两个 字符串的字符串再尝试匹配，如果再不匹配，再吃一个组成拥有三个字符的字符串……）。其工作方式与贪婪量词相反。</p>
<p>支配性量词，在简单量词后加加号。上面两种都有个不断尝试的过程，而支配性量词却只尝试一次，不合口味就算了。就像一个出身高贵居支配地位的公主。 但你也可以说它是最懒量词。由于javascript不支持，所以它连出场的机会也没有了。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> re1 <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/.*bbb/g</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//贪婪</span>
<span style="color: #003366; font-weight: bold;">var</span> re2 <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/.*?bbb/g</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//惰性</span>
<span style="color: #006600; font-style: italic;">//  var re3 = /.*+bbb/g;//支配性,javascript不支持，IE与所有最新的标准浏览器都报错</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>re1.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;abbbaabbbaaabbbb1234&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>re1.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;abbbaabbbaaabbbb1234&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//null</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;abbbaabbbaaabbbb1234&quot;</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span>re1<span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//abbbaabbbaaabbbb</span>
&nbsp;
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>re2.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;abbbaabbbaaabbbb1234&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>re2.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;abbbaabbbaaabbbb1234&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//aabbb</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;abbbaabbbaaabbbb1234&quot;</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span>re2<span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//abbb,aabbb,aaabbb</span></pre></div></div>

<h3>分组</h3>
<p>到目前为止，我们只能一个字符到匹配，虽然量词的出现，能帮助我们处理一排密紧密相连的同类型字符。但这是不够的，下面该轮到小括号出场了，中括号 表示范围内选择，大括号表示重复次数。小括号允许我们重复多个字符。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//分组+量词</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/(dog){2}/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;dogdog&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #006600; font-style: italic;">//分组+范围</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;baddad&quot;</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/([bd]ad?)*/</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//baddad,dad</span>
<span style="color: #006600; font-style: italic;">//分组+分组</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;mon and dad&quot;</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/(mon( and dad)?)/</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//mon and dad,mon and dad, and dad</span></pre></div></div>

<h3>反向引用</h3>
<p>反向引用标识由正则表达式中的匹配组捕获的子字符串。每个反向引用都由一个编号或名称来标识，并通过“\编号”表示法进行引用。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> color <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;#990000&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009966; font-style: italic;">/#(\d+)/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>color<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>RegExp.$1<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//990000</span>
&nbsp;
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/(dog)\1/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;dogdog&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> num <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;1234 5678&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> newNum <span style="color: #339933;">=</span> num.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/(\d{4}) (\d{4})/</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;$2 $1&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>newNum<span style="color: #009900;">&#41;</span></pre></div></div>

<h3>候选</h3>
<p>继续在分组上做文章。在分组中插入管道符（“|”），把它划分为两个或多个候多项。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/(red|black|yellow)!!/</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reg.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;red!!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reg.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;black!!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reg.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;yellow!!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span></pre></div></div>

<h3>非捕获性分组</h3>
<p>并不是所有分组都能创建反向引用，有一种特别的分组称之为非捕获性分组，它是不会创建反向引用。反之，就是捕获性分组。要创建一个非捕获性分组，只 要在分组的左括号的后面紧跟一个问号与冒号就行了。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> color <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;#990000&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009966; font-style: italic;">/#(?:\d+)/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>color<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>RegExp.$1<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//&quot;&quot;</span></pre></div></div>

<p>题目，移除所有标签，只留下innerText!</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;
&nbsp;
&lt;a href=&quot;</span>http<span style="color: #339933;">:</span><span style="color: #006600; font-style: italic;">//www.cnblogs.com/rubylouvre/&quot;&gt;Ruby Louvre&lt;/a&gt;by &lt;em&gt;司徒正美&lt;/em&gt;</span>
&nbsp;
<span style="color: #3366CC;">&quot;;
var text = html.replace(/&amp;lt;(?:.|<span style="color: #000099; font-weight: bold;">\s</span>)*?&amp;gt;/g, &quot;</span><span style="color: #3366CC;">&quot;);
alert(text)</span></pre></div></div>

<p>注意：javascript不存在命名分组</p>
<h3>前瞻</h3>
<p>继续在分组内做文章。前瞻与后瞻其实都属于零宽断言，但javascript不支持后瞻。</p>
<table>
<col width="33%"></col>
<col width="33%"></col>
<col width="33%"></col>
<thead>
<tr>
<th colspan="3">零宽断言</th>
</tr>
<tr>
<th>正则</th>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>(?=exp)</td>
<td>正向前瞻</td>
<td>匹配exp前面的位置</td>
</tr>
<tr>
<td>(?!exp)</td>
<td>负向前瞻</td>
<td>匹配后面不是exp的位置</td>
</tr>
<tr>
<td>(?&lt;=exp)</td>
<td>正向后瞻</td>
<td>匹配exp后面的位置不支持</td>
</tr>
<tr>
<td>(?&lt;!exp)</td>
<td>负向后瞻</td>
<td>匹配前面不是exp的位置不支持</td>
</tr>
</tbody>
</table>
<p>正向前瞻用来检查接下来的出现的是不是某个特定的字符集。而负向前瞻则是检查接下来的不应该出现的特定字符串集。零宽断言是不会被捕获的。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> str1 <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;bedroom&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str2 <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;bedding&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> reBed <span style="color: #339933;">=</span> <span style="color: #339933;">/</span><span style="color: #009900;">&#40;</span>bed<span style="color: #009900;">&#40;</span><span style="color: #339933;">?=</span>room<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">///在我们捕获bed这个字符串时，抢先去看接下来的字符串是不是room</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reBed.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>str1<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>RegExp.$1<span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//bed</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>RegExp.$2 <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reBed.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>str2<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//false</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> str1 <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;bedroom&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str2 <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;bedding&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> reBed <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/(bed(?!room))/</span>  <span style="color: #006600; font-style: italic;">//要来它后面不能是room</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reBed.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>str1<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//false</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reBed.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>str2<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//true</span></pre></div></div>

<p>题目，移除hr以外的所有标签，只留下innerText!</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;
&nbsp;
&lt;a href=&quot;</span>http<span style="color: #339933;">:</span><span style="color: #006600; font-style: italic;">//www.cnblogs.com/rubylouvre/&quot;&gt;Ruby Louvre&lt;/a&gt;</span>
&nbsp;
<span style="color: #339933;">&lt;</span>hr <span style="color: #339933;">/&gt;</span>
&nbsp;
by <span style="color: #339933;">&lt;</span>em<span style="color: #339933;">&gt;</span>司徒正美<span style="color: #339933;">&lt;/</span>em<span style="color: #339933;">&gt;</span>
&nbsp;
<span style="color: #3366CC;">&quot;;
var text = html.replace(/&amp;lt;(?!hr)(?:.|<span style="color: #000099; font-weight: bold;">\s</span>)*?&amp;gt;/ig,&quot;</span><span style="color: #3366CC;">&quot;)
alert(text)//Ruby Louvre&lt;hr /&gt;by 司徒正美</span></pre></div></div>

<h3>边界</h3>
<p>一个要与字符类合用的东西。</p>
<table>
<col width="33%"></col>
<col width="33%"></col>
<col width="33%"></col>
<thead>
<tr bgcolor="#ccc">
<th colspan="3">边界</th>
</tr>
<tr>
<th>正则</th>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>^</td>
<td>开头</td>
<td>注意不能紧跟于左中括号的后面</td>
</tr>
<tr>
<td>$</td>
<td>结尾</td>
<td></td>
</tr>
<tr>
<td>\b</td>
<td>单词边界</td>
<td>指[a-zA-Z_0-9]之外的字符</td>
</tr>
<tr>
<td>\B</td>
<td>非单词边界</td>
<td></td>
</tr>
</tbody>
</table>
<p>题目，设计一个字符串原型方法，实现首字母大写！</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;ruby&quot;</span><span style="color: #339933;">;</span>
String.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">capitalize</span> <span style="color: #339933;">=</span>  <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^\w/</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>s<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">return</span> s.<span style="color: #660066;">toUpperCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
       <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>a.<span style="color: #660066;">capitalize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//Ruby</span></pre></div></div>

<p>单词边界举例。要匹配的东西的前端或未端不能为英文字母阿拉伯字数字或下横线。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;12w-eefd&amp;amp;efrew&quot;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>str.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\b\w+\b/g</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #006600; font-style: italic;">//12w,eefd,efrew</span></pre></div></div>

<table>
<col></col>
<col align="left"></col>
<thead>
<tr>
<th width="15%">实例属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>global</td>
<td>是当前表达式模式首次匹配内容的开始位置，从0开始计数。其初始值为-1，每次成功匹配时，index属性都会随之改变。</td>
</tr>
<tr>
<td>ignoreCase</td>
<td>返回创建RegExp对象实例时指定的ignoreCase标志（i）的状态。如果创建RegExp对象实例时设置了i标志，该属性 返回True，否则返回False，默认值为False。</td>
</tr>
<tr>
<td>lastIndex</td>
<td>是当前表达式模式首次匹配内容中最后一个字符的下一个位置，从0开始计数，常被作为继续搜索时的起始位置，初始值为-1， 表示从起始位置开始搜索，每次成功匹配时，lastIndex属性值都会随之改变。(只有使用exec()或test()方法才会填入，否则为0)</td>
</tr>
<tr>
<td>multiLine</td>
<td>返回创建RegExp对象实例时指定的multiLine标志（m）的状态。如果创建RegExp对象实例时设置了m标志，该属性返 回True，否则返回False，默认值为False。</td>
</tr>
<tr>
<td>source</td>
<td>返回创建RegExp对象实例时指定的表达式文本字符串。</td>
</tr>
</tbody>
</table>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;JS's Louvre&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\w/g</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reg.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//J</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reg.<span style="color: #660066;">lastIndex</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//1</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reg.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//S</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reg.<span style="color: #660066;">lastIndex</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//2</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reg.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//s</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reg.<span style="color: #660066;">lastIndex</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//4</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reg.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//L</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>reg.<span style="color: #660066;">lastIndex</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//6</span></pre></div></div>

<h2  class="related_post_title">相关日志</h2><ul class="related_post"><li><a href="http://www.pivotcode.com/web-test-tools-share-2/" title="网页测试工具分享">网页测试工具分享</a></li><li><a href="http://www.pivotcode.com/microsoft-expression-web-3-superpreview/" title="体验篇：Microsoft Expression Web 3 SuperPreview全攻略">体验篇：Microsoft Expression Web 3 SuperPreview全攻略</a></li><li><a href="http://www.pivotcode.com/common-regular-expressions/" title="常用正则表达式速查">常用正则表达式速查</a></li><li><a href="http://www.pivotcode.com/jquery-1-4-new-features/" title="jQuery 1.4 的新特性">jQuery 1.4 的新特性</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pivotcode.com/sample-javasctipt-regular-expressions/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>同时滚动的滚动条</title>
		<link>http://www.pivotcode.com/scrollbar-at-the-some-time-scroll/</link>
		<comments>http://www.pivotcode.com/scrollbar-at-the-some-time-scroll/#comments</comments>
		<pubDate>Mon, 01 Mar 2010 04:03:25 +0000</pubDate>
		<dc:creator>Vidar Liu</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[scroll]]></category>
		<category><![CDATA[scrollbar]]></category>
		<category><![CDATA[同时滚动]]></category>
		<category><![CDATA[对照]]></category>
		<category><![CDATA[滚动条]]></category>

		<guid isPermaLink="false">http://www.pivotcode.com/?p=389</guid>
		<description><![CDATA[左右同时滚动的滚动条，很实用的功能，用于左右对照。以下是代码： window.onload=function&#40;&#41;&#123; var leftDiv=document.getElementById&#40;&#34;divleft&#34;&#41;;//获取左侧div的id var rightDiv=document.getElementById&#40;&#34;divright&#34;&#41;;//获取右侧div的id //当右侧滚动条滚动时，左侧滚动条的位置等于右侧滚动条位置 rightDiv.onscroll=function&#40;&#41;&#123; leftDiv.scrollTop=rightDiv.scrollTop; &#125; //当左侧滚动条滚动时，右侧滚动条的位置等于左侧滚动条位置 leftDiv.onscroll=function&#40;&#41;&#123; rightDiv.scrollTop=leftDiv.scrollTop; &#125; &#125; 示例 随机日志常用正则表达式速查JSON基础十八日 雨WordPress2.8添加并使用illacrimo-plus动态风格2010至言2012]]></description>
			<content:encoded><![CDATA[<p>左右同时滚动的滚动条，很实用的功能，用于左右对照。以下是代码：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">window.<span style="color: #000066;">onload</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> leftDiv<span style="color: #339933;">=</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;divleft&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//获取左侧div的id</span>
    <span style="color: #003366; font-weight: bold;">var</span> rightDiv<span style="color: #339933;">=</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;divright&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//获取右侧div的id</span>
        <span style="color: #006600; font-style: italic;">//当右侧滚动条滚动时，左侧滚动条的位置等于右侧滚动条位置</span>
	rightDiv.<span style="color: #660066;">onscroll</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    	        leftDiv.<span style="color: #660066;">scrollTop</span><span style="color: #339933;">=</span>rightDiv.<span style="color: #660066;">scrollTop</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
        <span style="color: #006600; font-style: italic;">//当左侧滚动条滚动时，右侧滚动条的位置等于左侧滚动条位置</span>
	leftDiv.<span style="color: #660066;">onscroll</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		rightDiv.<span style="color: #660066;">scrollTop</span><span style="color: #339933;">=</span>leftDiv.<span style="color: #660066;">scrollTop</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<h3>示例</h3>
<p><iframe width='660' height='560' frameborder='0' src='http://www.pivotcode.com/demo/test_scroll.html'/></iframe></p>
<h2  class="related_post_title">随机日志</h2><ul class="related_post"><li><a href="http://www.pivotcode.com/common-regular-expressions/" title="常用正则表达式速查">常用正则表达式速查</a></li><li><a href="http://www.pivotcode.com/ie9-platform-preview/" title="IE9 Platform Preview——IE9预览版本">IE9 Platform Preview——IE9预览版本</a></li><li><a href="http://www.pivotcode.com/every-year-today/" title="每一年，这一天">每一年，这一天</a></li><li><a href="http://www.pivotcode.com/microsoft-expression-web-3-superpreview/" title="体验篇：Microsoft Expression Web 3 SuperPreview全攻略">体验篇：Microsoft Expression Web 3 SuperPreview全攻略</a></li><li><a href="http://www.pivotcode.com/pivot-browser/" title="微软实验室产品Pivot浏览器初体验">微软实验室产品Pivot浏览器初体验</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pivotcode.com/scrollbar-at-the-some-time-scroll/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>常用正则表达式速查</title>
		<link>http://www.pivotcode.com/common-regular-expressions/</link>
		<comments>http://www.pivotcode.com/common-regular-expressions/#comments</comments>
		<pubDate>Wed, 24 Feb 2010 07:46:49 +0000</pubDate>
		<dc:creator>Vidar Liu</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[学习笔记]]></category>
		<category><![CDATA[Common]]></category>
		<category><![CDATA[匹配]]></category>
		<category><![CDATA[正则]]></category>
		<category><![CDATA[正则表达式]]></category>
		<category><![CDATA[程序]]></category>

		<guid isPermaLink="false">http://mingsenliu.com/?p=287</guid>
		<description><![CDATA[匹配中文字符的正则表达式： [\u4e00-\u9fa5] 评注：匹配中文还真是个头疼的事，有了这个表达式就好办了 匹配双字节字符(包括汉字在内)：[^\x00-\xff] 评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1） 匹配空白行的正则表达式：\n\s*\r 评注：可以用来删除空白行 匹配HTML标记的正则表达式：&#60;(\S*?)[^&#62;]*&#62;.*?&#60;/&#62;&#124;&#60;.*? /&#62; 评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力 匹配首尾空白字符的正则表达式：^\s*&#124;\s*$ 评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式 匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 评注：表单验证时很实用 匹配网址URL的正则表达式：[a-zA-z]+://[^\s]* 评注：网上流传的版本功能很有限，上面这个基本可以满足需求 匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]$ 评注：表单验证时很实用 匹配国内电话号码：\d-\d&#124;\d-\d 评注：匹配形式如 0511-4405222 或 021-87888822 匹配腾讯QQ号：[1-9][0-9] 评注：腾讯QQ号从10000开始 匹配中国邮政编码：[1-9]\d(?!\d) 评注：中国邮政编码为6位数字 匹配身份证：\d&#124;\d 评注：中国的身份证为15位或18位 匹配ip地址：\d+\.\d+\.\d+\.\d+ 评注：提取ip地址时有用 匹配特定数字： ^[1-9]\d*$　 　 //匹配正整数 ^-[1-9]\d*$ 　 //匹配负整数 ^-?[1-9]\d*$　　 //匹配整数 ^[1-9]\d*&#124;0$　 //匹配非负整数（正整数 + 0） ^-[1-9]\d*&#124;0$　　 //匹配非正整数（负整数 + 0） ^[1-9]\d*\.\d*&#124;0\.\d*[1-9]\d*$　　 //匹配正浮点数 ^-([1-9]\d*\.\d*&#124;0\.\d*[1-9]\d*)$　 //匹配负浮点数 ^-?([1-9]\d*\.\d*&#124;0\.\d*[1-9]\d*&#124;0?\.0+&#124;0)$　 //匹配浮点数 ^[1-9]\d*\.\d*&#124;0\.\d*[1-9]\d*&#124;0?\.0+&#124;0$　　 [...]]]></description>
			<content:encoded><![CDATA[<p>匹配中文字符的正则表达式： [\u4e00-\u9fa5]<br />
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了</p>
<p>匹配双字节字符(包括汉字在内)：[^\x00-\xff]<br />
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）</p>
<p>匹配空白行的正则表达式：\n\s*\r<br />
评注：可以用来删除空白行</p>
<p>匹配HTML标记的正则表达式：&lt;(\S*?)[^&gt;]*&gt;.*?&lt;/&gt;|&lt;.*? /&gt;<br />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力</p>
<p>匹配首尾空白字符的正则表达式：^\s*|\s*$<br />
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式</p>
<p>匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*<br />
评注：表单验证时很实用</p>
<p>匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*<br />
评注：网上流传的版本功能很有限，上面这个基本可以满足需求</p>
<p>匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]$<br />
评注：表单验证时很实用</p>
<p>匹配国内电话号码：\d-\d|\d-\d<br />
评注：匹配形式如 0511-4405222 或 021-87888822</p>
<p>匹配腾讯QQ号：[1-9][0-9]<br />
评注：腾讯QQ号从10000开始</p>
<p>匹配中国邮政编码：[1-9]\d(?!\d)<br />
评注：中国邮政编码为6位数字</p>
<p>匹配身份证：\d|\d<br />
评注：中国的身份证为15位或18位</p>
<p>匹配ip地址：\d+\.\d+\.\d+\.\d+<br />
评注：提取ip地址时有用</p>
<p>匹配特定数字：<br />
^[1-9]\d*$　 　 //匹配正整数<br />
^-[1-9]\d*$ 　 //匹配负整数<br />
^-?[1-9]\d*$　　 //匹配整数<br />
^[1-9]\d*|0$　 //匹配非负整数（正整数 + 0）<br />
^-[1-9]\d*|0$　　 //匹配非正整数（负整数 + 0）<br />
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 //匹配正浮点数<br />
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配负浮点数<br />
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$　 //匹配浮点数<br />
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）<br />
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$　　//匹配非正浮点数（负浮点数 + 0）<br />
评注：处理大量数据时有用，具体应用时注意修正</p>
<p>匹配特定字符串：<br />
^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串<br />
^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串<br />
^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串<br />
^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串<br />
^\w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串</p>
<h2  class="related_post_title">相关日志</h2><ul class="related_post"><li><a href="http://www.pivotcode.com/sample-javasctipt-regular-expressions/" title="基础Javasctipt正则表达式">基础Javasctipt正则表达式</a></li><li><a href="http://www.pivotcode.com/css-five-common-functions/" title="CSS五个常见却不常用的属性">CSS五个常见却不常用的属性</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pivotcode.com/common-regular-expressions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

