使用 JavaScript 从干净/SEO 友好的 URL 获取查询字符串参数答案

【问题标题】：Getting query string parameters from clean/SEO friendly URLs with JavaScript使用 JavaScript 从干净/SEO 友好的 URL 获取查询字符串参数
【发布时间】：2016-10-07 17:04:47
【问题描述】：

我最近将我的网站切换为使用干净/SEO 友好的 URL，这导致我使用 JavaScript 函数获取查询字符串参数时出现了一些问题。

之前我一直在使用这个功能：

function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
        return pair[1];
    }
}
return (false);
}

这在 this 之类的东西上效果很好，因为您可以调用 getQueryVariable("image") 并返回“awesome.jpg”。

我一直在玩indexOf();函数，试图从当前URL中获取相关参数，例如：

var url = window.location.pathname;
var isPage = url.indexOf("page") + 1;

试图获取“page”参数的数组索引号，然后将其加1以移动到(?page=name > /page/name/)的值

JavaScript 不是我的主要语言，所以我不习惯使用数组等，我尝试将它变成一个新函数让我很头疼。

任何指针？

【问题讨论】：

标签： javascript clean-urls

【解决方案1】：

这样的事情怎么样？它分割路径并在确定键/值对时不断移动数组的第一个元素。

function getPathVariable(variable) {
  var path = location.pathname;

  // just for the demo, lets pretend the path is this...
  path = '/images/awesome.jpg/page/about';
  // ^-- take this line out for your own version.

  var parts = path.substr(1).split('/'), value;

  while(parts.length) {
    if (parts.shift() === variable) value = parts.shift();
    else parts.shift();
  }

  return value;
}

console.log(getPathVariable('page'));

【讨论】：

不适用于漂亮的 url，假设您有一个 get 变量 hidden example.com/dashboard 其中dashboard 是一个名为 page 的 get 参数

【解决方案2】：

这可以使用router.js 等库正式完成，但我会使用简单的字符串操作：

const parts = '/users/bob'.split('/')
const name = parts[parts.length - 1] // 'bob'

【讨论】：