Jquery - 如何获取并仅考虑 1 个 URL 参数并忽略其他参数？

Question

在我的商店里，我有一个过滤器。当选择一个滤波器时；filter.p.tag＝xxx"；url的参数。由于我没有其他显示当前活动过滤器的可能性，我需要从URL中获取它们。并在h1下输出它们，并在选择新过滤器时实时更新。

例如URL：集合/全部？filter.p.tag=动物&filter.p.tag=闪光&fbclid=2123&paramblabla=123123

-实际上，我只想要(filter.p.tag(之后的所有内容，所以在这个例子中，H1标题下应该有以下内容：

"；动物&"闪光">

我想忽略所有其他参数；jquery移除或替换"；因为这是不需要的。

问题是： 我如何才能只考虑filter.p.tag参数而忽略所有其他参数

现在我有了这个代码：

<script>
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function removeDuplicates(arr) {
return arr.filter((item,
index) => arr.indexOf(item) === index);
}
jQuery( document ).ready(function( $ ) {
jQuery(document.body).on('click', ".label_filter", function(){
setTimeout(function(){ 
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[1]);
// vars[hash[0]] = hash[1];
}
var unqvars = removeDuplicates(vars);
var result = '';
for(var i = 1; i <= unqvars.length; i++){
if(i == unqvars.length){  
var sept = '';
}else{
var sept = ' & ';
}               
result = unqvars+ sept;
}
var replaced = result.replaceAll(',', ' & ');
var replaced1 = replaced.replaceAll('+', '  '); 
var replaced2 = replaced1.replaceAll('-', '  ');
var replaced3 = replaced2.replaceAll('& Page=', ' Seite ');
jQuery('#categoryfromfilter').text(replaced3);
}, 1000);        
});
});
</script>
```

Answer 1

更少的代码，更健壮

URLSearchParams((.getAll((在同一密钥名称有多个值时工作良好。

然而，需要额外的代码来使函数处理广泛的输入。例如，在这里，我们首先解析url中的查询字符串。如果路径被传递，URLSearchParams将失败，例如/somepath?key=value。查询字符串值也可能被编码，因此decodeURIComponent((被应用于每个值。

const getParam = (url, key) => 
new URLSearchParams(url?.toString().split("?").pop())
.getAll(key).map(value => decodeURIComponent(value));

示例：

let url = "/collections/all?filter.p.tag=animals&filter.p.tag=glitter",
key = "filter.p.tag",
result = getParam(url, key);
// Output: "animals,glitter"

更新

OP要求提供额外的代码来从window.location.href中提取筛选值。我们可以使用此href创建URL，然后修改原始解决方案以使用URL.searchParams.

此外，OP希望在页面查询字符串发生更改时检索过滤器。当用户单击一个过滤器选项，导致页面重新加载新数据时，最有可能发生这种情况。为此，我们可以使用DOMContentLoaded事件在页面加载时检查新的过滤器。虽然可能性较小，但页面也可能使用History.pushState((来更新查询字符串，为此我们可以使用popstate事件。

function onQueryChange() {
let key = "filter.p.tag";
let url = new URL(window.location.href);
let filters = url.searchParams.getAll(key)
.map(value => decodeURIComponent(value))
.join("&");
// do something with the filters...
}
document.addEventListener("DOMContentLoaded", onQueryChange);
// document.addEventListener("popstate", onQueryChange);

代码段

显示一系列测试值的代码段。

const getParam = (url, key) => 
new URLSearchParams(url?.toString().split("?").pop())
.getAll(key).map(value => decodeURIComponent(value));

// Test Values
let name = "filter.p.tag";
["/collections/all?filter.p.tag=animals",
"/collections/all?filter.p.tag=animals&filter.p.tag=glitter",
"/collections/all?fbclid=IwAR2didTPblablabla&filter.p.tag=animals",
"/collections/all?filter.p.tag=animals&fbclid=IwAR2didTPblablabla&filter.p.tag=glitter",
"/collections/all?sort_by=apes&filter.p.tag=animals&fbclid=IwAR2didTPblablabla",
"fbclid=IwAR2didTPblablabla&filter.p.tag=animals",
"filter.p.tag=animals&filter.p.tag=glitter&fbclid=IwAR2didTPblablabla",
"/collections/all?fbclid=IwAR2didTPblablabla",
"filter.p.tag&fbclid=IwAR2didTPblablabla",
"/collections/all",
null,
undefined
].forEach(url => stdout.innerHTML += (`Returns "${getParam(url, name)}" for  "${url}"n`));

<xmp id="stdout"></xmp>