使用Javascript/jQuery获取基于段的URL中的查询字符串

Question

我正在使用一个名为Codeigniter的PHP框架，它使用基于段（segment）的URL，如 http://www.mydomain.com/age/11/name/john/color/red，而不是通常的查询字符串，如 http://www.mydomain.com/index.php?age=11&name=john&color=red。 如何使用JavaScript/jQuery获取URL中的age键值？ 在获取到值11后，当事件被触发时，我将把它传递给一个jQuery对象。

$( "#searchdistance_slider" ).slider({
        range: "min",
        value: 5,
        min: 0.5,
        max: 10,
        slide: function( event, ui ) {
            $( "#search_distance" ).val(ui.value + " miles");
            window.location.replace("http://www.domain.com/" + age); 
            /* passing the value of age into URL to redirect to */
        }
    });

更新

• 键/值对可以改变位置，URL中的键/值对数量不固定
• 我需要在Javascript内部获取值，因为用户使用滑块更改特定值，比如age，并且来自滑块的新值20将用于将用户重定向到http://www.mydomain.com/age/20/name/john/color/red

- Nyxynyx

Answer 1

您可以尝试使用jQuery URL解析器插件。

使用.segment(n)调用来搜索URL路径中的"age"，并获取下一个数值，该数值应该包含您要查找的年龄值。

如果age始终位于相同位置，则可以尝试使用.fsegment(n)方法。

或者使用类似以下代码的.segment()方法：

var parts = $.url(your_url).segment();
var params = [];
for (var i=0; i<parts.length/2; i++) {
   params[parts[2*i]] = parts[2*i+1];
}
var age = parseInt(params['age']);

我相信有更优雅的方法来做到这一点。如果你只想要“age”部分，那么你不必将所有内容都放入字典中。当你找到所需的键时，可以提前退出循环。如果你想用改变后的年龄重构路径，请尝试以下方法：

var parts = $.url(your_url).segment();
var newpath = '';
for (var i=0; i<parts.length/2; i++) {
  if (parts[2*i] == 'age') {
    newpath += '/age/' + (parseInt(parts[2*i+1]) + 42); // put your age modifiy
                                                        // code here
  } else {
    newpath += '/' + parts[2*i] + '/' + parts[2*i+1];
  }
}
alert(newpath);

- Mat

---

URL段中键/值对的位置会发生变化，因此我认为使用插件很难轻松地针对特定的键/值对进行定位。 - Nyxynyx

不是真的。.segment() 返回所有路径片段的数组。如果您需要基于键的查找，请使用哈希（我将发布一个示例）。 - Mat

太好了..你知道在更新params['age']后重建整个URL的快速方法吗？我考虑使用类似于用于哈希数组的for循环，但是每次迭代都会发生newurl += newurl + "/" + parts[2*i] + "/" + parts[2*i+1]。 - Nyxynyx

更新的内容：请注意，新路径不包含方案+域名，您需要自行添加。 - Mat

Answer 2

你可以用类似这样的方式来分割它：

var parts = {},
    bits = location.pathname.substr(1).split('/'); // get rid of first / and split on slashes

for (var i = 0; i<bits.length; i += 2) {
    parts[bits[i]] = bits[i+1];
}

您可以使用parts.age访问age值。

- lonesomeday

---

听起来这个方法可行。我已经更新了我的问题。如何使用新值更新age的值，然后将带有新值的age的URL传递给window.location.replace()？ - Nyxynyx

Answer 3

在您的PHP腳本運行之前，請添加以下內容：

<?php
$getAgre = ( isset($_GET['age']) && strlen($_GET['age'])>0 )? $_GET['age'] : 'null';
echo '<script>var age = '. $getAge .';</script>';
?>

编辑：在显示 $_GET['age'] 的内容之前，请确保进行一些安全检查，当您的事件在 .slider() 中检查变量 get 是否存在时，您的 JS 会更好。

- WooDzu

Answer 4

你可以使用window.location.href变量来获取整个当前URL，然后对字符串进行一些操作以获取所需的信息。可以使用子字符串、分割甚至正则表达式。

以下代码可行：

var ageMatch= window.location.href.match(/age\/([\d]*)/);
var age= ageMatch[1];

仅供参考，您也可以轻松更新URL：

var newUrl= window.location.href.replace(/age\/([\d]*)/, age);
window.location.href= newUrl;

- Daniel