URL引數獲取/轉碼

草漾發表於2018-10-20

JS中對URL進行轉碼與解碼

1.escape 和 unescape

escape()不能直接用於URL編碼，它的真正作用是返回一個字元的Unicode編碼值。
採用unicode字符集對指定的字串除0-255以外進行編碼。所有的空格符、標點符號、特殊字元以及更多有聯絡非ASCII字元都將被轉化成%xx格式的字元編碼（xx等於該字元在字符集表裡面的編碼的16進位制數字）。比如，空格符對應的編碼是%20。
escape不編碼字元有69個：*，+，-，.，/，@，_，0-9，a-z，A-Z。

escape()函式用於js對字串進行編碼，不常用。

var url = "http://localhost:8080/pro?a=1&b=張三&c=aaa";

escape(url) =>
http%3A//localhost%3A8080/pro%3Fa%3D1%26b%3D%u5F20%u4E09%26c%3Daaa

2.encodeURI 和 decodeURI

把URI字串採用UTF-8編碼格式轉化成escape各式的字串。
encodeURI不編碼字元有82個：!，#，$，&，`，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z

encodeURI()用於整個url編碼

var url = "http://localhost:8080/pro?a=1&b=張三&c=aaa";

encodeURI(url)  =>   
http://localhost:8080/pro?a=1&b=%E5%BC%A0%E4%B8%89&c=aaa

3.encodeURIComponent 和 decodeURIComponent

與encodeURI()的區別是，它用於對URL的組成部分進行個別編碼，而不用於對整個URL進行編碼。

因此，”; / ? : @ & = + $ , #”，這些在encodeURI()中不被編碼的符號，在encodeURIComponent()中統統會被編碼。至於具體的編碼方法，兩者是一樣。把URI字串採用UTF-8編碼格式轉化成escape格式的字串。

encodeURIComponent() 用於引數的傳遞，引數包含特殊字元可能會造成間斷。

例1

var url = "http://localhost:8080/pro?a=1&b=張三&c=aaa";

encodeURIComponent(url) =>
http%3A%2F%2Flocalhost%3A8080%2Fpro%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26c%3Daaa

例2

var url = "http://localhost:8080/pp?a=1&b="+ paramUrl,
var paramUrl = "http://localhost:8080/aa?a=1&b=2&c=3";

//應該使用encodeURIComponent()進行轉碼　　
encodeURIComponent(paramUrl) => 
http://localhost:8080/pp?a=1&b=http%3A%2F%2Flocalhost%3A8080%2Faa%3Fa%3D1%26b%3D2%23%26c%3D3

4.url引數轉換

4.1獲取URL中的引數，轉換為物件格式

var parseQueryString = function (url) {
    var reg_url = /^[^?]+?([wW]+)$/,
            reg_para = /([^&=]+)=([wW]*?)(&|$)/g, //g is very important
            arr_url = reg_url.exec(url),
            ret = {};
    if (arr_url && arr_url[1]) {
        var str_para = arr_url[1], result;
        while ((result = reg_para.exec(str_para)) != null) {
            ret[result[1]] = result[2];
        }
    }
    return ret;
}

var url = "key0=0&key1=1&key2=&key3=http://www.g.cn?a=1&&b=2";
var obj = parseQueryString(url);

console.dir(obj);

4.2 獲取URL中引數的值

function GetUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //構造一個含有目標引數的正規表示式物件
    var r = window.location.search.substr(1).match(reg); //匹配目標引數
    if (r != null) return unescape(r[2]);
    return null; //返回引數值
}

參考:

http://www.cnblogs.com/yeminglong/p/5881476.html
http://www.cnblogs.com/lvmylife/p/7595036.html

相關文章