Jquery -如何获得&只考虑1个URL参数而忽略其他参数？

nbysray5 于 2022-11-03 发布在 jQuery

关注(0)|答案(1)|浏览(245)

在我的商店我有一个过滤器。当一个过滤器被选中时，它会添加“filter.p.tag=xxx”参数到网址。因为我没有其他可能性来显示当前活动的过滤器，我需要从网址中抓取它们。并在h1下输出它们，当一个新的过滤器被选中时，实时更新。
例如，URL：收集/所有？过滤器。p.标签=动物&过滤器。p.标签=闪光&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>

jquery

来源：https://stackoverflow.com/questions/74177439/jquery-how-to-get-consider-only-1-url-parameter-and-ignore-the-others

1条答案

按热度按时间

polhcujo1#

更少的代码，更强大

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

程式码片段

显示测试值范围的代码段。
第一个

赞(0）回复(0）举报 2022-11-03

我来回答

Jquery -如何获得&只考虑1个URL参数而忽略其他参数？

1条答案

相关问题

热门标签

最新问答