java.util.regex.PatternSyntaxException: Look-behind group does not have an obvious maximum length near index XX

在网上搜了好久也没找到完美的解决方案。不过，我们可以实现有限级Html嵌套标签匹配。思路相对于无限级来说就简单了好多，不需要那么多高级的特性。

示例：

<div id='container'>
    <div style='background-color:gray;' id='footer'>
        <a id='gotop' href='#' onclick='MGJS.goTop();return false;'>Top</a>
        <a id='powered' href='http://wordpress.org/'>WordPress</a>
        <div id='copyright'>
            Copyright &copy; 2009 简单生活 —— Kevin Yang的博客
         </div>
        <div id='themeinfo'>
            Theme by <a href='http://www.neoease.com/'>mg12</a>. Valid <a href='http://validator.w3.org/check?uri=referer'>XHTML 1.1</a>
            and <a href='http://jigsaw.w3.org/css-validator/'>CSS 3</a>.
        </div>
    </div>
</div>

在上面这个示例中，我们打算匹配id为footer的这个嵌套div，而且假设我们预先知道footer这个div里面最多只会嵌套一级div。更多级的情况我们一会儿再讲。

footer的开始和结束标签匹配很简单：

<div [^>]*id='footer'[^>]*>......(这里的省略号是一会要填写的)</div>

夹在开始和结束标签之间的内容无非有两种情况：

• 内容A: div标签，并且此div内无嵌套div
• 内容B: 任意其他内容

然后就是这两种内容的不断重复而已。正则表示如下：

(<div[^>]*>.*?</div>|.)*?

注意最后面的问号必须要加上，否则由于正则的贪婪匹配特性，footer的闭合标签会匹配失误。

OK了，匹配最多嵌套一级div的正则表达式如下：

<div [^>]*id='footer'[^>]*>(<div[^>]*>.*?</div>|.)*?</div>

那么如果footer标签里头最多会嵌套两级div的话怎么办呢？

其实也不难，我们只需要把上面的“内容A”部分中的点号稍作替换即可。修改如下：

<div [^>]*id='footer'[^>]*>(<div[^>]*>(<div[^>]*>.*?</div>|.)*?</div>|.)*?</div>

到这里你可能就知道，如果要匹配最多嵌套三级div的话，正则应该怎么写了：

<div [^>]*id='footer'[^>]*>(<div[^>]*>(<div[^>]*>(<div[^>]*>.*?</div>|.)*?</div>|.)*?</div>|.)*?</div>

所以实际上，只要你的html结构不是特别复杂的话，也就是说嵌套不会很深的话，那么你完全可以使用这种方式来匹配嵌套html标签。

这个正则在Java和Javascript中都可以使用，因为它没有用到任何高级特性。

——Kevin Yang

你可能对下面的文章感兴趣

• Button标签鼠标点击事件的触发源问题
• IE中使用window.open打开新窗口时无法获取Referrer对象
• Javascript 中的false,零值,null,undefined和空字符串对象
• Javascript中获取出错代码所在文件及行数
• Javascript字符串哈希函数
• Javascript操纵Cookie
• 为什么IIS7/7.5的Gzip不起作用
• 使用正则表达式匹配嵌套Html标签
• 使用正则表达式找出不包含特定字符串的条目
• 使用相对Url无缝切换HTTP-HTTPS

1. 直接在浏览器中编辑网页内容

javascript:document.body.contentEditable='true';void(0);

访问任意网站，在地址栏输入以上代码，会发生当前网页已经变成编辑模式了。将上述代码中的true改成false重新执行一遍即可恢复。

2. 舞动的图片

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

这段js代码可能很多人已经见识过了。他的作用就是让网页上的图片飞舞起来。

3. 密码框密文变明文

javascript:(function(){var s,F,j,f,i;s="";F=document.forms;for(j=0;j<F.length;++j){f=F[j];for(i=0;i<f.length;++i){if(f[i].type.toLowerCase()=="password")s+=f[i].value+"\n";}}if(s)alert("Passwords in forms on this page:\n\n"+s);else alert("There are no passwords in forms on this page.");})();

访问一个带密码框的页面，然后地址栏输入以上代码，就会弹出当前密码框中的密码了，别干坏事哟~

——Kevin Yang

你可能对下面的文章感兴趣

• Button标签鼠标点击事件的触发源问题
• IE中使用window.open打开新窗口时无法获取Referrer对象
• Java/Js如何使用正则表达式匹配嵌套Html标签
• Javascript 中的false,零值,null,undefined和空字符串对象
• Javascript中获取出错代码所在文件及行数
• Javascript字符串哈希函数
• Javascript操纵Cookie
• 为什么IIS7/7.5的Gzip不起作用
• 使用相对Url无缝切换HTTP-HTTPS
• 当前日期110年

“随机”的gzip行为

问题的症状非常简单而又奇怪。有时候连续访问脚本多次，刚开始没有gzip，再次访问又有gzip。等过好一会再去访问，gzip又没有了。有的时候则是无论怎么访问都不给我返回gzip后的响应。

问题的分析

排除了CPU负载过大的因素，因为发现当深夜机器CPU负载正常的时候也一样出现这样的问题。

在系统日志中发现以下Warning条目，引起了我的注意：

Warning    2010/4/13 6:32:41    IIS-W3SVC-WP    2264    None

The directory specified for caching compressed content C:\inetpub\temp\IIS Temporary Compressed Files\XXX is invalid.  Static compression is being disabled.

通过日志筛选，发现从09年7月份就一直出现这样的Warning了，而且出现频率是隔1-3天左右。

这个文件夹是IIS用于存放压缩后的静态内容缓存。按照上面日志的意思，是说这个目录出了问题，导致静态压缩功能被禁用了。但是我明明可以访问这个文件夹，而且里头确实还放着缓存的脚本。

IIS论坛上提这个问题的帖子很多，但最终得到解答的没看到。不过其中一些人的回复倒是给了我不少思路。其中有人说道可能是文件夹权限问题，我看了看那个压缩缓存目录，上面的权限的确是应用程序池的身份，没有问题。使用ProcessMonitor监测了w3wp.exe进程的活动情况，没有看到这个进程在访问文件系统时出现错误。

后来在网上看到了Kanwaljeet Singla（IIS开发团队成员）的一篇文章，介绍IIS7相比IIS6在压缩模块上的改动，文中提到了一点，从IIS7开始，为了降低开销，IIS只对那些频繁访问的静态资源启用压缩。通过IIS7新引入的两个配置选项frequentHitThreshold和frequentHitTimePeriod，我们可以设定，当某个资源在frequentHitTimePeriod时间内被连续访问了frequentHitThreshold次，那么就算是“频繁访问”了。默认的配置是10秒钟内连续对同一Url发起2次请求就算此Url对应的资源属于频繁访问的资源，IIS服务器就会对其进行压缩，然后丢入缓存目录。

这也就解释了为什么有时候第一次请求脚本的时候，服务器没有返回gzip压缩后的内容，而是等你接着下一次访问的时候才会返回gzip响应。

但是按照这篇文章提到的IIS的设计理念，一旦资源被压缩缓存过，那么以后就不会再应用这个“频繁访问”的检测逻辑了，因为毕竟已经没有压缩开销了。而我非常确信这个脚本已经被缓存在服务器硬盘上了，那为什么我过一段时间再去访问的时候还是没有gzip呢？

在IIS7中有一个功能，叫做失败请求跟踪（Failed request tracing），允许技术人员跟踪那些出问题的请求在IIS内部都发生了什么事。为了揭开我的疑问，我对此网站开启了失败请求跟踪。

IIS7的Bug？！

打开IIS7管理器，定位到相应的网站右侧的操作面板，开启“失败请求跟踪”。默认跟踪日志文件是存放在%SystemDrive%\inetpub\logs\FailedReqLogFiles目录中。

然后在功能面板中找到“失败请求跟踪规则”进行配置：

为了防止其他脚本的干扰，在这里我限定了只跟踪测试的脚本

响应状态填写200即可

接下来是选择跟踪提供程序，也就是给你提供跟踪日志源的程序，由于我们的脚本只经过静态文件处理器，因此这里我们只需要选择www server处理程序即可。

然后我们就可以去测试一下访问出问题的脚本了。一旦IIS中途处理遇到些问题，那么就会以xml形式记录下相关的日志。打开FailedReqLogFiles目录，里头会有一些fr000001.xml这样格式的文件，每个文件代表一次失败请求。我们打开这个文件，查找compression关键词，发现了以下内容：

<Event xmlns="http://schemas.microsoft.com/win/2004/08/events/event">
 <System>
  <Provider Name="WWW Server" Guid="{3A2A4E84-4C21-4981-AE10-3FDA0D9B0F83}"/>
  <EventID>0</EventID>
  <Version>1</Version>
  <Level>4</Level>
  <Opcode>3</Opcode>
  <Keywords>0x40</Keywords>
  <TimeCreated SystemTime="2010-05-13T16:59:08.086Z"/>
  <Correlation ActivityID="{00000000-0000-0000-FD2B-008041000061}"/>
  <Execution ProcessID="10752" ThreadID="14504"/>
  <Computer>DMZ</Computer>
 </System>
 <EventData>
  <Data Name="ContextId">{00000000-0000-0000-FD2B-008041000061}</Data>
  <Data Name="Reason">14</Data>
 </EventData>
 <RenderingInfo Culture="zh-CN">
  <Opcode>STATIC_COMPRESSION_NOT_SUCCESS</Opcode>
  <Keywords>
   <Keyword>Compression</Keyword>
  </Keywords>
  <freb:Description Data="Reason">NOT_FREQUENTLY_HIT</freb:Description>
 </RenderingInfo>
 <ExtendedTracingInfo xmlns="http://schemas.microsoft.com/win/2004/08/events/trace">
  <EventGuid>{E60CEE96-4472-448D-A13C-2170B18220EC}</EventGuid>
 </ExtendedTracingInfo>
</Event>

在上面，我们看到了NOT_FREQUENTLY_HIT的字样，看上去响应没有gzip的原因，还是因为没有达到“频繁访问”的要求，即使请求的资源已经被压缩过然后存放在硬盘上了。似乎这个压缩缓存是有一定的时效的，就是过了多长时间就得重新验证一下这个“频繁访问”的逻辑了。

我又进行了大量的测试，发现这个失效时间大约是在5分钟。也就是说，当你频繁访问一个资源，IIS开始对其进行压缩并存放在本地压缩缓存目录之后，大约过5分钟，你再去访问，还是会重新执行“频繁访问”这个验证逻辑。

为了证实我得到的结论，我在推特上向Kanwaljeet Singla（他的推特是@kjsingla）询问了这个问题。出乎我的意料，他很快就回复了我，估计是因为我在做这个测试的时候已经半夜了，他那边刚好是白天的缘故吧。他经过测试，证实“频繁访问”的逻辑检测发生在“响应是否已经压缩”逻辑之前，这确实是IIS7/7.5的一个Bug。

解决办法倒是很简单，只需要将“频繁访问”定义得更宽泛一些即可。例如1分钟内1次访问。

<configuration>
    <system.webServer>
        <serverRuntime frequentHitThreshold="1" frequentHitTimePeriod="00:01:00" />
    </system.webServer>
</configuration>

问题真的解决了吗？

当我以为问题圆满解决，满意的睡着之后，第二天测试的时候发现请求脚本又没有gzip了，而且这次是连着访问好几次都没有压缩，这没法用我昨晚得到的结论去解释。让我非常郁闷-_-|||

冷静！

在系统日志中，我又看到了压缩目录无效的警告信息了，但这次，这个压缩目录是真没了。回想起那个时刻做的操作，当时运营的网站抛出未处理的异常，我修改完这个异常就把应用程序池给重启了。难道是说，当网站出现异常的时候，如果强制回收应用程序池的话，会导致静态压缩目录被删除？更奇怪的是，当我再次回收应用程序池，发现这个压缩目录又被重新创建了。

为了验证我的猜想，我又重复了这个过程，让网站抛出异常=>重启应用程序池=>再次请求脚本，问题重现；我又新建了一个一摸一样配置的测试网站，同样的测试流程，却发现压缩目录正常，没有出现上述的症状。

经过细致的对比，我发现运营的网站和我测试的网站环境还是不大一样的。运营的网站时时刻刻都有外部的请求，而且还很频繁。而测试网站不会有任何干扰的流量。

为了模拟真实的情况，我用iMacro写了一个宏，不间断的向测试网站请求该脚本。一开始，可以看到压缩目录确实是存在的，然后我在中途手动回收了应用程序池。发现压缩缓存目录确实被删除了。

经过再细致的测试，我最终得到一个结论：

在IIS7/7.5中，如果为应用程序池配置了administrator的账号权限，那么如果在应用程序池处理静态文件压缩的时候回收应用程序池，会导致压缩缓存目录被删除。直到下次应用程序池健康重启的时候，此压缩缓存目录才会被重新创建。

这个结论我还没有得到IIS团队的证实。但在我几台机器上的IIS7和7.5测试的结果确实都是这样的。联想之前的系统日志中，每隔1-3天就出现这样的问题，刚好是因为IIS7默认的回收间隔是1740分钟，也就是1天5小时。我计算了一下系统日志中的所有关于静态压缩目录警告出现的时间，和这个回收间隔的倍数非常吻合。

解决办法有两个：

• 如果没有必要，则不要给应用程序池配置administrator的账号，使用内置的账号不会出现这样的问题。
• 禁用固定时间间隔回收，改成在一个相对空闲的固定时刻回收，例如半夜4点。

希望我奋战2个晚上得到的结论对你有所帮助~

——Kevin Yang

你可能对下面的文章感兴趣

• 64位系统下IIS7 ISAPI处理器加载失败
• Button标签鼠标点击事件的触发源问题
• IE中使用window.open打开新窗口时无法获取Referrer对象
• IIS7配置Gzip压缩
• Java/Js如何使用正则表达式匹配嵌套Html标签
• Javascript 中的false,零值,null,undefined和空字符串对象
• Javascript中获取出错代码所在文件及行数
• Javascript字符串哈希函数
• Javascript操纵Cookie
• 使用相对Url无缝切换HTTP-HTTPS

后来我就用了WP-SpamFree插件。据说这插件是利用Cookie和Javascript互相配合来实现防范垃圾评论的，细节我没有去深究，不是很清楚。之前观察过一阵子他记录的调试日志，确实是能够100%的拦截垃圾评论，没有误报。

但前阵子这个插件突然大罢工了，随便怎么评论都说我的留言有问题，通不过。经过一番瞎折腾之后，发现又无缘无故好了。但是我对这插件开始有了不信任感~

我后来就在想，与其用别人现成的插件来实现反垃圾评论，为什么不自己实现一个简单易用，而又适合自己实际情况的反垃圾评论机制呢？

我对评论机器人软件不是很熟悉，猜想大概他们会维护一个庞大的博客列表，然后定时去爬取上面的网页，分析页面，找到上面的评论表单——可能是有特征识别，也可能不管三七二十一找到表单就算，然后填写其中的各个字段，最后提交表单。所以如果我把评论表单的提交地址给删了，那么评论机器人找不到提交地址或者找到错误的提交地址，就无法成功提交评论了。那真正的用户如何评论呢？我可以在表单加载完之后立刻通过Javascript动态更新评论表单的提交地址就行了。

代码修改非常简单，打开主题文件夹中，找到评论表单所在的模板文件，一般是在comments.php中。

<form action="/wp-comments-post.php" method="post" id="commentform">
...
</form>

这是未修改之前的代码。将其action属性的值改为空字符串。然后在结束标签下面添加一行Javascript。如下所示：

<form action="" method="post" id="commentform">
...
</form>
<script type="text/javascript">
    document.getElementById("commentform").action = "/wp-comments-post.php";
</script>

OK，这样代码重构完之后就和原来的一样了。

但是这样带来的问题就是，如果对方浏览器禁用了Javascript，那么他也无法评论了。对于我来说，这个比例基本可以忽略。当然，这个方法并不是万金油，不能抵挡所有垃圾评论。毕竟我没有广泛研究过评论机器人的工作原理，有可能人家就是使用自动化脚本模拟用户打开浏览器，输入网址然后填写评论，这也说不准。但是经过半个多月的试验，这个方法还算是比较靠谱的。至今没有见过一条机器人评论。有兴趣的朋友也可以试试。

——Kevin Yang

你可能对下面的文章感兴趣

• Button标签鼠标点击事件的触发源问题
• IE中使用window.open打开新窗口时无法获取Referrer对象
• Java/Js如何使用正则表达式匹配嵌套Html标签
• Javascript 中的false,零值,null,undefined和空字符串对象
• Javascript中获取出错代码所在文件及行数
• Javascript字符串哈希函数
• Javascript操纵Cookie
• WordPress评论中保留Html代码
• 一句话博客2009-08-04
• 为什么IIS7/7.5的Gzip不起作用

跟了一下Javascript，发现该网站是使用getYear函数来获取当前年份。查了一下JS手册，getYear函数返回的其实是当前年份距离1900年的年数。2010-1900=110。此函数是在ECMAScript v1版本规定实现，到V3版本的时候已经废弃了，getFullYear才是用来获取当前年份的函数。Chrome和Firefox等浏览器在实现的时候都是遵循标准，而IE的JScript在实现的时候却没有遵循标准，结果getYear和getFullYear函数返回的都是当前年份。估计写Javascript的人在使用函数的时候没有看清楚手册说明就直接用了。

——Kevin Yang

你可能对下面的文章感兴趣

• Button标签鼠标点击事件的触发源问题
• Firebug在EditHtml时丢失事件处理函数
• IE中使用window.open打开新窗口时无法获取Referrer对象
• IE无法设置短域名下Cookie
• Java/Js如何使用正则表达式匹配嵌套Html标签
• Javascript 中的false,零值,null,undefined和空字符串对象
• Javascript中获取出错代码所在文件及行数
• Javascript字符串哈希函数
• Javascript操纵Cookie
• 为什么IIS7/7.5的Gzip不起作用

<script>
    try{
        sldfj
    }catch(e){
        for(var p in e){
            document.writeln(p + "=" + e[p]);
        }
    }
</script>

输出：name=TypeError message='sldfj' 未定义 number=-2146823279 description='sldfj' 未定义

其中的number属性是一个整数，表示的是错误码，但这并不是真正的错误码，我们需要先将其做一下转换

var errCode = err.number& x0FFFF; 

这得到真正的错误码，例如上述的-2146823279 转换之后就得到5009。有了这个错误码之后，我们可以到http://msdn.microsoft.com/en-us/library/1dk3k160(VS.85).aspx微软msdn上查找此错误码对应的。5009对应的错误是Undefined identifier。

——Kevin Yang

你可能对下面的文章感兴趣

• Button标签鼠标点击事件的触发源问题
• IE中使用window.open打开新窗口时无法获取Referrer对象
• IE无法设置短域名下Cookie
• Java/Js如何使用正则表达式匹配嵌套Html标签
• Javascript 中的false,零值,null,undefined和空字符串对象
• Javascript中获取出错代码所在文件及行数
• Javascript字符串哈希函数
• Javascript操纵Cookie
• 为什么IIS7/7.5的Gzip不起作用
• 使用相对Url无缝切换HTTP-HTTPS

<body>
    <button id="test">
          <img src="http://www.google.cn/favicon.ico" />
    </button>
    <script>
        document.getElementById("test").onclick=function(e){
            if (!e) {
                e = window.event;
            }
            if (!e.target && e.srcElement) {
                e.target = e.srcElement;
            }
            alert(e.target.tagName);
        }
    </script>
</body>

运行的时候先显示一个小图标：

点击此按钮（无论你点在哪，图标上，还是Button上），那么触发源是什么呢？直观的来看，点正中央的话应该是IMG吧，点图标边缘Button的部分触发源应该是Button吧。

可是在IE各个版本上（使用IETester可以测试不同版本IE的兼容性）和Firefox、Opera上测试的结果均是BUTTON。

本来以为这样就完事了，以后记住就行了，后来发现，Chrome和Safari（它们核心是一样的）上的行为和正常的期望是一致的，也就是说点中央的话，触发源是IMG，点边缘的话触发源是BUTTON。

又测试了Button内包含其他HTML标签，行为和IMG一样。不知道为什么要这样实现。真希望某一天所有不合标准的浏览器，特别是IE6彻底毁灭了，这样Web开发人员就可以少头疼一下了。

——Kevin Yang

你可能对下面的文章感兴趣

• IE中使用window.open打开新窗口时无法获取Referrer对象
• Java/Js如何使用正则表达式匹配嵌套Html标签
• Javascript 中的false,零值,null,undefined和空字符串对象
• Javascript中获取出错代码所在文件及行数
• Javascript字符串哈希函数
• Javascript操纵Cookie
• Pre标签内文字自动换行（兼容多数主流浏览器）
• WordPress评论中保留Html代码
• 为什么IIS7/7.5的Gzip不起作用
• 使用相对Url无缝切换HTTP-HTTPS

在HTTPS的网站下，如果要访问HTTP资源，那么一般浏览器会弹出窗口询问用户是否允许加载不安全内容，云云。为了避免出现这样干扰用户的情况，所有网页下请求的资源都都必须是HTTPS资源。如果你的站点支持HTTP和HTTPS两种方式访问，而实际网站只有一份的话，这种情况下，你可以使用相对Url的方式改写网页内资源的请求Url。

省略Scheme的相对Url语法

Url相对路径我们并不陌生，下面这样的写法非常常见。

<img src='/images/myphoto.jpg' />
<img src='myphoto.jpg' />

如果该HTML代码放在http://myexample.com/myblog/index.html上，那么第一幅图片的实际完整地址就是http://myexample.com/images/myphoto.jpg，而第二幅图片的实际地址是http://myexample.com/myblog/myphoto.jpg。

但是省略Url中的Scheme部分这样的相对路径写法却比较少见。例如：

<img src='//myimagehosting.com/images/myphoto.jpg' />

这行代码如果放在HTTP的网页上，那么请求的资源就是HTTP://myimagehosting.com/images/myphoto.jpg，如果放在HTTPS上，则访问的资源就是HTTPS的。这样一来我们就无需为HTTP和HTTPS各自准备不同的网页了。

标准规范

RFC1808文档是专门针对相对URI的，其中提到，除了URI中的Scheme部分，其他部分均可以做适当的省略。也就是说，这样的写法是不符合规范。RFC1808文档是95年的时候定稿的。后来的RFC3986文档对URI做出了更为详细的规范，废弃了RFC1808对相对URI引用的建议规范（4.2 Relative Reference一节）。

其中相对部分可以有以下几种情况：

1. //主机域 绝对路径或者留空

2. 绝对路径

3. 相对路径

4. 留空

也就是说，以下几种情况均是合法的相对URI引用：

<script src='//myscript.com/script.js?cid=abcd'></script>
<script src='//myscript.com?cid=abcd'></script>
<script src='/script.js?cid=abcd'></script>
<script src='../script.js?cid=abcd'></script>

总结

以上这种省略Scheme部分的相对路径的写法在IE7、IE8、Firefox、Chrome、Opera以及Safari中均测试通过。pconline上面就有用到这样的写法。使用这个特性，可以降低代码的复杂性。Google Analytics在生成代码的时候会检测当前协议来决定加载http还是https的脚本，然后动态插入一段脚本。不知道为什么它不使用这样的方式来实现自适应。

参考文档：

Http-https transitions and relative URLs

RFC3986

——Kevin Yang

你可能对下面的文章感兴趣

• 64位系统下IIS7 ISAPI处理器加载失败
• Button标签鼠标点击事件的触发源问题
• IE中使用window.open打开新窗口时无法获取Referrer对象
• Java/Js如何使用正则表达式匹配嵌套Html标签
• Javascript 中的false,零值,null,undefined和空字符串对象
• Javascript中获取出错代码所在文件及行数
• Javascript字符串哈希函数
• Javascript操纵Cookie
• Silverlight启用Assembly Caching之后铁通用户无法访问
• 【推荐】两款HTTP流量分析工具的比较

本文主要针对URI编解码的相关问题做了介绍，对Url编码中哪些字符需要编码、为什么需要编码做了详细的说明，并对比分析了Javascript中和编解码相关的几对函数escape / unescape,encodeURI / decodeURI和encodeURIComponent / decodeURIComponent。

预备知识

   foo://example.com:8042/over/there?name=ferret#nose 
   \_/  \______________/ \________/\_________/ \__/
     |                 |                        |                    |             |
scheme     authority               path             query      fragment

URI是统一资源标识的意思，通常我们所说的Url只是URI的一种。典型Url的格式如上面所示。下面提到的Url编码，实际上应该指的是URI编码。

为什么需要Url编码

通常如果一样东西需要编码，说明这样东西并不适合传输。原因多种多样，如Size过大，包含隐私数据，对于Url来说，之所以要进行编码，是因为Url中有些字符会引起歧义。

例如Url参数字符串中使用key=value键值对这样的形式来传参，键值对之间以&符号分隔，如/s?q=abc&ie=utf-8。如果你的value字符串中包含了=或者&，那么势必会造成接收Url的服务器解析错误，因此必须将引起歧义的&和=符号进行转义，也就是对其进行编码。

又如，Url的编码格式采用的是ASCII码，而不是Unicode，这也就是说你不能在Url中包含任何非ASCII字符，例如中文。否则如果客户端浏览器和服务端浏览器支持的字符集不同的情况下，中文可能会造成问题。

Url编码的原则就是使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。

哪些字符需要编码

RFC3986文档规定，Url中只允许包含英文字母（a-zA-Z）、数字（0-9）、-_.~4个特殊字符以及所有保留字符。

RFC3986文档对Url的编解码问题做出了详细的建议，指出了哪些字符需要被编码才不会引起Url语义的转变，以及对为什么这些字符需要编码做出了相应的解释。

US-ASCII字符集中没有对应的可打印字符

Url中只允许使用可打印字符。US-ASCII码中的10-7F字节全都表示控制字符，这些字符都不能直接出现在Url中。同时，对于80-FF字节（ISO-8859-1），由于已经超出了US-ACII定义的字节范围，因此也不可以放在Url中。

保留字符

Url可以划分成若干个组件，协议、主机、路径等。有一些字符（:/?#[]@）是用作分隔不同组件的。例如:冒号用于分隔协议和主机，/用于分隔主机和路径，?用于分隔路径和查询参数，等等。还有一些字符（!$&'()*+,;=）用于在每个组件中起到分隔作用的，如=用于表示查询参数中的键值对，&符号用于分隔查询多个键值对。当组件中的普通数据包含这些特殊字符时，需要对其进行编码。

RFC3986中指定了以下字符为保留字符：

不安全字符

还有一些字符，当他们直接放在Url中的时候，可能会引起解析程序的歧义。这些字符被视为不安全字符，原因有很多。

需要注意的是，对于Url中的合法字符，编码和不编码是等价的，但是对于上面提到的这些字符，如果不经过编码，那么它们有可能会造成Url语义的不同。因此对于Url而言，只有普通英文字符和数字，特殊字符$-_.+!*'()还有保留字符，才能出现在未经编码的Url之中。其他字符均需要经过编码之后才能出现在Url中。

但是由于历史原因，目前尚存在一些不标准的编码实现。例如对于~符号，虽然RFC3986文档规定，对于波浪符号~，不需要进行Url编码，但是还是有很多老的网关或者传输代理会

如何对Url中的非法字符进行编码

Url编码通常也被称为百分号编码（Url Encoding，also known as percent-encoding），是因为它的编码方式非常简单，使用%百分号加上两位的字符——0123456789ABCDEF——代表一个字节的十六进制形式。Url编码默认使用的字符集是US-ASCII。例如a在US-ASCII码中对应的字节是0x61，那么Url编码之后得到的就是%61，我们在地址栏上输入http://g.cn/search?q=%61%62%63，实际上就等同于在google上搜索abc了。又如@符号在ASCII字符集中对应的字节为0x40，经过Url编码之后得到的是%40。

常见字符的Url编码列表：

对于非ASCII字符，需要使用ASCII字符集的超集进行编码得到相应的字节，然后对每个字节执行百分号编码。对于Unicode字符，RFC文档建议使用utf-8对其进行编码得到相应的字节，然后对每个字节执行百分号编码。如“中文”使用UTF-8字符集得到的字节为0xE4 0xB8 0xAD 0xE6 0x96 0x87，经过Url编码之后得到“%E4%B8%AD%E6%96%87”。

如果某个字节对应着ASCII字符集中的某个非保留字符，则此字节无需使用百分号表示。例如“Url编码”，使用UTF-8编码得到的字节是0x55 0x72 0x6C 0xE7 0xBC 0x96 0xE7 0xA0 0x81，由于前三个字节对应着ASCII中的非保留字符“Url”，因此这三个字节可以用非保留字符“Url”表示。最终的Url编码可以简化成“Url%E7%BC%96%E7%A0%81” ，当然，如果你用"%55%72%6C%E7%BC%96%E7%A0%81”也是可以的。

由于历史的原因，有一些Url编码实现并不完全遵循这样的原则，下面会提到。

Javascript中的escape,encodeURI和encodeURIComponent的区别

Javascript中提供了3对函数用来对Url编码以得到合法的Url，它们分别是escape / unescape,encodeURI / decodeURI和encodeURIComponent / decodeURIComponent。由于解码和编码的过程是可逆的，因此这里只解释编码的过程。

这三个编码的函数——escape，encodeURI，encodeURIComponent——都是用于将不安全不合法的Url字符转换为合法的Url字符表示，它们有以下几个不同点。

安全字符不同

下面的表格列出了这三个函数的安全字符（即函数不会对这些字符进行编码）

兼容性不同

escape函数是从Javascript1.0的时候就存在了，其他两个函数是在Javascript1.5才引入的。但是由于Javascript1.5已经非常普及了，所以实际上使用encodeURI和encodeURIComponent并不会有什么兼容性问题。

对Unicode字符的编码方式不同

这三个函数对于ASCII字符的编码方式相同，均是使用百分号+两位十六进制字符来表示。但是对于Unicode字符，escape的编码方式是%uxxxx，其中的xxxx是用来表示unicode字符的4位十六进制字符。这种方式已经被W3C废弃了。但是在ECMA-262标准中仍然保留着escape的这种编码语法。encodeURI和encodeURIComponent则使用UTF-8对非ASCII字符进行编码，然后再进行百分号编码。这是RFC推荐的。因此建议尽可能的使用这两个函数替代escape进行编码。

适用场合不同

encodeURI被用作对一个完整的URI进行编码，而encodeURIComponent被用作对URI的一个组件进行编码。

从上面提到的安全字符范围表格来看，我们会发现，encodeURIComponent编码的字符范围要比encodeURI的大。我们上面提到过，保留字符一般是用来分隔URI组件（一个URI可以被切割成多个组件，参考预备知识一节）或者子组件（如URI中查询参数的分隔符），如:号用于分隔scheme和主机，?号用于分隔主机和路径。由于encodeURI操纵的对象是一个完整的的URI，这些字符在URI中本来就有特殊用途，因此这些保留字符不会被encodeURI编码，否则意义就变了。

组件内部有自己的数据表示格式，但是这些数据内部不能包含有分隔组件的保留字符，否则就会导致整个URI中组件的分隔混乱。因此对于单个组件使用encodeURIComponent，需要编码的字符就更多了。

表单提交

当Html的表单被提交时，每个表单域都会被Url编码之后才在被发送。由于历史的原因，表单使用的Url编码实现并不符合最新的标准。例如对于空格使用的编码并不是%20，而是+号，如果表单使用的是Post方法提交的，我们可以在HTTP头中看到有一个Content-Type的header，值为application/x-www-form-urlencoded。大部分应用程序均能处理这种非标准实现的Url编码，但是在客户端Javascript中，并没有一个函数能够将+号解码成空格，只能自己写转换函数。还有，对于非ASCII字符，使用的编码字符集取决于当前文档使用的字符集。例如我们在Html头部加上

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

这样浏览器就会使用gb2312去渲染此文档（注意，当HTML文档中没有设置此meta标签，则浏览器会根据当前用户喜好去自动选择字符集，用户也可以强制当前网站使用某个指定的字符集）。当提交表单时，Url编码使用的字符集就是gb2312。

文档字符集会影响encodeURI吗？

之前在使用Aptana（为什么专指aptana下面会提到）遇到一个很迷惑的问题，就是在使用encodeURI的时候，发现它编码得到的结果和我想的很不一样。下面是我的示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    <body>
        <script type="text/javascript">
            document.write(encodeURI("中文"));
        </script>
    </body>
</html>

 

运行结果输出%E6%B6%93%EE%85%9F%E6%9E%83。显然这并不是使用UTF-8字符集进行Url编码得到的结果（在Google上搜索“中文”，Url中显示的是%E4%B8%AD%E6%96%87）。

所以我当时就很质疑，难道encodeURI还跟页面编码有关，但是我发现，正常情况下，如果你使用gb2312进行Url编码也不会得到这个结果的才是。后来终于被我发现，原来是页面文件存储使用的字符集和Meta标签中指定的字符集不一致导致的问题。Aptana的编辑器默认情况下使用UTF-8字符集。也就是说这个文件实际存储的时候使用的是UTF-8字符集。但是由于Meta标签中指定了gb2312，这个时候，浏览器就会按照gb2312去解析这个文档，那么自然在“中文”这个字符串这里就会出错，因为“中文”字符串用UTF-8编码过后得到的字节是0xE4 0xB8 0xAD 0xE6 0x96 0x87，这6个字节又被浏览器拿gb2312去解码，那么就会得到另外三个汉字“涓枃”（GBK中一个汉字占两个字节），这三个汉字在传入encodeURI函数之后得到的结果就是%E6%B6%93%EE%85%9F%E6%9E%83。因此，encodeURI使用的还是UTF-8，并不会受到页面字符集的影响。

其他和Url编码相关的问题

对于包含中文的Url的处理问题，不同浏览器有不同的表现。例如对于IE，如果你勾选了高级设置“总是以UTF-8发送Url”，那么Url中的路径部分的中文会使用UTF-8进行Url编码之后发送给服务端，而查询参数中的中文部分使用系统默认字符集进行Url编码。为了保证最大互操作性，建议所有放到Url中的组件全部显式指定某个字符集进行Url编码，而不依赖于浏览器的默认实现。

另外，很多HTTP监视工具或者浏览器地址栏等在显示Url的时候会自动将Url进行一次解码（使用UTF-8字符集），这就是为什么当你在Firefox中访问Google搜索中文的时候，地址栏显示的Url包含中文的缘故。但实际上发送给服务端的原始Url还是经过编码的。你可以在地址栏上使用Javascript访问location.href就可以看出来了。在研究Url编解码的时候千万别被这些假象给迷惑了。

——Kevin Yang

你可能对下面的文章感兴趣

• Asp.Net页面的编码问题
• Button标签鼠标点击事件的触发源问题
• Excel中使用VBA自定义函数对字符串进行Url编码（UTF-8）
• IE中使用window.open打开新窗口时无法获取Referrer对象
• Java/Js如何使用正则表达式匹配嵌套Html标签
• Javascript 中的false,零值,null,undefined和空字符串对象
• Javascript中获取出错代码所在文件及行数
• Javascript字符串哈希函数
• Javascript操纵Cookie
• 为什么IIS7/7.5的Gzip不起作用

类型检测

我们下来看看他们的类型分别是什么：

<script type="text/javascript">
    alert(typeof(false) === 'boolean');
    alert(typeof(0) === 'number');
    alert(typeof("") === 'string');
    alert(typeof(null) === 'object');
    alert(typeof undefined === 'undefined');
</script>

运行上述代码，弹出的对话框应该显示的都是true。也就是说，false是布尔类型对象，0是数字类型对象，空字符串是字符串类型对象，null是object对象，undefined类型还是undefined。

互等性

当你用==操作符将false对象和其他对象进行比较的时候，你会发现， 只有0和空字符串等于false；undefined和null对象并不等于false对象，而null和undefined是相等的

<scripttype="text/javascript">
    alert(false == undefined);
    alert(false == null);
    alert(false == 0);
    alert(false == "");
    alert(null == undefined);
</script>

我们可以把0、空字符串和false归为一类，称为"假值"；把null和undefined归为一类，称为"空值"。假值还算一个有效的对象，因此可以对其使用toString等类型相关的方法，而空值则不行。下面的代码将会抛出异常：

<scripttype="text/javascript">
    alert(false.toString());    // "false"
    alert("".charAt(0));        // ""
    alert((0).toExponential(10));  // 0.0000000e+0
    alert(undefined.toString());    // throw exception "undefined has no properties"
    alert(null.toString());             // "null has no properties"
</script>

字符串表示

虽然空值不能调用toString方法，但是却可以使用String构造函数进行构造。 像decodeURI这样的函数，如果传入的是undefined或者null，返回的是"undefined"和"null"字符串 。这点很容易用错。

<script type="text/javascript">
    alert(String(false));    // "false"
    alert(String(""));        // ""
    alert(String(0));  // 0.0000000e+0
    alert(String(undefined));    // "undefined"
    alert(String(null));             // "null"

    alert(decodeURI(undefined));// "undefined"
    alert(decodeURI(null));// "null"
</script>

假值和空值作为if条件分支

假值和空值有一个共性，那就是在 作为if的条件分支时，均被视为false ；应用"!"操作之后得到的均为true 。如下示例代码：

<scripttype="text/javascript">
    var ar = [undefined,false,0,"",null];
    for(var i = 0,len = ar.length; i < len; i++){
        if(ar[i]){
            alert("你不应该看到此对话框!");
        }
    }
</script>

这是因为，这几个对象均被视为各自类型中的无效值或空值。因此if分支中这些对象均被视为false对待。

null和undefined的区别

这两个空值的区别也是容易混淆的。

undefined和null对象无非是两个特殊对象，undefined表示无效对象，null表示空对象。如果变量显式或者隐式（由Javascript引擎进行赋值）地被赋予了undefined，那么代表了此变量未被定义，如果被赋予null值，则代表此变量被初始化为空值。

在Javascript中，变量是通过var声明，=赋值符进行定义（初始化变量所指向的对象）。当然，如果声明一个全局变量（作为window属性）可以不使用var关键字。变量可以在声明的同时进行定义。

<scripttype="text/javascript">
    var undefinedVariable,nullVariable = null;
    alert(undefinedVariable); // "undefined"
    alert(window.undefinedVariable);        // "undefined"
    alert(window.abcd);        // "undefined"
    alert(nullVariable);          // "null"
    alert(abcd);                    // throw exception "abcd is not defined"
</script>

其实， 变量如果声明了但是没有初始化，那么Javascript引擎会将此变量自动指向undefined对象。

这里需要注意，我们在上面引用window.abcd时，弹出的是undefined；而直接引用abcd变量时，却抛出了一个异常。这是由于Javascript引擎对于没有显式指定对象链的变量，会尝试从最近的作用域开始查找变量，查找失败，则退到父级作用链进行查找。如果均查找失败，则抛出"变量未定义"的异常。

这两个值在进行数字运算的时候也有不同。

<scripttype="text/javascript">
    alert(1+undefined);    // "NaN"
    alert(1+null);             // "1"
</script>

从null和undefined的意义上来说，这是很好理解的。

你可能对下面的文章感兴趣

• Button标签鼠标点击事件的触发源问题
• Document.Referrer丢失的几个原因
• IE中使用window.open打开新窗口时无法获取Referrer对象
• Java/Js如何使用正则表达式匹配嵌套Html标签
• Javascript中获取出错代码所在文件及行数
• Javascript字符串哈希函数
• Javascript操纵Cookie
• 为什么IIS7/7.5的Gzip不起作用
• 使用相对Url无缝切换HTTP-HTTPS
• 几个有趣的Javascript Hack