使用HTML表单实现Instagram标签搜索跳转失败如何处理？

• 两个站点的搜索URL规则不匹配：
  1. 谷歌搜索采用查询参数传参的规则，搜索关键词通过q参数拼接在URL末尾，表单默认GET提交的逻辑刚好适配该规则，因此可以正常运行。
  2. Instagram标签搜索采用路径参数传参的规则，标签名直接作为URL路径的一部分，不存在q查询参数，表单默认提交生成的带?q=的URL不符合Instagram的路由规则，因此会跳转至错误页。
• 额外的格式问题：你输入的#会被URL编码为%23，但Instagram标签路径中不需要携带#符号，仅需要标签文本内容。

通过少量JS拦截表单提交事件，手动拼接符合Instagram规则的URL跳转即可，完整代码如下：

<form action="https://www.instagram.com/explore/tags/" target="_blank" onsubmit="searchTag(event)">
    <input type="text" name="q" placeholder="输入标签名，可带#">
    <button>搜索Instagram标签</button>
</form>
<script>
function searchTag(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 获取输入的内容，去除首尾空格和开头的#号
    const tagName = e.target.q.value.trim().replace(/^#/, '');
    // 非空判断
    if (tagName) {
        // 拼接目标URL跳转
        window.open(`${e.target.action}${encodeURIComponent(tagName)}/`);
    }
}
</script>

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