一个乐于分享的博客
关注互联网折腾服务器分享码农的日常

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

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

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

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

URL编码

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

//原文:
https://yantuz.cn/525.html
//转换:
encodeURIComponent("https://yantuz.cn/525.html")
//输出
https%3A%2F%2Fyantuz.cn%2F525.html
//逆转换:
decodeURIComponent("https%3A%2F%2Fyantuz.cn%2F525.html")
//输出
https://yantuz.cn/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这种形式之外岩兔站还见过&#x5ca9;&#x5154;&#x7ad9;,这种形式大同小异,转换时只需将&#x替换为%u即可用unescape()正常输出。

HTML编码

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

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

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

编码:

function htmlEncodeByRegExp(str){  
    var s = "";
    if(str.length == 0)
        return "";
    s = str.replace(/&/g,"&amp;");
    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;  
}

输出:&lt;a&nbsp;href=&quot;https://yantuz.cn/&quot;&gt;岩兔站&lt;/a&gt;

解码:

function htmlEncodeByRegExp(str){  
    var s = "";
    if(str.length == 0)
        return "";
    s = str.replace(/&amp;/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://yantuz.cn/">岩兔站</a>

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

总结

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

转载务必注明出处:岩兔站 » [总结]JS中三种常用的字符串编码与转码
赞 (1) or 打赏

讨论区 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址