Question

我有一个带有文本输入且带有 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>

这是我的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>

如果用户输入 ACME Co.，纽约，纽约，则生成的网址为

http://example.com?place=ACME Co.％2CNew York％2C NY

看到空格未编码？我甚至试图添加place = place.replace(/\s/g, '+')，但在编码后似乎不起作用。我究竟做错了什么？谢谢你的帮助。

更新

归咎于Firefox！发现这些空间已被正确编码，但 Firefox 并未显示已编码的空格，即使它们是。在 Internet Explorer 10 和 Google Chrome 中进行测试，它们都以编码格式显示空格。感谢Adam为小提琴http://jsfiddle.net/VYDcv/

Answer 1

我不确定你看到了什么，但是encodeURIComponent确实逃脱了空格字符。

根据您的代码http://jsfiddle.net/VYDcv/

查看此小提琴

如果您输入“Hello world”，它会以%20替换为空格提醒您。

提醒结果：http://example.com?place=Hello%20World

当您设置浏览器的document.location.href时，它可能会将%20更改回地址栏中的某个空格，但它会被javascript转义。

Answer 2

这对我来说是一个简单的解决方案：

<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>

Javascript encodeURIComponent（）不编码空格

更新

2 个答案: