Web 相关编码和转义

常用编码

  • URL 编码
  • HTML 编码
  • JS 编码

URL编码

一般来说,URL只能使用英文字母(a-zA-Z)、数字(0-9)、-_.~4个特殊字符以及所有(;,/?:@&=+$#)保留字符。

意味着如果使用了一些其他文字和特殊字符,则需要通过编码的方式来进行表示,如:

// 使用了汉字
var url1 = 'http://www.帅.com';

另外我们知道在 URL 中传参是通过键值对形式进行的,格式上是以&= 为特征标识进行解析,如果在键或者值的内容中包含一些特殊符号,就会造成解析错误,如下所示:

// 键为汉字
var url2 = 'http://www.a.com?我=1';
// 值的内容为特殊符号
var url3 = 'http://a.com?key=?&';

对于上面的情况如果我们要正常解析,则需要进行编码,需要用不会造成歧义的符号代替有歧义的符号。

我们可以通过使用系统原生实现的 API 来对字符进行 URL 编码如:

encodeURI

encodeURI 是用来编码 URI 的,最常见的就是编码一个 URL。encodeURI 会将需要编码的字符转换为 UTF-8 的格式。对于保留字符(;,/?:@&=+$#),以及非转义字符(字母数字以及 -_.!~*'())不会进行转义。

例如之前 URL 中包含中文,我们可以使用 encodeURI:

encodeURI('http://www.帅.com'); // http://www.%E5%B8%85.com
encodeURI('http://www.a.com?我=1');// "http://www.a.com?%E6%88%91=1"

在这里,%E5%B8%85 就是 的 URL 编码,%E6%88%91 即为 的 URL 编码。然后由于 encodeURI 不转义&?=。所以对于 URL 参数的值是无法转义的,如下面的例子:

// 值的内容为特殊符号
encodeURI('http://a.com?key=?&'); // "http://a.com?key=?&"

此时我们就需要使用 encodeURIComponent 来解决。

encodeURIComponent

顾名思义,encodeURIComponent 是用来编码 URI 参数的。它会跳过非转义字符(字母数字以及-_.!~*'())。但会转义 URL的 保留字符(;,/?:@&=+$#)。通常来说我们会 encodeURI 结合 encodeURIComponent 来使用,如下所示:

// "http://a.com?a=%3F%26"
encodeURI('http://a.com') + '?a=' + encodeURIComponent('?&');

其中 %3F%26 分别为 ?& 的 URL 编码。需注意的是由于 encodeURIComponent 会编码所有的 URL 保留字,所以不适合编码 URL,例如:

// "http%3A%2F%2Fa.com%3Fkey%3D%3F%26"
encodeURIComponent('http://a.com?key=?&');

上面的 http%3A%2F%2Fa.com%3Fkey%3D%3F%26 在地址栏会被解析为一个普通的字符串而不是 URL。

URL 解码

有了 URL 编码,相应的会有解码机制。比如上面对应的 3个 encode 的API对应的解码 API 如下:

HTML 编码

在 HTML 中,某些字符是预留的,比如不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。当然还另一个重要原因,有些字符在 ASCII 字符集中没有定义,因此需要使用字符实体来表示,比如中文。

HTML 编码分为:

  • HTML 十六进制编码 &#xH;
  • HTML 十进制编码 &#D;
  • HTML 实体编码 &lt;

在 HTML 进制编码中其中的数字则是对应字符的 unicode 字符编码。
比如单引号的 unicode 字符编码是27,则单引号可以被编码为&#x27;

HTML 实体编码

通常来说,在业务中我们用到更多的是 HTML 的实体编码。常用的 HTML 实体编码函数如下所示:

/**
 * 转义 HTML 特殊字符
 * @param {String} str
 */
function htmlEncode(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

更完整的转义列表见这里

Javascript 转义

JavaScript 中有些字符有特殊用途,如果字符串中想使用这些字符原来的含义,需要使用反斜杠对这些特殊符号进行转义。我们称之为 Javascript编码。一般有以下几类:

  • 三个八进制数字,如果不够个数,前面补0,例如 “e” 编码为“\145”
  • 两个十六进制数字,如果不够个数,前面补0,例如 “e” 编码为“\x65”
  • 四个十六进制数字,如果不够个数,前面补0,例如 “e” 编码为“\u0065”
  • 对于一些控制字符,使用特殊的C类型的转义风格(例如\n和\r)

如下面所示,双引号用于标注字符串,然而在字符串中带了双引号,就会发生歧义:

var str = "Hello"";

于是我们需要对字符串内的双引号进行转义,也就是加上反斜杠,告诉脚本引擎要区分对待:

var str = "Hello\"";

更多阅读

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,172评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,346评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,788评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,299评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,409评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,467评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,476评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,262评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,699评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,994评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,167评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,499评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,149评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,387评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,028评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,055评论 2 352

推荐阅读更多精彩内容

  • 前一阵做活动有一个分享文案总是分享错误,排除法之后发现是一个字符的编解码问题。好几次遇到这种问题都是懵过去的,这次...
    lzxxx阅读 696评论 1 1
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,046评论 0 1
  • 我是郑小敏,我是樊登读书会漳州分会的首席书童,同时我也是两个孩子的妈妈。 记得刚刚去面试的时候,是漳州分会的会长接...
    累了谁疼惜阅读 206评论 0 0
  • 在公众号上看到了一句话,男女之间能成为密友的,大部分总是带着爱的。 总是不知道会遇见什么样子的人 身边的朋友亲戚都...
    最初的最后_阅读 240评论 0 0
  • 经年之前,她还不知道什么是真实的世界。 不久之后,她从一场美梦中醒来,到达现实。
    我爱吃鱼吃火锅阅读 153评论 0 0