javascript URL 编码与解码

Eminjannn 发布于2019-08-23 18:37 / 3500人阅读

摘要：对应对应这里的编码你可以用自带的编码函数，当然你也可以按照规则和标准自行开发编码函数。实战应用举例说了这么多可能很多人就问了，自带的编码与解码函数在实际中是如何应用的，为什么需要两个不同的编码与解码函数。

编码与解码函数 编码函数

encodeURI
encodeURIComponent

解码函数

decodeURI
decodeURIComponent

编码规则相同点

会替换所有的字符，但不包括以下字符
非转义的字符：字母数字 - _ . ! ~ * " ( )

编码规则不同点

encodeURI 还会有一些不编码的字符，如下
保留字符：; , / ? : @ & = + $
数字符号：#

解码规则

解码只会解码对应规则编码出来的字符串，若不会解码出乱码。
encodeURI ->(对应) decodeURI
encodeURIComponent -> (对应) decodeURIComponent
这里的编码你可以用JavaScript自带的编码函数，当然你也可以按照规则和标准自行开发编码函数。

实战应用举例

说了这么多可能很多人就问了，JavaScript自带的编码与解码函数在实际中是如何应用的，为什么需要两个不同的编码与解码函数。

const url = "https://auto.3g.163.com/";

// 字符串编码
const params = {
  title: "今天去干什么？& 今天去哪里浪？",
  desc: "去哪里都行 & 哪里都不去！！！"
};

function compURL(url, params) {
  let result = encodeURI(url) + "?";
  for (let key in params) {
    result +=
      encodeURIComponent(key) + "=" + encodeURIComponent(params[key]) + "&";
  } //这样即使带有一些符号 ？ & 等也可以方便的从url 中获取参数
  return result.slice(0, -1);
}

const urlCompd = compURL(url, params);

console.log(urlCompd);

// 字符窜解码获取数据

function parseURL(url) {
  const result = {
    sourceUrl: "",
    params: {}
  };
  result.sourceUrl = decodeURI(url.split("?")[0]);
  const paramStr = url.split("?")[1];
  const paramArr = paramStr.split("&");
  paramArr.forEach(item => {
    const itemArr = item.split("=");
    const key = decodeURIComponent(itemArr[0]),
      value = decodeURIComponent(itemArr[1]);
    result.params[key] = value;
  });
  return result;
}

const paramsData = parseURL(urlCompd);
console.log(paramsData);

在线代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105556.html

JS基础篇--JS对url进行编码和解码（三种方式区别）

摘要：它的具体规则是，除了字母数字标点符号以外，对其他所有字符进行编码。对应的解码函数是。其次，不对编码。与的区别是，它用于对的组成部分进行个别编码，而不用于对整个进行编码。因此，，这些在中不被编码的符号，在中统统会被编码。 Javascript语言用于编码的函数，一共有三个，最古老的一个就是escape()。虽然这个函数现在已经不提倡使用了，但是由于历史原因，很多地方还在使用它，所以有必要...

xiaoxiaozi 2019-08-21 12:00 评论0 收藏0
JS对url进行编码和解码（三种方式）

摘要：对应的解码函数是。它用于对的组成部分进行个别编码，除了常见的符号以外，对其他一些在网址中有特殊含义的符号，也不进行编码。元黑糖颗粒固饮编码解码元黑糖颗粒固饮 escape 和 unescape escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值它的具体规则是，除了ASCII字母、数字、标点符号@ * _ + - . /以外，对其他所有字符进行编码...

lx1036 2019-08-26 11:41 评论0 收藏0
JavaScript中三种GBK/GB2312编解码方案对比

摘要：笔者在编码详解与中编码实践一文中介绍了中编码相关的基础知识，其中没有介绍纯粹的编解码方案，笔者后来根据网上的代码完善了下这个库，并且对中三种不同的编解码方案进行了比较。 Isomorphic Urlencode Here is English Version For README 笔者在URL编码详解与DOM中GBK编码实践一文中介绍了JavaScript中URL编码相关的基础知识，其...

BlackFlagBin 2019-08-20 11:02 评论0 收藏0
前端开发中的字符编码

摘要：当然，也可自己写一个转换函数，按照一定规则便行为编码的字节，如下例中国结果中国结果结果通过简单的函数，就可以完成编码到编码的转换，进而完成宽字节字符到编码的转换。前端开发过程中会接触各种各样的编码，比较常见的主要是 UTF-8 和 HTML 实体编码，但是 web 前端的世界却不止这两种编码，而且编码的选择也会造成一定的问题，如前后端开发过程中不同编码的兼容、多字节编码可能会造成的 ...

Rindia 2019-08-19 18:16 评论0 收藏0