JavaScript：通过使用#号的路由从 URL 获取查询字符串答案

【问题标题】：JavaScript: Get query string from URL with routing that uses # signJavaScript：通过使用#号的路由从 URL 获取查询字符串
【发布时间】：2016-04-22 16:08:14
【问题描述】：

我在我的应用程序中使用 Ext JS 的 routing，但这是一个更基本的问题...只要知道 Ext JS 中的路由设置类似于 http://url/#area1/subarea1，其中 #area1 会将我带到父级level 区域，subarea1 将带我到 area1 的第一个子项。

无论如何，我想要完成的是在我的 URL 中添加查询参数......所以它会像 http://url/#area1/subarea1?startDate=03/03/2014&isDraft=true，但看起来 location.search 是一个空字符串，在 FF 和 Chrome 中，所以我假设这是设计使然。我知道我可以解析 location.href，但这似乎很愚蠢。我基本上想知道我是否做错了什么，或者我是否可以使用其他一些属性？

【问题讨论】：

ExtJS Routing Guide 演示了框架如何处理参数化 URL。
不是我真正想要的......看起来他们根本不处理查询字符串，但无论如何谢谢。
查询字符串根据规范属于 before 片段。您可以定义任何您想要在散列后管理数据的方案，但为什么要重新发明轮子呢？该问题被标记为extjs，并且该框架具有用于处理片段URI / 路由的良好API。不清楚您要达到的目标是通过链接中的示例无法实现的吗？
@Emissary 因为没有明确的方法...在您的链接中，我没有看到提及查询字符串，是的，您是对的，规范说将它放在散列之前，但在不进行一些 URL 按摩的情况下如何将其放在散列之前似乎并不简单。我想出了一个相当快速的解决方案，我最终会开始发布它。

标签： javascript extjs query-string extjs5 window.location

【解决方案1】：

位置 URL 始终具有以下顺序：协议主机名路径名搜索哈希。在您的情况下，搜索为空，因为 # 在第一个 ? 之前。

所以，在http://url/#area1/subarea1?startDate=03/03/2014&isDraft=true，

location.protocol 是 http:
location.hostname 是 url
location.pathname 是 /
location.search 为空
location.hash 是 #area1/subarea1?startDate=03/03/2014&isDraft=true

所以location.hash.split('?')[1] 应该包含您想要的“查询参数”，或者如果您希望它们作为一个对象，Ext.Object.fromQueryString(location.hash.split('?')[1] || {})。

【讨论】：

是否有关于您指定的 URL 顺序的 RFC 或某种文档？我有兴趣读一下。
这更快并且使用更少的内存：Ext.Object.fromQueryString(location.hash.replace(/^.+\?/, ''))。查看基准：jsperf.com/hash-replace-vs-split#area1/subarea1?startDate=03/03/…

【解决方案2】：

我刚刚在 Angular 中遇到了同样的问题。这是我的解决方案：

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    url = url.toLowerCase(); 
    name = name.replace(/[\[\]]/g, "\\$&").toLowerCase();
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

【讨论】：