Question

我让我的用户可以过滤产品而无需使用ajax刷新页面。我更新网址使其看起来像：

http://mywebsite.com/products/filter?style=7-1-2&price=4-5-7&brand=48-12-5&color=8-4

其中int值被id分割为 - 。所以我有选择：

式

价

品牌

颜色

我想要的是在每个过滤器选项的var中获取这些值，以便结束：

var styleValues = 7,1,2
var priceValues = 4,5,7

如果只选择了价格过滤器，则网址将显示为

http://mywebsite.com/products/filter?price=4-5-7

所以我不能拆分过滤器的标签。

我真的很想知道将网址转换为不同变种的最佳方法。

我已经知道的事情：

如何获取过滤器部分：

var filterPart =window.location.search;

Answer 1

关于css技巧的精彩文章涵盖了这个： http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/ JavaScript可以部分访问当前URL。对于此网址：

http://css-tricks.com/example/index.html

window.location.protocol =“http：” window.location.host =“css-tricks.com” window.location.pathname =“example / index.html” 所以要在JavaScript中获取完整的URL路径：

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;

如果您需要调出路径名，例如http://css-tricks.com/blah/blah/blah/index.html之类的网址，则可以将字符串拆分为“/”字符

var pathArray = window.location.pathname.split( '/' );

然后通过数组的各个部分访问不同的部分，如

var secondLevelLocation = pathArray[0];

要将该路径名重新组合在一起，您可以将数组拼接在一起并将“/”重新放入：

var newPathname = "";
for (i = 0; i < pathArray.length; i++) {
  newPathname += "/";
  newPathname += pathArray[i];
}

或者像这样::

http://css-tricks.com/snippets/javascript/get-url-variables/

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);
}

Answer 2

也许这可以帮到你：

var Request = {
QueryString : function (item) {
    var svalue = location.search.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i"));
    return svalue?svalue[1]:svalue;
},

queryAllString : function() {
    var urlLocation = location.href;
    var startPosition = urlLocation.indexOf("?");
    if (startPosition < 0) {
        return '';
    } else {
        return urlLocation.slice(startPosition);
    }
}
}

如果你想得到价格，你可以这样做：

Request.QueryString("price")

Answer 3

我对这个问题的看法是：

// this is simply to compensate for the lack of a current document.location to search:
var documentURL = 'http://mywebsite.com/products/filter?style=7-1-2&price=4-5-7&brand=48-12-5&color=8-4',
  tempA = document.createElement('a');
tempA.href = documentURL

var searches = {
  'get': function() {
    var queries = {
        // a cache of all named parameters found:
        'found': []
      },
      // stripping off the leading '?':
      queryString = tempA.search.substring(1),
      // getting the key-value pairs:
      keyValues = queryString.split('&'),
      // to be used withi the forEach():
      pair;
    keyValues.forEach(function(el) {
      // creating an array consisting of the keyName and keyValue:
      pair = el.split('=');
      // if we have both a name and a value we proceed:
      if (pair.length === 2) {
        if (!queries[pair[0]]) {
          // if there is no present entry for the current key, we:
          // push the key to the 'found' array, and
          // create a record in the queries object for that key
          // containing an array of the found values:
          queries.found.push(pair[0]);
          queries[pair[0]] = pair[1].split('-');
        } else {
          // otherwise (there is an existing key in the queries object),
          // we push the values to the end of the existing array:
          queries[pair[0]].push(pair[1])
        }
      }
    });
    return queries;
  }
};

var cachedSearches = searches.get(),
    allKeys = cachedSearches.found;

allKeys.forEach(function(el){
  console.log(el, cachedSearches[el], cachedSearches[el].join(', '));
});

参考文献：

Answer 4

尝试

var filtered = {};
var url = "http://mywebsite.com/products/filter?style=7-1-2&price=4-5-7&brand=48-12-5&color=8-4";
var filters = url.split("?")[1].split("&");
filters.map(function(val) {
  filtered[val.split("=")[0]] = val.split("=")[1].split("-").join(",")
});
console.log(filtered);

var filtered = {};
var url = "http://mywebsite.com/products/filter?style=7-1-2&price=4-5-7&brand=48-12-5&color=8-4";
var filters = url.split("?")[1].split("&");
filters.map(function(val, i) { 
  filtered[val.split("=")[0]] = val.split("=")[1].split("-").join(",");
  document.body.innerText += (Object.keys(filtered)[i].toString() +": "+ filtered[val.split("=")[0]]) + "\n"
});

Javascript在过滤器上拆分网址

4 个答案: