在生成的 URL 中将 + 替换为 %20答案

【问题标题】：Replace + with %20 in URL generated在生成的 URL 中将 + 替换为 %20
【发布时间】：2014-08-21 08:01:37
【问题描述】：

我正在使用下面的 HTML 代码将用户连接到聊天，但我需要生成的 URL 中的任何空格变为 %20 而不是 +，因为 + 是昵称中的有效字符，所以输入@的人输入中的 987654321@ 将在聊天中变为 Paul+John，因此需要 %20，因为这被识别为空格。

是否可以使用 JavaScript/jQuery 和一些示例来做到这一点？

HTML

<form class="form-horizontal" role="form" action="client/htmlchat/123flashchat.html">
<fieldset>
  <input type="hidden" name="init_room" value="1">

  <!-- Text input-->
  <div class="form-group">
    <label class="col-sm-2 control-label" for="nickname">Nickname</label>
    <div class="col-sm-10">
      <input id="nickname" name="init_user" type="text" placeholder="Nickname" class="form-control" required="required">
    </div>
  </div>

  <!-- Multiple Radios -->
  <div class="form-group">
    <label class="col-sm-2 control-label" for="gender">Gender</label>
    <div class="col-sm-10">
    <label class="radio" for="gender-0">
      <input type="radio" name="init_gender" id="gender-0" value="2" required="required">
      Female
      </label>
    <label class="radio" for="gender-1">
      <input type="radio" name="init_gender" id="gender-1" value="1" required="required">
      Male
    </label>
    </div>
  </div>

  <!-- Button -->
  <div class="form-group">
    <label class="col-sm-2 control-label" for="button"></label>
    <div class="col-sm-offset-2 col-sm-10">
      <button id="button" class="btn btn-lg btn-primary" type="submit">Enter</button>
    </div>
  </div>

</fieldset>
</form>

提前致谢，

保罗

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

尝试使用encodeURIComponent(str) 函数。

var test = "Paul John";
var result = encodeURIComponent(test );
//result: "Paul%20John"

要在提交表单之前替换内容，请使用此 jquery 代码：

$(document).ready(function(){
    $('.form-horizontal').submit(function(){
        var encoded = encodeURIComponent($('#nickname').val().trim());
        $('#nickname').val(encoded );
    });
});

【讨论】：

嗨。感谢您的回答。我怎样才能在这个表单中使用它？
嗨。再次感谢。我在输入中放了一个空格，最后得到%2520?
那么然后在获取值的时候使用trim方法。我会再次更新。
对不起我还是不明白，即使现在我使用trim()作为你的答案，我仍然得到一个像client/htmlchat/123flashchat.html?init_room=1&init_user=John%2520Doe&init_gender=1这样的URL。
那不是你想要生成的吗？

【解决方案2】：

发生这种情况是因为在使用 application/x-www-form-urlencoded 内容时，“+”表示空格。由于您实际上是在提交表单并因此发送表单 URL 数据，这是正确的。如果您在数据中输入“+”，它也应该被编码（到“%2B”），以便您将其与作为表单编码的一部分添加的任何“+”字符区分开来

【讨论】：