16

我有一个带有 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>

这是我的 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.,New York, NY，生成的 url 是

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

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

更新：

怪火狐！发现空格已正确编码，但Firefox未将空格显示为已编码，即使它们已编码。在Internet Explorer 10和Google Chrome中测试，它们都以编码格式显示空间。感谢亚当的小提琴http://jsfiddle.net/VYDcv/

4

2 回答 2

11

我不确定您看到的是什么，但encodeURIComponent确实会转义空格字符。

根据您的代码查看此小提琴：http: //jsfiddle.net/VYDcv/

如果你输入“Hello world”，它会用 . 替换空格来提醒你%20。

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

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

于 2013-05-16T22:24:04.930 回答
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>
于 2013-05-16T22:24:52.720 回答