skip to Main Content

I have a link on my collection page on a Shopify store.

the link does look like this:

/collections/all?filter.p.tag=animal

I want to grab the current active Filters and print them again under the H1 Heading.

But I HAVE TO grab only everything after "tag="

So ignore the rest of the URL and also anything coming from things like "sort_by" or "?fbclid=IwAR2didTPblablabla"

So just everything after "tag="

How this can be done?

5

Answers


  1. You could get the URL, parse it and keep the parts you care about.

    Login or Signup to reply.
  2. window.location.href will give you the current URL in your web browser.

    Then by using the split function with the argument "tag=" you split the string into 2 parts. You get an array back with the first value being the part up to tag=, and the second part is everything after tag=.

    window.location.href.split("tag=")[1]
    
    Login or Signup to reply.
  3. There are a few ways to do it using JavaScript. Here are two options:

    Option 1, use the string split method

    To get the search parameters of the URL, you can use something like document.location.search, which evaluates to everything after the "?" in the URL.

    Then, you can split the string on "tag=" to get everything after "tag=".

    Example code:

    const searchParams = document.location.search; // 'filter.p.tag=animal'
    const splitString = searchParams.split('tag=');
    const everythingAfterTag = splitString[1]; // 'animal'
    

    Option 2, use the URL object constructor

    Here is a code example:

    const url = document.location.href; // get the entire URL string
    const urlObject = new URL(url);
    const valueOfTag = urlObject.searchParams.get('filter.p.tag'); // 'animal' 
    
    Login or Signup to reply.
  4. Just to give a more fullfilling answer using URLSearchParams:

    const paramsString = "?filter.p.tag=animal";
    
    const searchParams = new URLSearchParams(paramsString);
    
    console.log(searchParams.get('filter.p.tag'))
    // result: animal
    

    This will get the value from the filter.p.tag param eg animal.
    Meaning if the url looks something like this:

    const paramsString = "?filter.p.tag=animal&sort_by=type";
    

    it will still only return animal.

    If you truly want "everything after "tag="", please see some of the other answers.

    Edit: URLSearchParams’ argument must be in the right format (eg.: ?some=thing), so previously I answered it with:

    const paramsString = "/collections/all?filter.p.tag=animal";
    ...
    

    which is incorrect. Only the actual search params string works in URLSearchParams.

    To get the correct params string from the URL use location.search:

    const searchParams = new URLSearchParams(location.search);
    
    console.log(searchParams.get('filter.p.tag'))
    

    Sorry for any confusion.

    Login or Signup to reply.
  5. const text="/collections/all?filter.p.tag=animal"
    const n= text.indexOf("tag=")
    const newtext= text.slice(n+4)
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search