[总结]JS中三种常用的字符串编码与转码

因为编码的不同，中文或符号等特殊字符往往会转换成编码的形式，这其中有URL编码Unicode编码HTML编码等等多种形式。由于编码后的字符串不容易辨识，所以经常不知道怎么转换。岩兔站最近就遇到过很多种转换，这里汇总整理一下。

注：以下所有编码转换均以JS代码为例

URL编码

URL编码常用于url值传递过程中避免歧义，比如：

//原文：
[总结]JS中三种常用的字符串编码与转码

//转换：
encodeURIComponent("https://bak.yantuz.cn:8000/525.html")
//输出
https%3A%2F%2Fyantuz.cn%2F525.html
//逆转换：
decodeURIComponent("https%3A%2F%2Fyantuz.cn%2F525.html")
//输出
https://bak.yantuz.cn:8000/525.html

此方法也适用于中文，比如岩兔站对应编码为%E5%B2%A9%E5%85%94%E7%AB%99

可见URL编码即是%和两个16进制数字组成，一个中文则会占用三组。

Unicode编码

原文：岩兔站

转码方法：

function encodeUnicode(str) {
  var res = [];
  for (var i = 0; i < str.length; i++) {
      res[i] = ( "00" + str.charCodeAt(i).toString(16) ).slice(-4);
  }
  return "\\u" + res.join("\\u");
}

输出：\u5ca9\u5154\u7ad9

解码：

function decodeUnicode(str) {
   str = str.replace(/\\/g, "%");
   return unescape(str);
}

输出：岩兔站

unicode编码特征为\u加上4个16进制数组成，转换行程也很简单，将\直接替换为%即可用unescape()正常输出。

除\u5ca9\u5154\u7ad9这种形式之外岩兔站还见过岩兔站，这种形式大同小异，转换时只需将&#x替换为%u即可用unescape()正常输出。

HTML编码

HTML编码经常用于页面防注入，如果用户输入HTML编码，则将HTML编码转换成编码存入数据库，再次输出时，不会以HTML形式输出，而是直接显示文本，从而防止注入。

HTML编码主要针对的的符号有大于小于号，斜杠，空格，单双引号和&符号。

源文：<a href="https://bak.yantuz.cn:8000/">岩兔站</a>

编码：

function htmlEncodeByRegExp(str){  
    var s = "";
    if(str.length == 0)
        return "";
    s = str.replace(/&/g,"&");
    s = s.replace(/</g,"&lt;");
    s = s.replace(/>/g,"&gt;");
    s = s.replace(/ /g,"&nbsp;");
    s = s.replace(/\'/g,"&#39;");
    s = s.replace(/\"/g,"&quot;");
    return s;  
}

输出：<a href="https://bak.yantuz.cn:8000/">岩兔站</a>

解码：

function htmlEncodeByRegExp(str){  
    var s = "";
    if(str.length == 0)
        return "";
    s = str.replace(/&/g,"&");
    s = s.replace(/&lt;/g,"<");
    s = s.replace(/&gt;/g,">");
    s = s.replace(/&nbsp;/g," ");
    s = s.replace(/&#39;/g,"\'");
    s = s.replace(/&quot;/g,"\"");
    return s;  
}

输出：<a href="https://bak.yantuz.cn:8000/">岩兔站</a>

HTML编码的形式为&打头;结尾的，由于只对几个特殊符号编码，所以可以用正则依次将这些符号进行编码和转码。

总结

岩兔站将最近碰到的编码问题总结了一下，希望能帮到大家。总结的不全，不对，不完善的，各位留言补充。