javaScript中url中文参数(encodeURI函数和encodeURIComponent函数)

你的名字 2022-11-29 03:06 118阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>url中文参数</title>
    <link rel="stylesheet" type="text/css" href="../css/body.css" />
    <link rel="stylesheet" type="text/css" href="../css/mark.css" />
    <link rel="stylesheet" type="text/css" href="../css/input2.css" />
    <link rel="stylesheet" type="text/css" href="../css/console.css" />
    </head>
    <body>
    <h1>url中文参数</h1>
    <input type="button" id="input1" value="url中文参数(encodeURI函数和encodeURIComponent函数)" />
    <br />
    </body>
    <script type="text/javascript">
    document.getElementById('input1').onclick = function() {
    //参考文章https://www.cnblogs.com/artwl/archive/2012/03/07/2382848.html
    
    //encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
    //encodeURI就是为这个而设计的。encodeURI不对URI中的特殊字符进行编码，如冒号(:)、斜杠(/)。
    	console.log('中国', encodeURI('中国'), encodeURIComponent('中国'));
    	console.log('中 国', encodeURI('中 国'), encodeURIComponent('中 国'));
    	console.log('中#国', encodeURI('中#国'), encodeURIComponent('中#国'));
    	console.log('中?国', encodeURI('中?国'), encodeURIComponent('中?国'));
    	console.log('中@国', encodeURI('中@国'), encodeURIComponent('中@国'));
    	console.log('中/国', encodeURI('中/国'), encodeURIComponent('中/国'));
    	console.log('中&国', encodeURI('中&国'), encodeURIComponent('中&国'));
    	console.log('江西省赣州市于都县', encodeURI('江西省赣州市于都县'));
    	console.log('https://blog.csdn.net/czh500/hello hi test.html');
    //encodeURI不对URI中的特殊字符进行编码，如冒号(:)、斜杠(/),仅仅把空格替换成了20%
    //https://blog.csdn.net/czh500/hello%20hi%20test.html
    	console.log(encodeURI('https://blog.csdn.net/czh500/hello hi test.html'));
    	
    var param = '于都县';
    var url = "https://blog.csdn.net/czh500/?key=" + encodeURIComponent(param) + "&page=1";
    console.log(url);
    var url2 = "https://blog.csdn.net/czh500/?key=" + encodeURI(param) + "&page=1";
    console.log(url2);
    
    
    //encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z
    //encodeURIComponent方法对中文，空格，井号(#)，斜线(/)，冒号(:)都进行了编码
    var p = 'http://www.baidu.com';
    var url3 = 'https://blog.csdn.net/czh500/?url=' + p;
    console.log(url3);
    console.log(encodeURI(url3));
    console.log(encodeURIComponent(url3));
    
    console.log(encodeURI(p));
    console.log(encodeURIComponent(p));
    // window.location = url3;
    // window.location = encodeURI(url3);
    // window.location = encodeURIComponent(url3);
    // window.location = p;
    // window.location = encodeURI(p);
    // window.location = encodeURIComponent(p);
    console.log('江西于都县', encodeURI('江西于都县'), encodeURIComponent('江西于都县'));
    console.log('http://www.baidu.com');
    console.log(encodeURI('http://www.baidu.com'));
    console.log(encodeURIComponent('http://www.baidu.com'));
    }
    </script>
    </html>

其实，主要是讲了encodeURI函数和encodeURIComponent函数

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221124/23684ac50091442882e3ef456242e6e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221124/0f3696a41f844c38b73096246469c136.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200818230825114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: /images/20221124/fcf2acfc19d5440a8e77c091f9b8d416.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20221124/73074fa2b1f34066bc9c56711c1ec598.png