Question

如何在纯JavaScript中获取和设置URL哈希参数？

例如，我想使用这样的参数：myurl.com/#from=2012-01-05&to=2013-01-01

我希望能够在上面设置from和to参数。

我很高兴使用HTML5历史记录API，如果这是最好的做事方式。

Answer 1

如果要解析哈希URL，则可以：

var hash = window.location.hash.substr(1);

var result = hash.split('&').reduce(function (result, item) {
    var parts = item.split('=');
    result[parts[0]] = parts[1];
    return result;
}, {});

http://example.com/#from=2012-01-05&to=2013-01-01

变为

{'from': '2012-01-05', 'to':'2013-01-01'}

Answer 2

您可以使用以下方式设置哈希：

window.location.hash = "new value";

和（在newer browsers中）听取以下更改：

window.addEventListener("hashchange", function () {
});

如果您需要支持不支持"hashchange"的浏览器，则需要使用其他人编写的代码，例如jquery's history plugin。

Answer 3

其他答案不能解决问题

我有一种更简单的方法：

将当前的哈希参数作为searchParameters复制到虚拟URL。现在，您可以将哈希参数视为搜索参数，然后将其复制回去：

简单功能

Answer 4

关于获取参数...该解决方案如何：

var myUrl = new URL(window.location.href.replace(/#/g,"?"));
var param_value = myUrl.searchParams.get("param_name");

祝你好运！

Answer 5

对于多个参数：

const href = window.location.href;
const params = href.split('?')[1];

// Be sure url params exist
if (params && params !== '') {
    const result = params.split('&').reduce(function (res, item) {
        const parts = item.split('=');
        res[parts[0]] = parts[1];
        return res;
    }, {});
}

因此，当href=https://www.example.net/page.html#/page1?foo=bar&token=123abc时result的值为{foo: "bar", token: "123abc"}。

此结构要求URL在参数之前有问号?，在变量键和值之间有一个等号=，并且在每个键/值对之间有一个&

Answer 6

基于Maart's answer的版本可以返回编辑后的URL，而不是将更改应用于当前窗口。

function setHashParam(url, name, value) {

    // Create URL objects for the url we want to change and a dummy url (requires a polyfill for IE)
    var urlObj = new URL(url);
    var dummyObj = new URL('https://dummy.com');

    // Copy current hash-parameters without the '#' as search-parameters
    dummyObj.search = urlObj.hash.substring(1);

    // Set or update value with the searchParams-API (requires a polyfill for IE)
    dummyObj.searchParams.set(name, value);

    // Write back as hashparameters
    urlObj.hash = dummyObj.searchParams;

    return urlObj.href;
}

请注意，要使此答案（和Maart的答案）在IE中起作用，它们需要对URL构造函数和搜索参数API使用polyfill。

Answer 7

在ramda或lodash（fp）中，它非常简单：

const getHash = R.pipe(
  R.tail,
  R.split('&'),
  R.map(R.split('=')),
  R.fromPairs
);

const hash = getHash(window.location.hash)

Answer 8

这是我的解决方法

arr = location.search.replace('?', '').split('&').map(x => x.split('=')).map(x => {
    let keyName = x[0];
    let val = x[1];
    let object = {};
    object[keyName] = val;
    return object;
});

obj = {}

arr.forEach(function(x) {
    let key = Object.keys(x)[0];
    obj[key] = x[key];
});

console.log(obj);

基本具有location.search，我们获得路径（查询参数所位于的路径）之后的url的右侧部分。

location.search还会返回“？”字符，用空格替换，然后用“＆”分隔，映射并用“ =”分隔，以获得像这样的联合国数组

[['term', 'hello'], ['lang', 'es']]

然后，根据需要组装对象

arr = "?safe=active&source=hp&ei=c4Q8XcOPFd3F5OUP7e242Ag&q=hola&oq=hola&gs_l=psy-ab.3..0l5j0i131j0l2j0i131j0.1324.1667..1798...1.0..0.264.744.1j3j1......0....1..gws-wiz.....10..35i39.-_FkFlX_Muw&ved=0ahUKEwiDlaTgytXjAhXdIrkGHe02DosQ4dUDCAU&uact=5".replace('?', '').split('&').map(x => x.split('=')).map(x => {
    let keyName = x[0];
    let val = x[1];
    let object = {};
    object[keyName] = val;
    return object;
});

obj = {}

arr.forEach(function(x) {
    let key = Object.keys(x)[0];
    obj[key] = x[key];
});

console.log(obj);

JavaScript：获取并设置URL哈希参数？

8 个答案: