Html Javascript encodeURIComponent() 不编码空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16598382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript encodeURIComponent() not encoding spaces
提问by Moses Machua
I have a form with a text input with an id txtPlacethat users will be entering input into that will be passed to the server as a url query. I'm trying to use encodeURIComponent(), but it is not encoding spaces. Here's my simplified code
我有一个带有 id txtPlace文本输入的表单，用户将在其中输入输入，该输入将作为 url 查询传递到服务器。我正在尝试使用 encodeURIComponent()，但它不是编码空格。这是我的简化代码
<div class="searchBoxRow">
<input type="text" id="txtPlace" size="55" placeholder="Enter place to search"/>
<a href="#" id="btnSearch">Search</a>
</div>
Here is my javascript
这是我的 javascript
<script type="text/javascript">
$(function () {
$('#btnSearch').on('click', function (e) {
e.preventDefault;
var place = encodeURIComponent($('#txtPlace').val());
var url = "http://example.com?place=" + place;
document.location.href = url;
});
});
</script>
If a user types ACME Co.,New York, NY, the generated url is
如果用户输入ACME Co.,New York, NY，则生成的 url 为
http://example.com?place=ACMECo.%2CNew York%2C NY
http://example.com?place=ACMECo.%2CNew York%2C NY
See the spaces are unencoded? I even tried to add place = place.replace(/\s/g, '+')but that doesn't seem to work after encoding. What am I doing wrong? Thanks for your assistance.
看到空格未编码吗？我什至尝试添加，place = place.replace(/\s/g, '+')但在编码后似乎不起作用。我究竟做错了什么？谢谢你的协助。
Update:
更新：
Blame Firefox!Found out that the spaces were being properly encoded but Firefoxis not displaying spaces as encoded even though they are. Tested in Internet Explorer 10and Google Chromeand they both display spaces in their encoded format. Thanks Adam for the fiddle http://jsfiddle.net/VYDcv/
责备火狐！发现空格被正确编码，但Firefox没有将空格显示为编码，即使它们是。在Internet Explorer 10和Google Chrome 中测试，它们都以编码格式显示空格。感谢亚当的小提琴http://jsfiddle.net/VYDcv/
采纳答案by Adam Plocher
I'm not sure what you're seeing, but encodeURIComponentdoes escape space characters.
我不确定您看到的是什么，但encodeURIComponent确实会转义空格字符。
See this fiddle, based on your code: http://jsfiddle.net/VYDcv/
根据您的代码查看此小提琴：http: //jsfiddle.net/VYDcv/
If you type "Hello world", it will alert you with the space replaced by a %20.
如果您输入“Hello world”，它会提醒您空格替换为%20。
Alert results: http://example.com?place=Hello%20World
警报结果： http://example.com?place=Hello%20World
When you set your browser's document.location.href, it may be changing the %20back to a space in the address bar, but it IS being escaped by the javascript.
当您设置浏览器的 时document.location.href，它可能会将%20地址栏中的返回更改为空格，但它会被 javascript 转义。
回答by Mirko Cianfarani
This is a simple solution for me:
这对我来说是一个简单的解决方案：
<script type="text/javascript">
$(function () {
$('#btnSearch').on('click', function (e) {
e.preventDefault;
var place = encodeURIComponent($('#txtPlace').val());
place=place.replace(" ", "+"); //or .replace(" ", "%20")
var url = "http://example.com?place=" + place;
document.location.href = url;
});
});
</script>
