使用JavaScript解析URL的#片段

Question

我希望能够在javascript中将哈希片段解析为关联数组，就像PHP中的$_GET超全局变量一样。 这是URL:

www.mysite.com/randompage#name=donald&lastname=mclotsoquestions&age=25

到目前为止，我有这个：

var hashfragment = location.hash;
var hashfragment_array = hashfragment.split('&');

Hashfragment_array是["#name=donald","lastname=mclotsoquestions","age=25"]

我该如何从中创建键值对？

- Don P

Answer 1

使用这个：

var hash_array = location.hash.substring(1).split('&');
var hash_key_val = new Array(hash_array.length);

for (var i = 0; i < hash_array.length; i++) {
    hash_key_val[i] = hash_array[i].split('=');
}

现在hash_key_val[index]是一个包含两个元素的数组，第一个元素为键-参数名称，第二个元素为相应的值。

编辑:

经过一段时间的研究，我感到需要重写这个 - 返回一个对象而不是数组的数组。我看到balafi以前做过这件事，但我无法忍受我的答案如此反直觉和膨胀的用法。完整的示例在fiddle中。函数源代码在此处:

function getParameters(location) {
    if (typeof location === 'undefined') {
        location = window.location;
    }
    var hashParams = new (function Params() {})();
    if (location.hash.length === 0) {
        return hashParams;
    };
    var hashArray = location.hash.substring(1).split('&');
    for (var i in hashArray) {
        var keyValPair = hashArray[i].split('=');
        hashParams[keyValPair[0]] = keyValPair[1];
    }
    return hashParams;
}

- Krzysztof Jabłoński

---

我不确定我理解你的回答。hash_key_val只会给出hash_array中最后一个键值对。在上面的例子中，它只返回'age'和'25'。你怎么得到'name'的值呢？ - Don P

console.log(hash_key_val) 输出 ['age', '25']，但没有其他键值对。 - Don P

感谢@DonnyP。我的代码有错误。我将整个hash_key_val赋值给了它的元素，而不是赋值给它的元素。这就是为什么只有最后一个被保留。我已经纠正了这个问题。在这里，它按预期工作。感谢您引起我的注意。 - Krzysztof Jabłoński

Answer 2

var str = www.mysite.com/randompage#name=donald&lastname=mclotsoquestions&age=25

var vars = str.substring(1).split('&');
var key = {};
for (i=0; i<vars.length; i++) {
  var tmp = vars[i].split('=');
  key[tmp[0]] = tmp[1];
} 

// key['name'] = "donald"  <--
// key['lastname'] = "mclotsoquestions"  <--
// key['age'] = "25"  <--

- balafi

---

有趣的方法。值得注意。+1 - Krzysztof Jabłoński

Answer 3

使用jQuery BBQ，这是一个经过实践验证的库，用于处理状态管理。

$(window).on('hashchange', function(e) { // event fired when the fragment changes
    var frag = $.deparam.fragment();
});

它还使添加或更改片段变得容易：

$.bbq.pushState({ someParam: 'value' });

- josh3736

---

BBQ 在使用 jQuery (1.9+) 时已经不再可用 -- 看起来它已经好几年没有更新了。 - nostromo

@nostromo：这是因为jQuery 1.9移除了$.browser。有一个BBQ PR修复了这个问题。项目状态在这里讨论——它还没有完全死亡。 - josh3736