Fix percent encoding and minor improvements (#3632)

* fix: use uppercase hexadecimal digits

rfc3986 specific that the percent encoding should use uppercase.

Referenced Issues: #3032

* minor improvements

Highlight the javascript code.
Replace unicode space `U+00a0` with ASCII space.
Replace `Specifications` and `Compat`.

1 files changed, 15 insertions, 43 deletions

diff --git a/files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html
index dc3f9a00a2..9ae0061beb 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html
+++ b/files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html
@@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
 ---
 <div>{{jsSidebar("Objects")}}</div>
 
-<p><code><strong>encodeURIComponent()</strong></code>函数通过将一个，两个，三个或四个表示字符的UTF-8编码的转义序列替换某些字符的每个实例来编码 <a href="/zh-CN/docs/Glossary/URI">URI</a> （对于由两个“代理”字符组成的字符而言，将仅是四个转义序列） 。</p>
+<p><code><strong>encodeURIComponent()</strong></code> 函数通过将一个，两个，三个或四个表示字符的 UTF-8 编码的转义序列替换某些字符的每个实例来编码 {{glossary("URI")}}（对于由两个“代理”字符组成的字符而言，将仅是四个转义序列）。</p>
 
 <p>{{EmbedInteractiveExample("pages/js/globalprops-encodeuricomponent.html","shorter")}}</p>
 
@@ -26,18 +26,18 @@ translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
 
 <h3 id="返回值">返回值</h3>
 
-<p>原字串作为URI组成部分被被编码后的新字符串。</p>
+<p>原字串作为 URI 组成部分被被编码后的新字符串。</p>
 
 <h2 id="描述">描述</h2>
 
-<p><code>encodeURIComponent</code> 转义除了如下所示外的所有字符：</p>
+<p><code>encodeURIComponent</code> 转义除了如下所示外的所有字符：</p>
 
 <pre class="notranslate">不转义的字符：
     A-Z a-z 0-9 <code>-</code> <code>_</code> <code>.</code> <code>!</code> <code>~</code> <code>*</code> <code>'</code> <code>(</code> <code>)</code></pre>
 
-<p><code>encodeURIComponent()</code> 和 <strong><code>encodeURI</code></strong> 有以下几个不同点：</p>
+<p><code>encodeURIComponent()</code> 和 <strong><code>encodeURI</code></strong> 有以下几个不同点：</p>
 
-<pre class="notranslate">var set1 = ";,/?:@&amp;=+$";  // 保留字符
+<pre class="brush: js notranslate">var set1 = ";,/?:@&amp;=+$";  // 保留字符
 var set2 = "-_.!~*'()";   // 不转义字符
 var set3 = "#";           // 数字标志
 var set4 = "ABC abc 123"; // 字母数字字符和空格
@@ -65,13 +65,13 @@ alert(encodeURIComponent('\uDFFF')); </pre>
 
 <p>为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义。比如，一个用户可能会输入"<code>Thyme &amp;time=again</code>"作为<code>comment</code>变量的一部分。如果不使用encodeURIComponent对此内容进行转义，服务器得到的将是<code>comment=Thyme%20&amp;time=again</code>。请注意，"&amp;"符号和"="符号产生了一个新的键值对，所以服务器得到两个键值对（一个键值对是<code>comment=Thyme</code>，另一个则是<code>time=again</code>），而不是一个键值对。</p>
 
-<p>对于 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a> (POST) 这种数据方式，空格需要被替换成 '+'，所以通常使用 <code>encodeURIComponent</code> 的时候还会把 "%20" 替换为 "+"。</p>
+<p>对于 <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a> (POST) 这种数据方式，空格需要被替换成 '+'，所以通常使用 <code>encodeURIComponent</code> 的时候还会把 "%20" 替换为 "+"。</p>
 
-<p>为了更严格的遵循 <a class="external" href="http://tools.ietf.org/html/rfc3986">RFC 3986</a>（它保留 !, ', (, ), 和 *），即使这些字符并没有正式划定 URI 的用途，下面这种方式是比较安全的：</p>
+<p>为了更严格的遵循 {{rfc("3986")}}（它保留 !, ', (, ), 和 *），即使这些字符并没有正式划定 URI 的用途，下面这种方式是比较安全的：</p>
 
 <pre class="brush: js notranslate">function fixedEncodeURIComponent (str) {
   return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
-    return '%' + c.charCodeAt(0).toString(16);
+    return '%' + c.charCodeAt(0).toString(16).toUpperCase();
   });
 }</pre>
 
@@ -88,54 +88,26 @@ console.log(header);
 
 
 function encodeRFC5987ValueChars (str) {
-    return encodeURIComponent(str).
+    return encodeURIComponent(str).
         // 注意，尽管 RFC3986 保留 "!"，但 RFC5987 并没有
         // 所以我们并不需要过滤它
-        replace(/['()]/g, escape). // i.e., %27 %28 %29
-        replace(/\*/g, '%2A').
+        replace(/['()]/g, escape). // i.e., %27 %28 %29
+        replace(/\*/g, '%2A').
             // 下面的并不是 RFC5987 中 URI 编码必须的
             // 所以对于 |`^ 这3个字符我们可以稍稍提高一点可读性
-            replace(/%(?:7C|60|5E)/g, unescape);
+        replace(/%(?:7C|60|5E)/g, unescape);
 }
 </pre>
 
 <h2 id="规范">规范</h2>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">规范</th>
-   <th scope="col">状态</th>
-   <th scope="col">备注</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>初始定义</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+<div>{{Specifications}}</div>
 
 <h2 id="浏览器兼容性">浏览器兼容性</h2>
 
-<p>{{Compat("javascript.builtins.encodeURIComponent")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="相关链接">相关链接</h2>
+<h2 id="参见">参见</h2>
 
 <ul>
  <li>{{jsxref("decodeURI")}}</li>