CODEWITHSUNDEEP
javascriptjqueryfunctionif-statement
Tom Pinchen
Tom Pinchen

Reputation: 2497

Removing final part of URL in Javascript/Jquery

I have some URL's that all follow the same structure.

https://www.website.com/services/county/town/servicename/brand/

When the search has zero results we display a button that when clicked runs a function to remove the final section of the URL and thus expand the search.

For example if the above URL returned 0 results then clicking our button would load https://www.website.com/services/county/town/servicename/ having removed brand from the search criteria and expanding the chance of results.

The code I currently have for this works but seems like a bit of a hack.

function expandSearch() {
    var currentURL = window.location.href;
    var parts = currentURL.split("/");
    var lastPart;

    if ( parts.length === 9 )  {
        lastPart = currentURL.substr(currentURL.lastIndexOf('/') - parts[7].length) + '$';
        window.location.href = currentURL.replace( new RegExp(lastPart), "");
    } else if ( parts.length === 8 ) {
        lastPart = currentURL.substr(currentURL.lastIndexOf('/') - parts[6].length) + '$';
        window.location.href = currentURL.replace( new RegExp(lastPart), "");
    } else if ( parts.length === 7 ) {
        lastPart = currentURL.substr(currentURL.lastIndexOf('/') - parts[5].length) + '$';
        window.location.href = currentURL.replace( new RegExp(lastPart), "");
    } else if ( parts.length === 6 ) {
        lastPart = currentURL.substr(currentURL.lastIndexOf('/') - parts[4].length) + '$';
        window.location.href = currentURL.replace( new RegExp(lastPart), "");
    }
}

The search can return 0 results at any point down to https://www.website.com/services/ at which point the whole database is returned.

The URL can also have missing elements for example it might have a county but no town.

Is there a better/cleaner way of removing the final URL element and redirecting the browser to this new broader search?

The final working version I ended up with thanks to @ebilgin for anyone looking:

function expandSearch() {

    var parts = window.location.pathname.substr(1).split("/");
    parts = parts.filter(Boolean); // Remove trailing empty array object
    parts.pop(); // Remove last array object
    window.location.href = "/" + parts.join("/") + "/"; // Go to new Location

}

Upvotes: 3

Views: 2047

Answers (1)

ebilgin
ebilgin

Reputation: 1252

You can use .pop() and .join() functions for your problem.

function expandSearch() {
    var parts = window.location.pathname.substr(1);
    var lastCharIsSlash = false;

    if ( parts.charAt( parts.length - 1 ) == "/" ) {
       lastCharIsSlash = true;
       parts = parts.slice(0, -1);
    }

    parts = parts.split("/");
    parts.pop();

    parts = "/" + parts.join("/") + (lastCharIsSlash ? "/" : "");

    window.location.href = parts;
}

If your every URIs has a trailing slash. This is much more clearer version of it.

function expandSearch() {
    var parts = window.location.pathname.slice(1, -1).split("/");
    parts.pop();
    window.location.href = "/" + parts.join("/") + "/";
}

Upvotes: 6

Related Questions