javascript - 将生成的 URL 中的 + 替换为 %20

Question

我正在使用下面的 HTML 代码将用户连接到聊天，但我需要生成的 URL 中的任何空格都变为 %20 而不是 +，因为 + 是昵称中的有效字符，因此输入 Paul John 的人输入中的内容将变为 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>

提前致谢，

保罗

Answer 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 );
    });
});