Javascript数组到URL编码的字符串

Question

我正在处理网站的数据层，我需要传递一个字符串，其中包含来自网站后端的值。

这是我需要传递的变量的结构：

＆GT;编码前：

  

的transaction_id = 0815/2009; transaction_cid = 54AB; ITEM_ID = 402163045080; item_va   略= 25.20; item_quantity = 1;   的transaction_id = 0815/2009; transaction_cid = 54AB; ITEM_ID = 402163045080; item_va   略= 25.20; item_quantity = 1;

＆GT;编码后：

  

的transaction_id％3D0815％2F2009％3Btransaction_cid％3D54AB％3Bitem_id％3D40216304   5080％3Bitem_value％3D25.20％3Bitem_quantity％3D1％3Bitem_id％3D847163029054％3Bi   tem_value％3D16.81％3Bitem_quantity％3D2

我设法用这种形式创建一个包含必要数据的数组：

  

＆＃39; [{＆＃34; TRANSACTION_ID＆＃34;：＆＃34; 233684＆＃34;＆＃34; transaction_cid＆＃34;：＆＃34; d2871c13c507583048d8ecf4a16f94c0＆＃34;＆＃34;我                   tem_id＆＃34;：＆＃34; 3524＆＃34;＆＃34; ITEM_VALUE＆＃34;：＆＃34; 4915.13＆＃34;＆＃34; item_quantity＆＃34;：＆＃34; 1＆＃34; }]＆＃39;，

但我需要的是url编码字符串中数组的所有这些元素。

我没有想法，因为我尝试的所有东西似乎都不起作用。

使用JSON.stringify保持＆＃34;：＆＃34;而＃34;＆＃34;＆＃34;，使用alert（）或join也会保留＆＃34;：＆＃34;并且不具备表现力。

编辑：

示例数组：

arr : {key1: 'a', key2:'b', key3:'c'}

非编码结果：

str : 'key1=a;key2=b;key3=c'

期望的结果：

str：＆＃39; key1％3Da％3Bkey2％3Db％3Bkey3％3Dc＆＃39;

Answer 1

将JSON.stringify替换为encodeURIComponent：

因此，在上面的示例中，您有一个包含一个对象的数组。为了解析这个问题，我会这样做：

var params = elementArray[0];
var encoded_params = [];
for (var prop in params){
    if (params.hasOwnProperty(prop)) {            
        encoded_params.push(prop+ "=" +encodeURIComponent(params[prop]));
    }
}
var query_string = "?" + encoded_params.join("&");

注意： 我希望从一开始就解决这个问题，用你原来的字符串：

  

transaction_id = 0815/2009; transaction_cid = 54AB; item_id = 402163045080; item_va lue = 25.20; item_quantity = 1;

// break string into components by splitting on `;`:
var data_as_str = "transaction_id=0815/2009;transaction_cid=54AB;item_id=402163045080;item_va lue=25.20;item_quantity=1;";
var raw_params = data_as_str.split(";");

// create a new array where we will store our encoded params
var encoded_params = [];

// traverse the split string components
for (var i=0; i<raw_params.length; i++){
    var element = raw_params[i];

     // check that the element exists 
     // for example, the trailing `;` will create an empty element
     // which we do not want to include
    if (!element){
        continue;
    }

    // split on `=` to get key, value
    var key = element.split("=")[0];
    var value = encodeURIComponent(element.split("=")[1]);

    // build a new param string and push to clean array
    encoded_params.push(key+ "=" +value);
}

// after loop has completed, join elements 
// in clean array to complete query string
var query_string = "?" + encoded_params.join("&");
alert(query_string);

Answer 2

如果您使用的是jQuery，则可以使用$.param()。如果不这样做，则可以遍历Object的键并格式化QueryString。在示例中，我使用Object.keys()来获取键数组Array.map()以循环键并返回一个新数组，即ES6 template String。使用encodeURIComponent，您将获得编码的QueryString。

var obj = {key1: 'a', key2:'b', key3:'c'};

console.log(encodeURIComponent($.param(obj)));

console.log(encodeURIComponent(Object.keys(obj).map(key=>`${key}=${obj[key]}`).join('&')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

正如另一个答案中所指出的，你可以从第一个字符串中做到这一点：

var str = "transaction_id=0815/2009;transaction_cid=54AB;item_id=402163045080;item_va lue=25.20;item_quantity=1;transaction_id=0815/2009;transaction_cid=54AB;item_id=402163045080;item_value=25.20;item_quantity=1;";

console.log(encodeURIComponent(str.split(';').filter(a=>a).join('&')));