<?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>KUNKKA</title>
	<atom:link href="http://www.kunkka.cn/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.kunkka.cn</link>
	<description>活着就是折腾</description>
	<lastBuildDate>Tue, 01 Jun 2010 07:38:00 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>了解浏览器的默认样式表</title>
		<link>http://www.kunkka.cn/2010/06/01/user-agent-style-sheets/</link>
		<comments>http://www.kunkka.cn/2010/06/01/user-agent-style-sheets/#comments</comments>
		<pubDate>Tue, 01 Jun 2010 07:32:00 +0000</pubDate>
		<dc:creator>kunkka</dc:creator>
				<category><![CDATA[Xhtml / Css]]></category>

		<guid isPermaLink="false">http://www.kunkka.cn:81/?p=346</guid>
		<description><![CDATA[每位web设计师和开发人员对IE可能都会咬牙切齿，主要是因为IE的css属性和标准相比有太多的差异。
IEcss.com 是一个帮助我们更好的理解不兼容性原因所在的网站。
它为IE的主流版本提供了一个user agent style sheets（默认css）的表格，包括IE6, IE7, IE8, 和 IE9 Platform Preview，当然还有提供Firefox ，Webkit，Opera默认css文件下载。
这个表格包括了几乎所有的css属性值，并且他们都能够被下载。

挺有用的一个表格，特别是对前端开发人员，了解各种浏览器默认css渲染的差异性，就能更好知道为什么html元素在各个浏览器的表现上不同，也就能更好的reset以达到视觉上的一致。
]]></description>
			<content:encoded><![CDATA[<p>每位web设计师和开发人员对IE可能都会咬牙切齿，主要是因为IE的css属性和标准相比有太多的差异。</p>
<p><a href="http://www.iecss.com/" target="_blank" title="连接到IEcss.com">IEcss.com</a> 是一个帮助我们更好的理解不兼容性原因所在的网站。</p>
<p>它为IE的主流版本提供了一个user agent style sheets（默认css）的表格，包括IE6, IE7, IE8, 和 IE9 Platform Preview，当然还有提供Firefox ，Webkit，Opera默认css文件下载。</p>
<p>这个表格包括了几乎所有的css属性值，并且他们都能够被下载。</p>
<div style="text-align:center;padding-bottom:1em;"><a href="http://www.iecss.com/" target="_blank" title="连接到IEcss.com"><img src="http://www.webresourcesdepot.com/wp-content/uploads/iecss.jpg"></a></div>
<p>挺有用的一个表格，特别是对前端开发人员，了解各种浏览器默认css渲染的差异性，就能更好知道为什么html元素在各个浏览器的表现上不同，也就能更好的reset以达到视觉上的一致。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kunkka.cn/2010/06/01/user-agent-style-sheets/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Windows phone &#8211; 无处不精彩</title>
		<link>http://www.kunkka.cn/2010/05/11/windows-phone/</link>
		<comments>http://www.kunkka.cn/2010/05/11/windows-phone/#comments</comments>
		<pubDate>Tue, 11 May 2010 05:58:14 +0000</pubDate>
		<dc:creator>kunkka</dc:creator>
				<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.kunkka.cn:81/?p=341</guid>
		<description><![CDATA[
最近一直在忙windows phone的改版工作，时间相当的紧迫，创意加产品上线仅仅用了4个多星期的时间，一切尽在不言中&#8230;&#8230;。对windows phone有兴趣同学可以上去搜罗一下。
]]></description>
			<content:encoded><![CDATA[<div style="text-align:center"><a href="http://www.microsoft.com/china/windowsphone/" title="windows phone"><img src="/images/windowsPhone.jpg"></a></div>
<p style="padding:1em 0 0 0;">最近一直在忙<a href="http://www.microsoft.com/china/windowsphone/" title="windows phone">windows phone</a>的改版工作，时间相当的紧迫，创意加产品上线仅仅用了4个多星期的时间，一切尽在不言中&#8230;&#8230;。对<a href="http://www.microsoft.com/china/windowsphone/" title="windows phone">windows phone</a>有兴趣同学可以上去搜罗一下。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kunkka.cn/2010/05/11/windows-phone/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IE9 &#8211; 没有让前端开发者失望</title>
		<link>http://www.kunkka.cn/2010/03/17/ie9-testdrive/</link>
		<comments>http://www.kunkka.cn/2010/03/17/ie9-testdrive/#comments</comments>
		<pubDate>Wed, 17 Mar 2010 05:45:25 +0000</pubDate>
		<dc:creator>kunkka</dc:creator>
				<category><![CDATA[IE9]]></category>

		<guid isPermaLink="false">http://www.kunkka.cn:81/?p=317</guid>
		<description><![CDATA[微软最近发布了IE9的testdrive version，大家可以下载预览版本来体验一下IE9的新特性，除了速度有大幅度的提升外，最主要的是IE这么多年终于标准化了。IE9对W3C标准将有更好的支持：












    


W3C Web Standards
Number of Tests

                IE 9
                Platform Preview
            [...]]]></description>
			<content:encoded><![CDATA[<p>微软最近发布了IE9的<a href="http://ie.microsoft.com/testdrive/" title="连接到IE9 testdrive version">testdrive version</a>，大家可以下载<a href="http://ie.microsoft.com/testdrive/info/ThankYou/Default.html" title="下载预览版本">预览版本</a>来体验一下IE9的新特性，除了<a href="http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx" title="IEblog">速度有大幅度的提升</a>外，最主要的是IE这么多年终于标准化了。IE9对W3C标准将有更好的支持：</p>
<style type="text/css" media="screen">
<!--
    .data th,
    .data td{
      font-size:10px;
      padding:2px 3px;
      border:1px solid #ccc;
    }
    .data{border-collapse: collapse;}
    .data th{
      text-align: left;
      font-weight:normal;
      line-height:120%;
    }
-->
</style>
<table class="data">
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
    </colgroup>
<thead>
<tr>
<th class="alignBottom alignLeft">W3C Web Standards</th>
<th class="alignBottom">Number of Tests</th>
<th>
                IE 9<br />
                Platform Preview
            </th>
<th class="alignBottom">Mozilla Firefox 3.6</th>
<th class="alignBottom">Opera 10.50</th>
<th class="alignBottom">Apple Safari 4.0</th>
<th class="alignBottom">Google Chrome 4.0</th>
</tr>
</thead>
<tbody class="special">
<tr>
<td><a href="http://dev.w3.org/SVG/profiles/1.1F2/publish/">SVG 1.1 2nd edition</a></td>
<td>31</td>
<td style="background: #63BE7B;">100%</td>
<td style="background: #FEE683;">84%</td>
<td style="background: #A6D27F;">94%</td>
<td style="background: #D3DF82;">90%</td>
<td style="background: #D3DF82;">90%</td>
</tr>
<tr>
<td><a href="http://dev.w3.org/csswg/css3-background/">CSS3 Borders &amp; Backgrounds</a></td>
<td>33</td>
<td style="background: #63BE7B;">100%</td>
<td style="background: #F8696B;">27%</td>
<td style="background: #E9E583;">88%</td>
<td style="background: #F8696B;">27%</td>
<td style="background: #C8DB81;">91%</td>
</tr>
<tr>
<td><a href="http://dev.w3.org/csswg/selectors3/">CSS3 Selectors</a></td>
<td>16</td>
<td style="background: #63BE7B;">100%</td>
<td style="background: #FDD27F;">75%</td>
<td style="background: #FBA877;">56%</td>
<td style="background: #FA8E72;">44%</td>
<td style="background: #FA8E72;">44%</td>
</tr>
<tr>
<td><a href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Level 2 Core</a></td>
<td>9</td>
<td style="background: #63BE7B;">100%</td>
<td style="background: #DEE283;">89%</td>
<td style="background: #63BE7B;">100%</td>
<td style="background: #63BE7B;">100%</td>
<td style="background: #63BE7B;">100%</td>
</tr>
<tr>
<td><a href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Level 3 Events</a></td>
<td>10</td>
<td style="background: #63BE7B;">100%</td>
<td style="background: #F98570;">40%</td>
<td style="background: #F98570;">40%</td>
<td style="background: #FA9B74;">50%</td>
<td style="background: #FA9B74;">50%</td>
</tr>
<tr>
<td><a href="http://www.w3.org/TR/DOM-Level-2-Style/">DOM Level 2 Style</a></td>
<td>5</td>
<td style="background: #63BE7B;">100%</td>
<td style="background: #FEDD81;">80%</td>
<td style="background: #FBB178;">60%</td>
<td style="background: #F98570;">40%</td>
<td style="background: #F98570;">40%</td>
</tr>
</tbody>
</table>
<p style="padding:1em 0 0 0;"><a href="" title="">点击查看更多IE9测试详情</a>。</p>
<p>在IE9中DOM Events的attachEvent()将被抛弃， <a href="http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/events/EventTarget.html" title="addEventListener">addEventListener()</a>被完全支持，对 <a href="http://www.w3.org/TR/html5/the-canvas-element.html" title="&lt;canvas&gt;">&lt;canvas&gt;</a>的支持在testdrive上还没有提到，更重要的是它对 <a href="http://www.w3.org/TR/html5/" title="HTML5">HTML5</a>、<a href="http://dev.w3.org/csswg/selectors3/" title="CSS3 Selectors">CSS3 Selectors</a>、<a href="http://dev.w3.org/csswg/css3-background/" title="CSS3 Borders &#038; Backgrounds">CSS3 Borders &amp; Backgrounds</a>、<a href="http://www.w3.org/TR/DOM-Level-3-Events/" title="DOM">DOM</a>良好的支持。</p>
<p>可以看到，在测试中IE9在未来对标准的支持已经远远超过现今所有的主流浏览器。这将是前端开发人员的福音，期待IE9成为目前支持W3C最完美的浏览。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kunkka.cn/2010/03/17/ie9-testdrive/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Agenda（北京）找前端架构师</title>
		<link>http://www.kunkka.cn/2010/02/23/jobs/</link>
		<comments>http://www.kunkka.cn/2010/02/23/jobs/#comments</comments>
		<pubDate>Tue, 23 Feb 2010 07:16:21 +0000</pubDate>
		<dc:creator>kunkka</dc:creator>
				<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.kunkka.cn:81/?p=308</guid>
		<description><![CDATA[Agenda目前有两个前端架构师的职位空缺，期待您的加入！

我们找专业的前端架构师，需要你有丰富的前端开发经验。我们不要求你是网站全才，但需要你对XHTML,CSS,Javascript,Dom玩弄鼓掌之间，对ajax,json,xml能够灵活运用。
对于web标准有深刻的个人理解，透彻理解表现，结构，行为分离的思想，能够将“平稳退化，渐进增强”的理念用于到实际开发中。对网站优化，SEO，可用性、可访问性等相关知识有实际的了解和实践经验
有良好代码书写习惯，对代码精益求精的态度。
有良好的英文读写能力。

附加条件（优先考虑哦）:)

具有.net开发经验
会玩dota的
篮球打的好的

我的邮件：jiangwei.hu@wunderman.com
]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.agenda-asia.com" target="_blank" title="Agenda官方网站">Agenda</a>目前有两个前端架构师的职位空缺，期待您的加入！</p>
<ul>
<li>我们找专业的前端架构师，需要你有丰富的前端开发经验。我们不要求你是网站全才，但需要你对XHTML,CSS,Javascript,Dom玩弄鼓掌之间，对ajax,json,xml能够灵活运用。</li>
<li>对于web标准有深刻的个人理解，透彻理解表现，结构，行为分离的思想，能够将“平稳退化，渐进增强”的理念用于到实际开发中。对网站优化，SEO，可用性、可访问性等相关知识有实际的了解和实践经验</li>
<li>有良好代码书写习惯，对代码精益求精的态度。</li>
<li>有良好的英文读写能力。</li>
</ul>
<p>附加条件（优先考虑哦）:)</p>
<ul>
<li>具有.net开发经验</li>
<li>会玩dota的</li>
<li>篮球打的好的</li>
</ul>
<p>我的邮件：jiangwei.hu@wunderman.com</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kunkka.cn/2010/02/23/jobs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>使用object在web中嵌入视频文件</title>
		<link>http://www.kunkka.cn/2010/02/02/how-to-embed-video/</link>
		<comments>http://www.kunkka.cn/2010/02/02/how-to-embed-video/#comments</comments>
		<pubDate>Tue, 02 Feb 2010 09:54:52 +0000</pubDate>
		<dc:creator>kunkka</dc:creator>
				<category><![CDATA[Xhtml / Css]]></category>
		<category><![CDATA[原创]]></category>
		<category><![CDATA[embed]]></category>
		<category><![CDATA[object]]></category>
		<category><![CDATA[video]]></category>
		<category><![CDATA[wmv]]></category>

		<guid isPermaLink="false">http://www.kunkka.cn:81/?p=287</guid>
		<description><![CDATA[
如何在web中嵌入视频文件，用什么方式嵌入既符合标准又能兼容主流浏览器？
在web中嵌入视频的方式有两种，使用古老的embed标签或者object标签，古老的embed标签是由传说中Netscape所创建，它虽然广泛存在，但依然没有被W3c收录，是不被W3c推荐的，取而代之的是object标签，object标签在未来的web应用中不仅用于视频媒体的嵌入，还包括images,text,audio,applets,Flash animations等等各式各样格式的文件，现在大多数主流浏览器也都支持object标签的很多类型调用，要测试你的浏览器支持那些object类型，可以查看 OBJECT test suite
那如何嵌入一段视频到web中(以wmv为例)，代码如下：



1
2
3
4
5
&#60;object data=&#34;xx.wmv&#34; type=&#34;video/x-ms-wmv&#34; width=&#34;320&#34; height=&#34;255&#34;&#62;
  &#60;param name=&#34;src&#34; value=&#34;xx.wmv&#34;&#62;
  &#60;param name=&#34;autoplay&#34; value=&#34;false&#34;&#62;
  &#60;param name=&#34;autoStart&#34; value=&#34;0&#34;&#62;
&#60;/object&#62;


以上这段代码可以正常运行在绝大多数浏览器中，如果你要插入其他格式的视频，你可以更改object标签的type属性，就比如你需要插入mpg格式的视频，type就应该为&#8221;video/mpeg&#8221;；avi格式相对应的type为&#8221;video/avi&#8221;
但在嵌入QuickTime文件时，IE7以下版本和标准浏览器还有分歧，它需要一个非标准的classid属性值，一个标识去加载一个相关联activeX，详细查看Bye Bye Embed。解决方法如下：


1
2
3
4
5
6
7
8
9
10
11
12
13
&#60;object classid=&#34;clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B&#34;
        codebase=&#34;http://www.apple.com/qtactivex/qtplugin.cab&#34;
        width=&#34;320&#34; height=&#34;255&#34;&#62;
  &#60;param name=&#34;src&#34; value=&#34;data/test.mov&#34; &#62;
  &#60;param name=&#34;controller&#34; value=&#34;true&#34; &#62;
  &#60;param name=&#34;autoplay&#34; value=&#34;false&#34;&#62;
 [...]]]></description>
			<content:encoded><![CDATA[<div style="padding-bottom:1em;text-align:center"><img src="/images/embed-video.png" alt="使用object在web中嵌入视频文件" title="使用object在web中嵌入视频文件"></div>
<p>如何在web中嵌入视频文件，用什么方式嵌入既符合标准又能兼容主流浏览器？</p>
<p>在web中嵌入视频的方式有两种，使用古老的embed标签或者object标签，古老的embed标签是由传说中Netscape所创建，它虽然广泛存在，但依然没有被W3c收录，是不被W3c推荐的，取而代之的是<a href="http://www.w3.org/TR/REC-html40/struct/objects.html" title="">object</a>标签，object标签在未来的web应用中不仅用于视频媒体的嵌入，还包括images,text,audio,applets,Flash animations等等各式各样格式的文件，现在大多数主流浏览器也都支持object标签的很多类型调用，要测试你的浏览器支持那些object类型，可以查看 <a href="http://www.student.oulu.fi/~sairwas/object-test/" title="">OBJECT test suite</a></p>
<p>那如何嵌入一段视频到web中(以wmv为例)，代码如下：</p>
<p><span id="more-287"></span></p>
<div>

<div class="wp_codebox"><table><tr id="p2874"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p287code4"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>object data<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;xx.wmv&quot;</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;video/x-ms-wmv&quot;</span> width<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;320&quot;</span> height<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;255&quot;</span><span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;</span>param <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;src&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;xx.wmv&quot;</span><span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;</span>param <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;autoplay&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;false&quot;</span><span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;</span>param <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;autoStart&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;0&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>object<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

</div>
<p>以上这段代码可以正常运行在绝大多数浏览器中，如果你要插入其他格式的视频，你可以更改object标签的type属性，就比如你需要插入mpg格式的视频，type就应该为&#8221;video/mpeg&#8221;；avi格式相对应的type为&#8221;video/avi&#8221;</p>
<p>但在嵌入QuickTime文件时，IE7以下版本和标准浏览器还有分歧，它需要一个非标准的classid属性值，一个标识去加载一个相关联activeX，详细查看<a href="http://www.alistapart.com/articles/byebyeembed/" title="">Bye Bye Embed</a>。解决方法如下：</p>
<div>

<div class="wp_codebox"><table><tr id="p2875"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code" id="p287code5"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>object classid<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B&quot;</span>
        codebase<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;http://www.apple.com/qtactivex/qtplugin.cab&quot;</span>
        width<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;320&quot;</span> height<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;255&quot;</span><span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;</span>param <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;src&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;data/test.mov&quot;</span> <span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;</span>param <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;controller&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;true&quot;</span> <span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;</span>param <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;autoplay&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;false&quot;</span><span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;!--</span><span style="color: #009900;">&#91;</span><span style="color: #000066; font-weight: bold;">if</span> gte IE <span style="color: #CC0000;">7</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">&gt;</span> <span style="color: #339933;">&lt;!--&gt;</span>
  <span style="color: #339933;">&lt;</span>object type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;video/quicktime&quot;</span> data<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;data/test.mov&quot;</span> width<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;320&quot;</span> height<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;255&quot;</span><span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>param <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;controller&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;true&quot;</span> <span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>param <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;autoplay&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;false&quot;</span><span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;/</span>object<span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;!--&lt;!</span><span style="color: #009900;">&#91;</span>endif<span style="color: #009900;">&#93;</span><span style="color: #339933;">--&gt;</span>
<span style="color: #339933;">&lt;/</span>object<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

</div>
<p>在实际应用中，如果我按标准方式插入一个wmv视频到IE中，播放器需要等待wmv文件完全载入成功后才会显现出来（非流媒体播放），也就是说视频没有载入完成的时候，是不会出现播放界面的，这样对于k数比较大的视频文件，就是个悲剧。但经过尝试如果去掉object的data属性，只是使用&lt;param name=&#8221;src&#8221; value=&#8221;xx.wmv&#8221;&gt;来调用wmv文件，不仅IE正常了，而且其他主流浏览器也能正常播放&#8230;&#8230; 最终代码如下：</p>
<div>

<div class="wp_codebox"><table><tr id="p2876"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p287code6"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>object type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;video/x-ms-wmv&quot;</span> width<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;320&quot;</span> height<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;255&quot;</span><span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;</span>param <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;src&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;xx.wmv&quot;</span><span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;</span>param <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;autoplay&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;false&quot;</span><span style="color: #339933;">&gt;</span>
  <span style="color: #339933;">&lt;</span>param <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;autoStart&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;0&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>object<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

</div>
]]></content:encoded>
			<wfw:commentRss>http://www.kunkka.cn/2010/02/02/how-to-embed-video/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>JavaScript正则表达式</title>
		<link>http://www.kunkka.cn/2009/12/30/javascript-regular-expression/</link>
		<comments>http://www.kunkka.cn/2009/12/30/javascript-regular-expression/#comments</comments>
		<pubDate>Wed, 30 Dec 2009 06:09:28 +0000</pubDate>
		<dc:creator>kunkka</dc:creator>
				<category><![CDATA[javascript / Dom]]></category>
		<category><![CDATA[转载]]></category>
		<category><![CDATA[expression]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[regular]]></category>

		<guid isPermaLink="false">http://www.kunkka.cn:81/?p=250</guid>
		<description><![CDATA[


原文：http://www.cainiao8.com/web/js_note/js_regular_expression.html
转载一篇关于JavaScript正则表达式的好文，作者以通俗的语言和简单常见的实例为我们阐述了JavaScript正则表达式的基本知识，以下是原文：
什么是正则表达式？
这个问题可以参见：“正则表达式30分钟入门教程”，很多编程语言都支持正则表达式，本文仅仅讨论JavaScript中的正则表达式。

创建一个正则表达式
第一种方法：

var reg = /pattern/;

第二种方法：

var reg = new  RegExp&#40;'pattern'&#41;;

正则表达式的exec方法简介
语法：

reg.exec&#40;str&#41;;

其中str为要执行正则表达式的目标字符串。
例如：

&#60;script  type=&#34;text/javascript&#34;&#62;
var reg = /test/;
var str = 'testString';
var result =  reg.exec&#40;str&#41;;
alert&#40;result&#41;;
&#60;/script&#62;

将会输出test，因为正则表达式reg会匹配str(‘testString’)中的’test’子字符串，并且将其返回。
  
我们使用下面的函数来做匹配正则的练习：

function  execReg&#40;reg,str&#41;&#123;
 var result =  reg.exec&#40;str&#41;;
 alert&#40;result&#41;;
&#125;

函数接受一个正则表达式参数reg和一个目标字符串参数str，执行之后会alert出正则表达式与字符串的匹配结果。
用这个函数测试上面的例子就是：

&#60;script  type=&#34;text/javascript&#34;&#62;
function  execReg&#40;reg,str&#41;&#123;
 var result =  reg.exec&#40;str&#41;;
 alert&#40;result&#41;;
&#125;
var reg = /test/;
var str = 'testString';
execReg&#40;reg,str&#41;;
&#60;/script&#62;

上面的例子用正则里的test去匹配字符串里的test，实在是很无聊，同样的任务用indexOf方法就可以完成了。用正则，自然是要完成更强大的功能：
一片两片三四片，落尽正则全不见
上面的小标题翻译成正则就是{1},{2},{3,4},{1,}。
c{n}
{1}表示一个的意思。
/c{1}/只能匹配一个c。
/c{2}/则会匹配两个连续的c。
以此类推,
/c{n}/则会匹配n个连续的c。
看下面的例子：

reg = /c{1}/;
str='cainiao';
execReg&#40;reg,str&#41;;

返回结果c
  

reg = /c{2}/;
str='cainiao';
execReg&#40;reg,str&#41;;

返回结果null，表示没有匹配成功。
  

reg [...]]]></description>
			<content:encoded><![CDATA[<style type="text/css" media="screen">
<!--
    h3{font-weight: bolder;color:#669900;font-size: 14px;margin:0 0 1em 0;}
    h4{font-weight: bolder;color:#eee;font-size: 14px;margin:0 0 1em 0; background:#333;padding:5px;}
-->
</style>
<p>原文：<a href="http://www.cainiao8.com/web/js_note/js_regular_expression.html" title="查看原文">http://www.cainiao8.com/web/js_note/js_regular_expression.html</a></p>
<p>转载一篇关于JavaScript正则表达式的好文，作者以通俗的语言和简单常见的实例为我们阐述了JavaScript正则表达式的基本知识，以下是原文：</p>
<h4>什么是正则表达式？</h4>
<p>这个问题可以参见：“<a href="http://unibetter.com/deerchao/zhengzhe-biaodashi-jiaocheng-se.htm">正则表达式30分钟入门教程</a>”，很多编程语言都支持正则表达式，本文仅仅讨论JavaScript中的正则表达式。</p>
<p><span id="more-250"></span></p>
<h4>创建一个正则表达式</h4>
<p>第一种方法：</p>

<div class="wp_codebox"><table><tr id="p25099"><td class="code" id="p250code99"><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;">/pattern/</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>第二种方法：</p>

<div class="wp_codebox"><table><tr id="p250100"><td class="code" id="p250code100"><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: #003366; font-weight: bold;">new</span>  RegExp<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'pattern'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<h4>正则表达式的exec方法简介</h4>
<p>语法：</p>

<div class="wp_codebox"><table><tr id="p250101"><td class="code" id="p250code101"><pre class="javascript" style="font-family:monospace;">reg.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>其中str为要执行正则表达式的目标字符串。</p>
<p>例如：</p>

<div class="wp_codebox"><table><tr id="p250102"><td class="code" id="p250code102"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script  type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #003366; font-weight: bold;">var</span> reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/test/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">'testString'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> result <span style="color: #339933;">=</span>  reg.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>result<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>将会输出test，因为正则表达式reg会匹配str(‘testString’)中的’test’子字符串，并且将其返回。
  </p>
<p>我们使用下面的函数来做匹配正则的练习：</p>

<div class="wp_codebox"><table><tr id="p250103"><td class="code" id="p250code103"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span>  execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 <span style="color: #003366; font-weight: bold;">var</span> result <span style="color: #339933;">=</span>  reg.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>result<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>函数接受一个正则表达式参数reg和一个目标字符串参数str，执行之后会alert出正则表达式与字符串的匹配结果。</p>
<p>用这个函数测试上面的例子就是：</p>

<div class="wp_codebox"><table><tr id="p250104"><td class="code" id="p250code104"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script  type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #003366; font-weight: bold;">function</span>  execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 <span style="color: #003366; font-weight: bold;">var</span> result <span style="color: #339933;">=</span>  reg.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>result<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/test/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">'testString'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>上面的例子用正则里的test去匹配字符串里的test，实在是很无聊，同样的任务用indexOf方法就可以完成了。用正则，自然是要完成更强大的功能：</p>
<h4>一片两片三四片，落尽正则全不见</h4>
<p>上面的小标题翻译成正则就是{1},{2},{3,4},{1,}。</p>
<h3>c{n}</h3>
<p>{1}表示一个的意思。</p>
<p>/c{1}/只能匹配一个c。</p>
<p>/c{2}/则会匹配两个连续的c。</p>
<p>以此类推,</p>
<p>/c{n}/则会匹配n个连续的c。</p>
<p>看下面的例子：</p>

<div class="wp_codebox"><table><tr id="p250105"><td class="code" id="p250code105"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c{1}/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回结果c
  </p>

<div class="wp_codebox"><table><tr id="p250106"><td class="code" id="p250code106"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c{2}/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回结果null，表示没有匹配成功。
  </p>

<div class="wp_codebox"><table><tr id="p250107"><td class="code" id="p250code107"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c{2}/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'ccVC果冻爽'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回结果cc。</p>
<h3>c{m,n}</h3>
<p>c{3,4}的意思是，连续的3个c或者4个c。</p>
<p>例如</p>

<div class="wp_codebox"><table><tr id="p250108"><td class="code" id="p250code108"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c{3,4}/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'ccVC果冻爽'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回结果null，表示没有匹配成功。
  </p>

<div class="wp_codebox"><table><tr id="p250109"><td class="code" id="p250code109"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c{3,4}/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cccTest'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果返回ccc。
  </p>

<div class="wp_codebox"><table><tr id="p250110"><td class="code" id="p250code110"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c{3,4}/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'ccccTest'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果返回cccc，这表明正则会尽量多品牌，可3可4的时候它会选择多匹配一个。
  </p>

<div class="wp_codebox"><table><tr id="p250111"><td class="code" id="p250code111"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c{3,4}/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cccccTest'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>仍然只匹配4个c。
  </p>
<p>由以上例子可以推断出，c{m,n}表示m个到n个c，且m小于等于n。</p>
<h3>c{n,}</h3>
<p>c{1,}表示1个以上的c。例如：
  </p>

<div class="wp_codebox"><table><tr id="p250112"><td class="code" id="p250code112"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c{1,}/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果返回c。
  </p>

<div class="wp_codebox"><table><tr id="p250113"><td class="code" id="p250code113"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c{1,}/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cccccTest'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回ccccc，再次说明了正则表达式会尽量多地匹配。
  </p>

<div class="wp_codebox"><table><tr id="p250114"><td class="code" id="p250code114"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c{2,}/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果返回null，c{2,}表示2个以上的c，而cainiao中只有1个c。
  </p>
<p>由以上例子可知，c{n,}表示最少n个c，最多则不限个数。
  </p>
<h3>*,+,?</h3>
<p>*表示0次或者多次，等同于{0,}，即</p>
<p>c* 和  c{0,} 是一个意思。
  </p>
<p>+表示一次或者多次，等同于{1,}，即</p>
<p>c+ 和  c{1,} 是一个意思。
  </p>
<p>最后，?表示0次或者1次，等同于{0,1}，即</p>
<p>c? 和  c{0,1} 是一个意思。
  </p>
<h3>贪心与非贪心</h3>
<p>人都是贪婪的，正则也是如此。我们在例子reg  =  /c{3,4}/;str=&#8217;ccccTest&#8217;;的例子中已经看到了，能匹配四个的时候，正则绝对不会去匹配三个。上面所介绍的所有的正则都是这样，只要在合法的情况下，它们会尽量多去匹配字符，这就叫做贪心模式。</p>
<p>如果我们希望正则尽量少地匹配字符，那么就可以在表示数字的符号后面加上一个?。组成如下的形式：</p>
<p>{n,}?, *?, +?, ??,  {m,n}?</p>
<p>同样来看一个例子：</p>

<div class="wp_codebox"><table><tr id="p250115"><td class="code" id="p250code115"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c{1,}?/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'ccccc'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回的结果只有1个c，尽管有5个c可以匹配，但是由于正则表达式是非贪心模式，所以只会匹配一个。</p>
<h4>/^开头,结尾$/</h4>
<p>^表示只匹配字符串的开头。看下面的例子：
  </p>

<div class="wp_codebox"><table><tr id="p250116"><td class="code" id="p250code116"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^c/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'维生素c'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果为null，因为字符串‘维生素c’的开头并不是c，所以匹配失败。
  </p>

<div class="wp_codebox"><table><tr id="p250117"><td class="code" id="p250code117"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^c/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这次则返回c，匹配成功，因为cainiao恰恰是以c开头的。
  </p>
<p>与^相反，$则只匹配字符串结尾的字符，同样，看例子：
  </p>

<div class="wp_codebox"><table><tr id="p250118"><td class="code" id="p250code118"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c$/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回null，表示正则表达式没能在字符串的结尾找到c这个字符。
  </p>

<div class="wp_codebox"><table><tr id="p250119"><td class="code" id="p250code119"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c$/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'维生素c'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这次返回的结果是c，表明匹配成功。
  </p>
<h4>点’.’</h4>
<p>‘.’会匹配字符串中除了换行符\n之外的所有字符，例如</p>

<div class="wp_codebox"><table><tr id="p250120"><td class="code" id="p250code120"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/./</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果显示，正则匹配到了字符c。
  </p>

<div class="wp_codebox"><table><tr id="p250121"><td class="code" id="p250code121"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/./</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'blueidea'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这次是b。
  </p>

<div class="wp_codebox"><table><tr id="p250122"><td class="code" id="p250code122"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/.+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'blueidea——经典论坛  好_。'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果是“blueidea——经典论坛  好_。“也就是说所有的字符都被匹配掉了，包括一个空格，一个下滑线，和一个破折号。
  </p>

<div class="wp_codebox"><table><tr id="p250123"><td class="code" id="p250code123"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/.+/</span><span style="color: #339933;">;</span>
reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/.+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>同样，直接返回整个字符串——bbs.blueidea.com，可见”.”也匹配”.”本身。
  </p>

<div class="wp_codebox"><table><tr id="p250124"><td class="code" id="p250code124"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^./</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\n</span>cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果是null，终于失败了，正则要求字符串的第一个字符不是换行，但是恰恰字符是以\n开始的。
  </p>
<h4>二选一，正则表达式中的或，“|“</h4>
<p>b|c表示，匹配b或者c。</p>
<p>例如：</p>

<div class="wp_codebox"><table><tr id="p250125"><td class="code" id="p250code125"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/b|c/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'blueidea'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果是b。
  </p>

<div class="wp_codebox"><table><tr id="p250126"><td class="code" id="p250code126"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/b|c/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果是c。
  </p>

<div class="wp_codebox"><table><tr id="p250127"><td class="code" id="p250code127"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^b|c.+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>匹配掉整个cainiao。
  </p>

<div class="wp_codebox"><table><tr id="p250128"><td class="code" id="p250code128"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^b|c.+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果只有一个b，而不是整个字符串。因为上面正则表达式的意思是，匹配开头的b或者是c.+。</p>
<h4>括号</h4>

<div class="wp_codebox"><table><tr id="p250129"><td class="code" id="p250code129"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^(b|c).+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这次的结果是整个串bbs.blueidea.com，机上上面的括号这后，这个正则的意思是，如果字符串的开头是b或者c，那么匹配开头的b或者c以及其后的所有的非换行字符。</p>
<p>如果你也实验了的话，会发现返回的结果后面多出来一个“,b“，这是()内的b|c所匹配的内容。我们在正则表达式内括号里写的内容会被认为是子正则表达式，所匹配的结果也会被记录下来供后面使用。我们暂且不去理会这个特性。
  </p>
<h4>字符集合[abc]</h4>
<p>[abc]表示a或者b或者c中的任意一个字符。例如：</p>

<div class="wp_codebox"><table><tr id="p250130"><td class="code" id="p250code130"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^[abc]/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回结果是b。
  </p>

<div class="wp_codebox"><table><tr id="p250131"><td class="code" id="p250code131"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^[abc]/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'test'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这次的结果就是null了。
  </p>
<p>我们在字字符集合中使用如下的表示方式:[a-z],[A-Z],[0-9]，分别表示小写字母，大写字母，数字。例如：
  </p>

<div class="wp_codebox"><table><tr id="p250132"><td class="code" id="p250code132"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span>  <span style="color: #009966; font-style: italic;">/^[a-zA-Z][a-zA-Z0-9_]+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'test'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果是整个test，正则的意思是开头必须是英文字母，后面可以是英文字母或者数字以及下划线。
  </p>
<h4>反字符集合[^abc]</h4>
<p>^在正则表达式开始部分的时候表示开头的意思，例如/^c/表示开头是c；但是在字符集和中，它表示的是类似“非“的意思，例如[^abc]就表示不能是a，b或者c中的任何一个。例如：</p>

<div class="wp_codebox"><table><tr id="p250133"><td class="code" id="p250code133"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/[^abc]/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'blueidea'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回的结果是l，因为它是第一个非abc的字符（即第一个b没有匹配）。同样：</p>

<div class="wp_codebox"><table><tr id="p250134"><td class="code" id="p250code134"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/[^abc]/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>则返回i，前两个字符都是[abc]集合中的。</p>
<p>由此我们可知：[^0-9]表示非数字，[^a-z]表示非小写字母，一次类推。
  </p>
<h4>边界与非边界</h4>
<p>\b表示的边界的意思，也就是说，只有字符串的开头和结尾才算数。例如/\bc/就表示字符串开始的c或者是结尾的c。看下面的例子：
  </p>

<div class="wp_codebox"><table><tr id="p250135"><td class="code" id="p250code135"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\bc/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回结果c。匹配到了左边界的c字符。
  </p>

<div class="wp_codebox"><table><tr id="p250136"><td class="code" id="p250code136"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\bc/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'维生素c'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>仍然返回c，不过这次返回的是右侧边界的c。
  </p>

<div class="wp_codebox"><table><tr id="p250137"><td class="code" id="p250code137"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\bc/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bcb'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这次匹配失败，因为bcb字符串中的c被夹在中间，既不在左边界也不再右边界。
  </p>
<p>与\b对应\B表示非边界。例如：
  </p>

<div class="wp_codebox"><table><tr id="p250138"><td class="code" id="p250code138"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\Bc/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bcb'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这次会成功地匹配到bcb中的c，。然而
  </p>

<div class="wp_codebox"><table><tr id="p250139"><td class="code" id="p250code139"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\Bc/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>则会返回null。因为\B告诉正则，只匹配非边界的c。
  </p>
<h4>数字与非数字</h4>
<p>\d表示数字的意思，相反，\D表示非数字。例如：</p>

<div class="wp_codebox"><table><tr id="p250140"><td class="code" id="p250code140"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\d/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao8'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回的匹配结果为8，因为它是第一个数字字符。
  </p>

<div class="wp_codebox"><table><tr id="p250141"><td class="code" id="p250code141"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\D/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao8'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回c，第一个非数字字符。
  </p>
<h4>空白</h4>
<p>\f匹配换页符，\n匹配换行符，\r匹配回车，\t匹配制表符，\v匹配垂直制表符。</p>
<p>\s匹配单个空格，等同于[\f\n\r\t\v]。例如：
  </p>

<div class="wp_codebox"><table><tr id="p250142"><td class="code" id="p250code142"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\s.+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'This is a test  String.'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回“is  a test String.”，正则的意思是匹配第一个空格以及其后的所有非换行字符。
  </p>
<p>同样，\S表示非空格字符。</p>

<div class="wp_codebox"><table><tr id="p250143"><td class="code" id="p250code143"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\S+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'This is a test  String.'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>匹配结果为This，当遇到第一个空格之后，正则就停止匹配了。
  </p>
<h4>单词字符</h4>
<p>\w表示单词字符，等同于字符集合[a-zA-Z0-9_]。例如：</p>

<div class="wp_codebox"><table><tr id="p250144"><td class="code" id="p250code144"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\w+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'blueidea'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回完整的blueidea字符串，因为所有字符都是单词字符。
  </p>

<div class="wp_codebox"><table><tr id="p250145"><td class="code" id="p250code145"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\w+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'.className'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果显示匹配了字符串中的className，只有第一个“.”——唯一的非单词字符没有匹配。
  </p>

<div class="wp_codebox"><table><tr id="p250146"><td class="code" id="p250code146"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\w+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'中文如何？'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>试图用单词字符去匹配中文自然行不通了，返回null。
  </p>
<p>\W表示非单词字符，等效于[^a-zA-Z0-9_]</p>

<div class="wp_codebox"><table><tr id="p250147"><td class="code" id="p250code147"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\W+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'中文如何？'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回完整的字符串，因为，无论是中文和“？”都算作是非单词字符。
  </p>
<h4>反向引用</h4>
<p>形式如下：/(子正则表达式)\1/</p>
<p>依旧用例子来说明：</p>
<p>1.</p>

<div class="wp_codebox"><table><tr id="p250148"><td class="code" id="p250code148"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\w/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'blueidea'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回b。</p>
<p>2.</p>

<div class="wp_codebox"><table><tr id="p250149"><td class="code" id="p250code149"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/(\w)(\w)/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'blueidea'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回bl,b,l</p>
<p>bl是整个正则匹配的内容，b是第一个括号里的子正则表达式匹配的内容，l是第二个括号匹配的内容。</p>
<p>3.</p>

<div class="wp_codebox"><table><tr id="p250150"><td class="code" id="p250code150"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/(\w)\1/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'blueidea'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>则会返回null。这里的“\1”就叫做反向引用，它表示的是第一个括号内的字正则表达式匹配的内容。在上面的例子中，第一个括号里的(\w)匹配了b，因此“\1”就同样表示b了，在余下的字符串里自然找不到b了。</p>
<p>与第二个例子对比就可以发现，“\1”是等同于“第1个括号匹配的内容”，而不是“第一个括号的内容”。
  </p>

<div class="wp_codebox"><table><tr id="p250151"><td class="code" id="p250code151"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/(\w)\1/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这个正则则会匹配到bb。
  </p>
<p>同样，前面有几个子正则表达式我们就可以使用几个反向引用。例如：</p>

<div class="wp_codebox"><table><tr id="p250152"><td class="code" id="p250code152"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/(\w)(\w)\2\1/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'woow'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>会匹配成功，因为第一个括号匹配到w，第二个括号匹配到o，而\2\1则表示ow，恰好匹配了字符串的最后两个字符。
  </p>
<h4>括号（2）</h4>
<p>前面我们曾经讨论过一次括号的问题，见下面这个例子：</p>

<div class="wp_codebox"><table><tr id="p250153"><td class="code" id="p250code153"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^(b|c).+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这个正则是为了实现只匹配以b或者c开头的字符串，一直匹配到换行字符，但是。上面我们已经看到了，可以使用“\1”来反向引用这个括号里的子正则表达式所匹配的内容。而且exec方法也会将这个字正则表达式的匹配结果保存到返回的结果中。</p>
<h3>不记录子正则表达式的匹配结果</h3>
<p>使用形如(?:pattern)的正则就可以避免保存括号内的匹配结果。例如：</p>

<div class="wp_codebox"><table><tr id="p250154"><td class="code" id="p250code154"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^(?:b|c).+/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>可以看到返回的结果不再包括那个括号内的字正则表达式多匹配的内容。</p>
<p>同理，反向引用也不好使了：</p>

<div class="wp_codebox"><table><tr id="p250155"><td class="code" id="p250code155"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^(b|c)\1/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回bb,b。bb是整个正则表达式匹配的内容，而b是第一个子正则表达式匹配的内容。</p>

<div class="wp_codebox"><table><tr id="p250156"><td class="code" id="p250code156"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^(?:b|c)\1/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回null。由于根本就没有记录括号内匹配的内容，自然没有办法反向引用了。
  </p>
<h3>正向预查</h3>
<p>形式：(?=pattern)</p>
<p>所谓正向预查，意思就是：要匹配的字符串，后面必须紧跟着pattern！</p>
<p>我们知道正则表达式/cainiao/会匹配cainiao。同样，也会匹配cainiao9中的cainiao。但是我们可能希望，cainiao只能匹配cainiao8中的菜鸟。这时候就可以像下面这样写：/cainiao(?=8)/，看两个实例：</p>

<div class="wp_codebox"><table><tr id="p250157"><td class="code" id="p250code157"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/cainiao(?=8)/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao9'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回null。
  </p>

<div class="wp_codebox"><table><tr id="p250158"><td class="code" id="p250code158"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/cainiao(?=8)/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'cainiao8'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>匹配cainiao。</p>
<p>需要注意的是，括号里的内容并不参与真正的匹配，只是检查一下后面的字符是否符合要求而已，例如上面的正则，返回的是cainiao，而不是cainiao8。
  </p>
<p>再来看两个例子：</p>

<div class="wp_codebox"><table><tr id="p250159"><td class="code" id="p250code159"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/blue(?=idea)/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'blueidea'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>匹配到blue，而不是blueidea。
  </p>

<div class="wp_codebox"><table><tr id="p250160"><td class="code" id="p250code160"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/blue(?=idea)/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bluetooth'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回null，因为blue后面不是idea。
  </p>

<div class="wp_codebox"><table><tr id="p250161"><td class="code" id="p250code161"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/blue(?=idea)/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bluetoothidea'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>同样返回null。
  </p>
<h3>?!</h3>
<p>形式(?!pattern)和?=恰好相反，要求字符串的后面不能紧跟着某个pattern，还拿上面的例子：</p>

<div class="wp_codebox"><table><tr id="p250162"><td class="code" id="p250code162"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/blue(?!idea)/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'blueidea'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回null，因为正则要求，blue的后面不能是idea。
  </p>

<div class="wp_codebox"><table><tr id="p250163"><td class="code" id="p250code163"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/blue(?!idea)/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bluetooth'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>则成功返回blue。
  </p>
<h4>匹配元字符</h4>
<p>首先要搞清楚什么是元字符呢？我们之前用过*,+,?之类的符号，它们在正则表达式中都有一定的特殊含义，类似这些有特殊功能的字符都叫做元字符。例如</p>

<div class="wp_codebox"><table><tr id="p250164"><td class="code" id="p250code164"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c*/</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>表示有任意个c，但是如果我们真的想匹配’c*’这个字符串的时候怎么办呢？只要将*转义了就可以了，如下：</p>

<div class="wp_codebox"><table><tr id="p250165"><td class="code" id="p250code165"><pre class="javascript" style="font-family:monospace;">reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/c\*/</span><span style="color: #339933;">;</span>
str<span style="color: #339933;">=</span><span style="color: #3366CC;">'c*'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回匹配的字符串：c*。
  </p>
<p>同理，要匹配其他元字符，只要在前面加上一个“\”就可以了。
  </p>
<h4>正则表达式的修饰符</h4>
<h3>全局匹配，修饰符g</h3>
<p>形式：/pattern/g</p>
<p>例子：reg  = /b/g;</p>
<p>后面再说这个g的作用。先看后面的两个修饰符。</p>
<h3>不区分大小写，修饰符i</h3>
<p>形式：/pattern/i</p>
<p>例子：</p>

<div class="wp_codebox"><table><tr id="p250166"><td class="code" id="p250code166"><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;">/b/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">'BBS'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>返回null，因为大小写不符合。
  </p>

<div class="wp_codebox"><table><tr id="p250167"><td class="code" id="p250code167"><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;">/b/i</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">'BBS'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>匹配到B，这个就是i修饰符的作用了。</p>
<h3>行首行尾，修饰符m</h3>
<p>形式：/pattern/m</p>
<p>m修饰符的作用是修改^和$在正则表达式中的作用，让它们分别表示行首和行尾。例如：</p>

<div class="wp_codebox"><table><tr id="p250168"><td class="code" id="p250code168"><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;">/^b/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">'test<span style="color: #000099; font-weight: bold;">\n</span>bbs'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>匹配失败，因为字符串的开头没有b字符。但是加上m修饰符之后：</p>

<div class="wp_codebox"><table><tr id="p250169"><td class="code" id="p250code169"><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;">/^b/m</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">'test<span style="color: #000099; font-weight: bold;">\n</span>bbs'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>匹配到b，因为加了m修饰符之后，^已经表示行首，由于bbs在字符串第二行的行首，所以可以成功地匹配。</p>
<h4>exec方法详解</h4>
<h3>exec方法的返回值</h3>
<p>exec方法返回的其实并不是匹配结果字符串，而是一个对象，简单地修改一下execReg函数，来做一个实验就可以印证这一点：</p>

<div class="wp_codebox"><table><tr id="p250170"><td class="code" id="p250code170"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span>  execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 <span style="color: #003366; font-weight: bold;">var</span> result <span style="color: #339933;">=</span>  reg.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> result<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/b/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span>  str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.bblueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果显示result的类型是object。而且是一个类似数组的对象。使用for  in可以知道它的属性:  index input 0。其中index是表示匹配在原字符串中的索引；而input则是表示输入的字符串；</p>
<p>至于0则是表示只有一个匹配结果，可以用下标0来引用这个匹配结果，这个数量可能改变。我们可以通过返回值的length属性来得知匹配结果的总数量。</p>
<p>根据以上对返回值的分析，修改execReg函数如下：</p>

<div class="wp_codebox"><table><tr id="p250171"><td class="code" id="p250code171"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span>  execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 <span style="color: #003366; font-weight: bold;">var</span> result <span style="color: #339933;">=</span>  reg.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'index:'</span><span style="color: #339933;">+</span>result.<span style="color: #660066;">index</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;br  /&gt;'</span>
 <span style="color: #339933;">+</span><span style="color: #3366CC;">'input:'</span><span style="color: #339933;">+</span>result.<span style="color: #660066;">input</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;br  /&gt;'</span>
 <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span>result.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'result['</span><span style="color: #339933;">+</span>i<span style="color: #339933;">+</span><span style="color: #3366CC;">']:'</span><span style="color: #339933;">+</span>result<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;br  /&gt;'</span><span style="color: #009900;">&#41;</span>
 <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>马上来实验一下：</p>

<div class="wp_codebox"><table><tr id="p250172"><td class="code" id="p250code172"><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;">/\w/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span>  str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.bblueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果如下：</p>
<ul>
<li>index:0</li>
<li>input:bbs.bblueidea.com</li>
<li>result[0]:b</li>
</ul>
<p>输入字符串为bbs.bblueidea.com；</p>
<p>匹配的b在原字符串的索引是0。</p>
<p>正则的匹配结果为一个，b；
  </p>

<div class="wp_codebox"><table><tr id="p250173"><td class="code" id="p250code173"><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;">/(\w)(\w)(.+)/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span>  str<span style="color: #339933;">=</span><span style="color: #3366CC;">'bbs.bblueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果为：</p>
<p>index:0<br />
    input:bbs.bblueidea.com<br />
    result[0]:bbs.bblueidea.com<br />
    result[1]:b<br />
    result[2]:b<br />
    result[3]:s.bblueidea.com
  </p>
<p>由上面两个例子可见，返回对象[0]就是整个正则表达式所匹配的内容。后续的元素则是各个子正则表达式的匹配内容。
  </p>
<h3>exec方法对正则表达式的更新</h3>
<p>exec方法在返回结果对象的同时，还可能会更新原来的正则表达式，这就要看正则表达式是否设置了g修饰符。先来看两个例子吧：</p>

<div class="wp_codebox"><table><tr id="p250174"><td class="code" id="p250code174"><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;">/b/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果如下：</p>
<p>index:0<br />
    input:bbs.blueidea.com<br />
    result[0]:b<br />
    index:0<br />
    input:bbs.blueidea.com<br />
    result[0]:b</p>
<p>也就是说，两次匹配的结果完全一样，从索引可以看出来，匹配的都是字符串首的b字符。</p>
<p>下面看看设置了g的正则表达式表现如何：</p>

<div class="wp_codebox"><table><tr id="p250175"><td class="code" id="p250code175"><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;">/b/g</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
execReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果如下：</p>
<p>index:0<br />
    input:bbs.blueidea.com<br />
    result[0]:b<br />
    index:1<br />
    input:bbs.blueidea.com<br />
    result[0]:b</p>
<p>可以看得出来，第二次匹配的是字符串的字符串的第二个b。这也就是g修饰符的作用了，下面来看exec是如何区别对待g和非g正则表达式的。
  </p>
<p>如果正则表达式没有设置g，那么exec方法不会对正则表达式有任何的影响，如果设置了g，那么exec执行之后会更新正则表达式的lastIndex属性，表示本次匹配后，所匹配字符串的下一个字符的索引，下一次再用这个正则表达式匹配字符串的时候就会从上次的lastIndex属性开始匹配，也就是上面两个例子结果不同的原因了。
  </p>
<h4>test方法</h4>
<p>test方法仅仅检查是否能够匹配str，并且返回布尔值以表示是否成功。同样建立一个简单的测试函数：</p>

<div class="wp_codebox"><table><tr id="p250176"><td class="code" id="p250code176"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span>  testReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</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>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>实例1</p>

<div class="wp_codebox"><table><tr id="p250177"><td class="code" id="p250code177"><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;">/b/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
testReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>成功，输出true。</p>
<p>实例2</p>

<div class="wp_codebox"><table><tr id="p250178"><td class="code" id="p250code178"><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;">/9/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
testReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>失败，返回false。</p>
<h4>使用字符串的方法执行正则表达式</h4>
<h3>match方法</h3>
<p>形式：str.match(reg);</p>
<p>与正则表达式的exec方法类似，该方法同样返回一个类似数组的对象，也有input和index属性。我们定义如下一个函数用来测试：</p>

<div class="wp_codebox"><table><tr id="p250179"><td class="code" id="p250code179"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span>  matchReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 <span style="color: #003366; font-weight: bold;">var</span> result <span style="color: #339933;">=</span>  str.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span>reg<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>result <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'index:'</span><span style="color: #339933;">+</span>result.<span style="color: #660066;">index</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;br  /&gt;'</span>
 <span style="color: #339933;">+</span><span style="color: #3366CC;">'input:'</span><span style="color: #339933;">+</span>result.<span style="color: #660066;">input</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;br  /&gt;'</span>
 <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span>result.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'result['</span><span style="color: #339933;">+</span>i<span style="color: #339933;">+</span><span style="color: #3366CC;">']:'</span><span style="color: #339933;">+</span>result<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;br  /&gt;'</span><span style="color: #009900;">&#41;</span>
 <span style="color: #009900;">&#125;</span>
 <span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
 <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'null：匹配失败！'</span><span style="color: #009900;">&#41;</span>
 <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>例如：</p>

<div class="wp_codebox"><table><tr id="p250180"><td class="code" id="p250code180"><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;">/b/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
matchReg<span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果如下：</p>
<p>index:0<br />
    input:bbs.blueidea.com<br />
    result[0]:b</p>
<p>可见，和exec的结果一样。</p>
<p>但是如果正则表达式设置了g修饰符，exec和match的行为可就不一样了，见下例：</p>
<p>index:undefined<br />
    input:undefined<br />
    result[0]:b<br />
    result[1]:b<br />
    result[2]:b</p>
<p>设置了g修饰符的正则表达式在完成一次成功匹配后不会停止，而是继续找到所有可以匹配到的字符。返回的结果包括了三个b。不过没有提供input和index这些信息。
  </p>
<h3>replace方法</h3>
<p>形式：str.  replace (reg,’new str’);</p>
<p>它的作用是将str字符串中匹配reg的部分用’’new  str”部分代码，值得注意的是原字符串并不会被修改，而是作为返回值被返回。例子：</p>

<div class="wp_codebox"><table><tr id="p250181"><td class="code" id="p250code181"><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;">/b/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> newStr <span style="color: #339933;">=</span>  str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span><span style="color: #3366CC;">'c'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>newStr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果为cbs.blueidea.com，只有第一个b被替换为c。
  </p>

<div class="wp_codebox"><table><tr id="p250182"><td class="code" id="p250code182"><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;">/b/g</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> newStr <span style="color: #339933;">=</span>  str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span><span style="color: #3366CC;">'c'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>newStr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>输出ccs.clueidea.com</p>
<p>由于，设置了g修饰符，所以会替换掉所有的b。
  </p>

<div class="wp_codebox"><table><tr id="p250183"><td class="code" id="p250code183"><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;">/\w+/g</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> newStr <span style="color: #339933;">=</span>  str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span><span style="color: #3366CC;">'word'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>newStr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>输出：</p>
<p>word.word.word。</p>
<h4>在replace函数中使用$引用子正则表达式匹配内容</h4>
<p>就像在正则里我们可以使用\1来引用第一个子正则表达式所匹配的内容一样，我们在replace函数的替换字符里也可以使用$1来引用相同的内容。</p>
<p>还是来看一个例子吧：</p>

<div class="wp_codebox"><table><tr id="p250184"><td class="code" id="p250code184"><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;">/(\w+).(\w+).(\w+)/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> newStr <span style="color: #339933;">=</span>  str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span><span style="color: #3366CC;">'$1.$1.$1'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>newStr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>输出的结果为：</p>
<p>bbs.bbs.bbs</p>
<p>首先，我们知道第一个子正则表达式匹配到了bbs，那么$1也就代表bbs了。其后我们把替换字符串设置为&#8217;$1.$1.$1&#8242;,其实也就是“bbs.bbs.bbs”。同理，$2就是blueidea，$3就是com。
  </p>
<p>在来看一个例子，颠倒空格前后两个单词的顺序。</p>

<div class="wp_codebox"><table><tr id="p250185"><td class="code" id="p250code185"><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;">/(\w+)\s(\w+)/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">'cainiao  gaoshou'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> newStr <span style="color: #339933;">=</span>  str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span><span style="color: #3366CC;">'$2 $1'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>newStr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果为：gaoshou  cainiao，也就是空格前后的单词被调换顺序了。
  </p>
<p>由于在替换文本里$有了特殊的含义，所以我们如果想要是用$这个字符的话，需要写成$$，例如：</p>

<div class="wp_codebox"><table><tr id="p250186"><td class="code" id="p250code186"><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;">/(\w+)\s(\w+)/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">'cainiao  gaoshou'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> newStr <span style="color: #339933;">=</span>  str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span><span style="color: #3366CC;">'$$ $$'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>newStr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果为：$  $。
  </p>
<h3>search方法和split方法</h3>
<p>同样，字符串的search方法和split方法中也可以使用正则表达式，形式如下：</p>
<p>str.search(reg);</p>
<p>search返回正则表达式第一次匹配的位置。例子：</p>

<div class="wp_codebox"><table><tr id="p250187"><td class="code" id="p250code187"><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;">/idea/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">'blueidea'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> pos <span style="color: #339933;">=</span>  str.<span style="color: #660066;">search</span><span style="color: #009900;">&#40;</span>reg<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>pos<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果为4。</p>
<p>下面的例子找出第一个非单词字符：</p>

<div class="wp_codebox"><table><tr id="p250188"><td class="code" id="p250code188"><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;">/\W/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> pos <span style="color: #339933;">=</span>  str.<span style="color: #660066;">search</span><span style="color: #009900;">&#40;</span>reg<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>pos<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果为3，也就是那个点“.”的位置。
  </p>

<div class="wp_codebox"><table><tr id="p250189"><td class="code" id="p250code189"><pre class="javascript" style="font-family:monospace;">str.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span>reg<span style="color: #339933;">,</span>’seprator’<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
split返回分割后的数组，例如：
<span style="color: #003366; font-weight: bold;">var</span> reg <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\W/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'bbs.blueidea.com'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> arr <span style="color: #339933;">=</span>  str.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span>reg<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>arr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果为：bbs,blueidea,com，可见数组被非单词字符分为了有三个元素的数组。
  </p>

<div class="wp_codebox"><table><tr id="p250190"><td class="code" id="p250code190"><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;">/\W/</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span>  str <span style="color: #339933;">=</span> <span style="color: #3366CC;">'http://www.baidu.com/'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span>  arr <span style="color: #339933;">=</span> str.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span>reg<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>arr.<span style="color: #660066;">length</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&lt;br  /&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>arr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结果为：</p>
<p>7<br />
    http,,,www,baidu,com,</p>
<p>可见字符串被分为了有7个元素的数组，其中包括了三个为空字符串的元素。</p>
<p>  <!-- #BeginLibraryItem "/Library/JavaScript正则.lbi" --></p>
<h4>JavaScript正则表达式</h4>
<ul>
<li><a href="http://www.cainiao8.com/web/js_note/js_regular_expression.pdf">JavaScript正则表达式(PDF格式)</a></li>
<li><a href="http://www.cainiao8.com/web/js_note/js_regular_expression_blueidea.html">经典JavaScript正则表达式实战</a></li>
<li><a href="http://www.cainiao8.com/web/js_note/js_regular_expression_blueidea.pdf">经典JavaScript正则表达式实战(PDF格式)</a></li>
<li><a href="http://www.cainiao8.com/web/js_note/js_regular_expression_tool.html">JavaScript正则表达式测试工具</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.kunkka.cn/2009/12/30/javascript-regular-expression/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>浅谈javascript的分号</title>
		<link>http://www.kunkka.cn/2009/12/03/javascript-automatic-semicolon-insertion/</link>
		<comments>http://www.kunkka.cn/2009/12/03/javascript-automatic-semicolon-insertion/#comments</comments>
		<pubDate>Thu, 03 Dec 2009 13:39:05 +0000</pubDate>
		<dc:creator>kunkka</dc:creator>
				<category><![CDATA[javascript / Dom]]></category>
		<category><![CDATA[原创]]></category>
		<category><![CDATA[Automatic]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[Semicolon Insertion]]></category>

		<guid isPermaLink="false">http://www.kunkka.cn:81/?p=195</guid>
		<description><![CDATA[javascript的分号代表语句的结束符，但由于javascript具有分号自动插入规则，所以它是一个十分容易让人模糊的东西，在一般情况下，一个换行就会产生一个分号，但实际情况却不然，也就是说在javascript中换行可能产生分号，也可能不产生，是否自动插入分号，主要看上下行。所以即使是经验丰富的程序员，有时候也会头大。
在ECMAScript中对分号自动插入规则也有相应的解释：空语句，变量语句，表达式语句，do-while 语句，continue 语句，break 语句，return 语句，以及 throw 语句，这些确定的ECMAScript语句必须以分号结束。这些分号可以总是明确地出现在源代码文本中。为方便起见，在特定的情况下，源代码文本中的这些分号可以被省略。也就是说这些语句的结尾是不需要硬性的输入分号结尾，javascript会自动插入语句结束处。



想了解详细的ECMAScript分号自动插入规则可以查看以下链接：


原文
中文翻译



实践出真理，看一下下面这些例子，就明白，分号自动插入不是那么好让人捉摸的。稍微不注意就会让你头大。
return引起的血案

function test&#40;&#41;&#123;
   var a = 1;
   var b = 2;
   return //会自动插入分号
       &#40;
         a+b
       &#41;
&#125;;
alert&#40;test&#40;&#41;&#41;;

一个返回a+b值的函数，初看没任何问题，但运行alert的结果却是undefined。根据分号的自动插入规则，return 语句后面如果有换行就会自动插入分号，没有返回值也就比较好理解了。如果需要换行的话，可以这样：

function test&#40;&#41;&#123;
   var a = 1;
 [...]]]></description>
			<content:encoded><![CDATA[<p>javascript的分号代表语句的结束符，但由于javascript具有分号自动插入规则，所以它是一个十分容易让人模糊的东西，在一般情况下，一个换行就会产生一个分号，但实际情况却不然，也就是说在javascript中换行可能产生分号，也可能不产生，是否自动插入分号，主要看上下行。所以即使是经验丰富的程序员，有时候也会头大。</p>
<p>在<a href="http://bclary.com/2004/11/07/" title="查看ECMAScript文档">ECMAScript</a>中对分号自动插入规则也有相应的解释：<span style="text-decoration: underline; ">空语句，变量语句，表达式语句，do-while 语句，continue 语句，break 语句，return 语句，以及 throw 语句，这些确定的ECMAScript语句必须以分号结束。这些分号可以总是明确地出现在源代码文本中。为方便起见，在特定的情况下，源代码文本中的这些分号可以被省略。</span>也就是说这些语句的结尾是不需要硬性的输入分号结尾，javascript会自动插入语句结束处。
</p>
<p><span id="more-195"></span></p>
<dl>
<dt>想了解详细的ECMAScript分号自动插入规则可以查看以下链接：</dt>
<dd>
<ul>
<li><a href="http://bclary.com/2004/11/07/#a-7.9" title="查看详细">原文</a></li>
<li><a href="http://let-in.blogspot.com/2007/05/ecma-26279-automatic-semicolon.html" title="查看详细">中文翻译</a></li>
</ul>
</dd>
</dl>
<p>实践出真理，看一下下面这些例子，就明白，分号自动插入不是那么好让人捉摸的。稍微不注意就会让你头大。</p>
<p><b>return引起的血案</b></p>

<div class="wp_codebox"><table><tr id="p195195"><td class="code" id="p195code195"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> test<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> a <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
   <span style="color: #003366; font-weight: bold;">var</span> b <span style="color: #339933;">=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span>
   <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #006600; font-style: italic;">//会自动插入分号</span>
       <span style="color: #009900;">&#40;</span>
         a<span style="color: #339933;">+</span>b
       <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>test<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>一个返回a+b值的函数，初看没任何问题，但运行alert的结果却是undefined。根据分号的自动插入规则，return 语句后面如果有换行就会自动插入分号，没有返回值也就比较好理解了。如果需要换行的话，可以这样：</p>

<div class="wp_codebox"><table><tr id="p195196"><td class="code" id="p195code196"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> test<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> a <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
   <span style="color: #003366; font-weight: bold;">var</span> b <span style="color: #339933;">=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span>
   <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span> 
           a<span style="color: #339933;">+</span>b
          <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>test<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><b>两个闭包引起的血案</b></p>

<div class="wp_codebox"><table><tr id="p195197"><td class="code" id="p195code197"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</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> a<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">//不会自动插入分号</span>
<span style="color: #009900;">&#40;</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> b<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>很诡异，解释不了，谁能告诉我～</p>
<p><b>for语句头中的两个分号，不自动插入分号</b></p>

<div class="wp_codebox"><table><tr id="p195198"><td class="code" id="p195code198"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">var</span> a<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>b<span style="color: #339933;">=</span><span style="color: #CC0000;">10</span> <span style="color: #006600; font-style: italic;">//不会自动插入分号</span>
         a<span style="color: #339933;">&lt;</span>b <span style="color: #006600; font-style: italic;">//不会自动插入分号</span>
         a<span style="color: #339933;">++</span> 
   <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>ECMAScript对以上也有解释：将分号解释为空语句和在for语句中的()中不自动插入分号是特例，是不属于自动插入规则管辖的。</p>
<p>javascript虽然是弱类型语言，ECMAScript的分号自动插入规则也让人难以理解透彻。但养成良好的代码书写习惯，手动插入分号，养成习惯，就能避免这些问题，同时会在程序调试，代码的阅读上对自己对他人都有不小的帮助。</p>
<p>同时ECMAScript还给程序员一些忠告：</p>
<ul>
<li>++ 或 &#8212; 应和其操作数出现在同一行。</li>
<li>return 或 throw 语句中的表达式应和return 或 throw 出现在同一行。</li>
<li>break 或 continue 语句中的标签应和break 或 continue 出现在同一行。</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.kunkka.cn/2009/12/03/javascript-automatic-semicolon-insertion/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Amazing ImageSwitch</title>
		<link>http://www.kunkka.cn/2009/11/24/amazing-imageswitch/</link>
		<comments>http://www.kunkka.cn/2009/11/24/amazing-imageswitch/#comments</comments>
		<pubDate>Tue, 24 Nov 2009 09:54:33 +0000</pubDate>
		<dc:creator>kunkka</dc:creator>
				<category><![CDATA[Image]]></category>
		<category><![CDATA[javascript / Dom]]></category>
		<category><![CDATA[原创]]></category>
		<category><![CDATA[ImageSwitch]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.kunkka.cn:81/?p=167</guid>
		<description><![CDATA[
查看Demo： Demo-1&#160;&#160;Demo-2&#160;&#160;下载源文件
amazing ImageSwitch是一个图片切换脚本，形式上类似于大多数图片切换，只是在切换效果上加了些创新。这个脚本是四个月前写的，期间也有不断地修改和完善。也不知道取个什么名字好，就暂叫amazing ImageSwitch吧 。

amazing ImageSwitch的实现需要点创意，难点在于图片的分割上，其实原理是比较简单的，就好比打碎鸡蛋在组合的过程，首先你需要把图片切割成几块，然后再将它拼接成一个完整的图片才能实现其他动画。但要真正完成图片的分割，js还实现不了，但变通一下将图片转换成背景，利用一下CSS Sprites呢，靠谱。以下是主要思路：


根据图片的宽高计算出切割块的数量和宽高（原图的宽度 = 切割快的数量 * 切割块的宽；高度计算同上）
利用DOM依次动态循环插入切割块到相应的位置。并利用css进行定位排列。
获取图片的src地址，作为背景图片备用，然后使用CSS Sprites技术，将背景定位到相对应的切割快，让其组成一个完整的图片。

当然以上说所只是大概的原理，具体实现还有很多细节上的技术需要考虑，了解详细请查看源代码。
ps：前几天在蓝色上看到一同行做了个类似的效果，详细可查看他的“奇淫技巧之图片切割”一文。声明一下哦，我可没有借鉴抄袭的嫌疑，你可以查看源代码，js的封装和写法都是完全出自不同人的手。只能说实属巧合了，呵呵。原理都差不多，多动动脑子就能想写好玩的东西。
]]></description>
			<content:encoded><![CDATA[<p><a href="/demo/amazing/demo-01.html" title="Demo-1"><img src="/wp-content/uploads/2009/11/amazing.jpg" alt="查看Demo" title="查看Demo"></a></p>
<p><b>查看Demo：</b> <a href="/demo/amazing/demo-01.html" title="Demo-1">Demo-1</a>&nbsp;&nbsp;<a href="/demo/amazing/demo-02.html" title="Demo-1">Demo-2</a>&nbsp;&nbsp;<a href="/demo/amazing/amazing.rar" title="下载源文件">下载源文件</a></p>
<p><a href="/demo/amazing/demo-01.html" title="demo">amazing ImageSwitch</a>是一个图片切换脚本，形式上类似于大多数图片切换，只是在切换效果上加了些创新。这个脚本是四个月前写的，期间也有不断地修改和完善。也不知道取个什么名字好，就暂叫<a href="/demo/amazing/demo-01.html" title="demo">amazing ImageSwitch</a>吧 。</p>
<p><span id="more-167"></span></p>
<p><a href="/demo/amazing/demo-01.html" title="demo">amazing ImageSwitch</a>的实现需要点创意，难点在于图片的分割上，其实原理是比较简单的，就好比打碎鸡蛋在组合的过程，首先你需要把图片切割成几块，然后再将它拼接成一个完整的图片才能实现其他动画。但要真正完成图片的分割，js还实现不了，但变通一下将图片转换成背景，利用一下CSS Sprites呢，靠谱。以下是主要思路：</p>
<p><!-- more --></p>
<ul>
<li>根据图片的宽高计算出切割块的数量和宽高（原图的宽度 = 切割快的数量 * 切割块的宽；高度计算同上）</li>
<li>利用DOM依次动态循环插入切割块到相应的位置。并利用css进行定位排列。</li>
<li>获取图片的src地址，作为背景图片备用，然后使用<a href="http://www.alistapart.com/articles/sprites" title="CSS Sprites">CSS Sprites</a>技术，将背景定位到相对应的切割快，让其组成一个完整的图片。</li>
</ul>
<p>当然以上说所只是大概的原理，具体实现还有很多细节上的技术需要考虑，了解详细请查看<a href="/demo/amazing/amazing.rar" title="下载源文件">源代码</a>。</p>
<p>ps：前几天在蓝色上看到一同行做了个类似的效果，详细可查看他的“<a href="http://cnwander.com/blog/?p=13">奇淫技巧之图片切割”</a>一文。声明一下哦，我可没有借鉴抄袭的嫌疑，你可以查看源代码，js的封装和写法都是完全出自不同人的手。只能说实属巧合了，呵呵。原理都差不多，多动动脑子就能想写好玩的东西。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kunkka.cn/2009/11/24/amazing-imageswitch/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>简单的ToolTip</title>
		<link>http://www.kunkka.cn/2009/11/17/simple-tooltip/</link>
		<comments>http://www.kunkka.cn/2009/11/17/simple-tooltip/#comments</comments>
		<pubDate>Tue, 17 Nov 2009 06:40:25 +0000</pubDate>
		<dc:creator>kunkka</dc:creator>
				<category><![CDATA[ToolTip]]></category>
		<category><![CDATA[javascript / Dom]]></category>
		<category><![CDATA[原创]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.kunkka.cn:81/?p=163</guid>
		<description><![CDATA[一个简单的ToolTip，用于替换浏览器默认的提示框，适用于任何HTML元素，想要显示ToolTip，只需要在相应的html元素上添加title，或者在图片上添加alt标签。
详细查看 Demo 及其源代码
]]></description>
			<content:encoded><![CDATA[<p>一个简单的<a href="/demo/toolTip.html" title="ToolTip Demo">ToolTip</a>，用于替换浏览器默认的提示框，适用于任何HTML元素，想要显示ToolTip，只需要在相应的html元素上添加title，或者在图片上添加alt标签。</p>
<p>详细查看 <a href="/demo/toolTip.html" title="ToolTip Demo">Demo</a> 及其源代码</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kunkka.cn/2009/11/17/simple-tooltip/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>迈克尔·杰克逊：就是这样</title>
		<link>http://www.kunkka.cn/2009/11/04/this-is-it/</link>
		<comments>http://www.kunkka.cn/2009/11/04/this-is-it/#comments</comments>
		<pubDate>Wed, 04 Nov 2009 05:22:22 +0000</pubDate>
		<dc:creator>kunkka</dc:creator>
				<category><![CDATA[life]]></category>
		<category><![CDATA[this is it]]></category>
		<category><![CDATA[就是这样]]></category>
		<category><![CDATA[迈克尔·杰克逊]]></category>

		<guid isPermaLink="false">http://www.kunkka.cn:81/?p=119</guid>
		<description><![CDATA[“他的梦想激励了全世界，但他自己还有一个梦想要跟每一个人分享。”



片名：《迈克尔·杰克逊：就是这样》
导演：Kenny Ortega
主演： Michael Jackson
制片国家/地区：美国
上映日期：2009-10-28
片长：USA:112 min
语言：英语
类型： 纪录片 / 音乐
上映日期： 2009年10月28日 中国

“我爱你们，我真的爱你们！”这句迈克尔·杰克逊（MJ）对歌迷的深情告白，在10月30日这天歌迷将有机会再次真切地听到。这一天，跟MJ生前未竟的演唱会“This Is It”同名的演唱会电影在国内正式上映，其中文名为《天王终点》。

 
昨天去看的这部电影，我不是一个Michael迷，听过的也是他那些耳熟能详的经典歌曲。这部电影的全部内容都是MJ生前彩排时候录下来的，展现的是一个真实的MJ，我真认为这不能算一部商业电影，而完全是一个MJ的彩排记录。迈克尔·杰克逊“This Is It”的演唱会投资高达2400万美元，索尼为了制作《就是这样》而购买了演唱会的所有拍摄资料，购买费用高达6000万美元（太黑了吧）。由此，《就是这样》成为了史上投资最高的纪录片。但就是这样一个纯粹的纪录片却能勇夺北美票房的冠军。不能不佩服MJ所向无敌的人气和全世界人对他的关注，绝对配的上前无古人。


纪录片就是展示真实的一面。整个影片没有使用任何特技，只是一些花絮的合成。也没有介绍MJ以往的历史和乱起八糟之类的东西，MJ就是MJ，不需要过多的介绍，片子从演唱会的筹备开始，舞台搭建，挑选主要舞伴，场景设计，特效设计，详细的排练花絮。《就是这样》就是这么简单。我不是一个特别了解他的人，但我知道他是一个一直处在负面新闻中的人物。但通过这部2个多小时的纪录片却让我了解到MJ对音乐的专业，不管是舞台，选曲，细节的衔接等等，他都亲力亲为，他是那么的执着，那么的力求完美又是那么富有创意。MJ很单纯，很谦逊，很有爱心，善待鼓励身边的每个工作人员。
我不是什么专业的影评人，不是MJ迷，只是个普通的观众。我觉得《就是这样》不能用电影的角度去评价它，但它绝对是值得珍藏的回忆。
]]></description>
			<content:encoded><![CDATA[<blockquote><p>“他的梦想激励了全世界，但他自己还有一个梦想要跟每一个人分享。”</p></blockquote>
<div>
<img style="width: 170px; float: left; border: #ccc 1px solid; padding: 5px;" title="《迈克尔·杰克逊：就是这样》" src="http://t.douban.com/lpic/s3967048.jpg" alt="《迈克尔·杰克逊：就是这样》" /></p>
<p style="padding-bottom: 0px; padding-left: 1em; width: 250px; padding-right: 0px; float: left; padding-top: 0px;">
片名：《迈克尔·杰克逊：就是这样》<br />
导演：Kenny Ortega<br />
主演： <a title="迈克尔·杰克逊介绍" href="http://zh.wikipedia.org/wiki/%E8%BF%88%E5%85%8B%E5%B0%94%C2%B7%E6%9D%B0%E5%85%8B%E9%80%8A">Michael Jackson</a><br />
制片国家/地区：美国<br />
上映日期：2009-10-28<br />
片长：USA:112 min<br />
语言：英语<br />
类型： 纪录片 / 音乐<br />
上映日期： 2009年10月28日 中国</p>
</div>
<p style="clear:both;padding:10px 0 0 0 ;">“我爱你们，我真的爱你们！”这句迈克尔·杰克逊（MJ）对歌迷的深情告白，在10月30日这天歌迷将有机会再次真切地听到。这一天，跟MJ生前未竟的演唱会“This Is It”同名的演唱会电影在国内正式上映，其中文名为《天王终点》。</p>
<p><span id="more-119"></span></p>
<p> <img  style="width: 500px; border: #ccc 1px solid; padding: 5px;"  title="this is it" src="http://www.kunkka.cn:81/wp-content/uploads/2009/11/Img1562717_n.jpg" alt="this is it 剧照" /></p>
<p>昨天去看的这部电影，我不是一个Michael迷，听过的也是他那些耳熟能详的经典歌曲。这部电影的全部内容都是MJ生前彩排时候录下来的，展现的是一个真实的MJ，我真认为这不能算一部商业电影，而完全是一个MJ的彩排记录。迈克尔·杰克逊“This Is It”的演唱会投资高达2400万美元，索尼为了制作《就是这样》而购买了演唱会的所有拍摄资料，购买费用高达6000万美元（太黑了吧）。由此，《就是这样》成为了史上投资最高的纪录片。但就是这样一个纯粹的纪录片却能勇夺北美票房的冠军。不能不佩服MJ所向无敌的人气和全世界人对他的关注，绝对配的上前无古人。
</p>
<p><img style="width: 500px; border: #ccc 1px solid; padding: 5px;" title="this is it " src="http://www.kunkka.cn:81/wp-content/uploads/2009/11/Img1562715_n.jpg" alt="this is it剧照" /></p>
<p>纪录片就是展示真实的一面。整个影片没有使用任何特技，只是一些花絮的合成。也没有介绍MJ以往的历史和乱起八糟之类的东西，MJ就是MJ，不需要过多的介绍，片子从演唱会的筹备开始，舞台搭建，挑选主要舞伴，场景设计，特效设计，详细的排练花絮。《就是这样》就是这么简单。我不是一个特别了解他的人，但我知道他是一个一直处在负面新闻中的人物。但通过这部2个多小时的纪录片却让我了解到MJ对音乐的专业，不管是舞台，选曲，细节的衔接等等，他都亲力亲为，他是那么的执着，那么的力求完美又是那么富有创意。MJ很单纯，很谦逊，很有爱心，善待鼓励身边的每个工作人员。</p>
<p>我不是什么专业的影评人，不是MJ迷，只是个普通的观众。我觉得《就是这样》不能用电影的角度去评价它，但它绝对是值得珍藏的回忆。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kunkka.cn/2009/11/04/this-is-it/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

