Javascript 实现HTML页面的Encode/Escape

Posted on

概述

HTML/URL中有2个概念，encode和escape，乍一看差不多, 都是用于处理特殊字符（保留字符），其实用于不同场合：

  • encode： 主要针对URL地址中特殊字符（保留字符）的处理， 如针对 &, ?, =等字符
  • escape: 主要针对页面中的特殊字符（保留字符）的处理， 如针对 <, >, ", '字符

Escape

Escape/unescape 没有现成的函数，只能自己实现。实现也很简单，就是对字符串全文替换。

1
2
3
4
5
6
7
8
function escapeHTML(str) {
    return str.replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}

Encode/Decode

Javascript 中，针对URL的处理是有通用方法的，encodeURIComponent 和encodeURI，酌情选择所需的函数。

  • encodeURI方法不会对下列字符编码: ASCII字母 数字 ~!@#$&*()=:/,;?+’
  • encodeURIComponent方法不会对下列字符编码: ASCII字母 数字 ~!*()’
  • 所以encodeURIComponent比encodeURI编码的范围更大。实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。