如何在搜索表单提交文本添加至URL时保留#!、?等特殊字符

我之前也碰到过一模一样的需求——要把搜索内容直接加到带#!的URL里，还得让#!、?这些特殊字符不被转义。问题根源就在表单默认的GET提交行为上：浏览器会自动对URL参数做URL编码，把#转成%23、!转成%21、?转成%3F，完全不符合我们的要求。要解决这个，得绕开表单的默认提交逻辑，手动构造目标URL再跳转。

下面是调整后的完整可运行代码：

HTML 部分 #

<form action="http://example.com/search" method="get" onsubmit="return handleSearchSubmit(this);">
  <input type="text" name="q" id="q" placeholder="输入搜索内容">
  <input type="submit" value="搜索">
</form>

JavaScript 部分 #

function handleSearchSubmit(form) {
  // 先阻止表单默认提交，避免浏览器自动编码参数
  event.preventDefault();
  
  // 获取输入框里的原始文本（不经过任何编码处理）
  const searchContent = document.getElementById('q').value;
  
  // 构造符合要求的URL：原action地址 + #! + 搜索参数
  const finalUrl = `${form.action}#!q=${searchContent}`;
  
  // 跳转到构造好的目标URL
  window.location.href = finalUrl;
  
  return false;
}

为什么这么做能解决问题？ #

• 我们通过event.preventDefault()和返回false彻底禁用了表单默认的GET提交流程，从根源上避免了浏览器自动编码参数的行为。
• 把用户输入的原始内容拼到#!之后，这部分属于URL的片段标识符（Fragment），浏览器不会对这部分内容进行自动URL编码，所以#!、?这些字符会原封不动地保留在URL里。

如果你的需求是把#!作为参数的一部分（比如http://example.com/search?q=#!xxx），只需要调整finalUrl的拼接格式就行，核心逻辑都是绕开默认编码，手动构造URL。

内容的提问来源于stack exchange，提问作者BLU3TV