window.location.href with # hash after the .html

Question

I am using window.location.href to get the url path to insert a jquery.

It is working perfecly, but now I need catch a diferent path but I don't know how to do that.

before I need get this url user.html and insert the class active

doing like that:

$(document).ready(function(){
    var loc = window.location.href; // returns the full URL

    if(/user/.test(loc)) {
        $('ul.nav.nav-tabs li').addClass('active');

    }
});

now I need get this one: user.html#/details

how will be possible to get this url: user.html#/details with the code bellow?

$(document).ready(function(){
    var loc = window.location.href; // returns the full URL

    if(/user/.test(loc)) {
        $('ul.nav.nav-tabs li').addClass('active');

    }
});

Answer 1

You just need to write the regular expression for the details variant of your url.

/user\.html#\/details/

if you are checking for a match with if else, or case statements make sure you put the most specific tests first.

edit

I would modify it a bit to have different routes.

Using an object with the hash keys and callbacks you could create yourself a simple router that doesn't rely on regular expression.

Unfortunately the example will no longer work, but it will work in production.

function router(loc) {
  return function(e) {
    var href = loc.href;
  
    var routes = {
      '/details': function() { console.log('details route') },
      '/contact': function() { console.log('contact route') },
      '/email': function() { console.log('email route') },
      'default': function() { console.log('no hash set') }
    }
  
    if (/user\.html/.test(loc.href)) {
      if (typeof routes[loc.hash] === 'function') {
        return routes[loc.hash]()
      }
      return routes['default']()
    }
  }
}

var mockLocation = {
  hash: '/contact',
  href: 'user.html#/contact'
}

// bind the router to page load and hash change.
// change mockLocation to window.location for production
$(document).on('ready', router(mockLocation))
$(window).on('hashchange', router(mockLocation))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

You can implement the hash check by using this code:

$( document ).ready(
    function () {
        // Get the current URL
        var loc = window.location.href;
        // Get the hash part
        var hash = window.location.hash.replace( '#', '' );

        if ( 
            // If the location contains the word user
            /user/.test( loc ) &&
            // and the hash string has length greater than 0
            0 < hash.length &&
            // and the hash contains the string /details
            /\/details/.test( hash )
        ) {
            // Do stuff related to user page
            // with the details hash part
        }
    }
);

In addition if you like to make it more complicated you can have the following code:

(function( $, window, undefined ) {

    // Handle the page elements related to the hash parts
    var track_hash_changes = function track_hash_changes() {
        // Get the current URL
        var loc = window.location.href;
        // Get the hash part
        var hash = window.location.hash.replace( '#', '' );

        if ( 
            // If the location contains the word user
            /user/.test( loc )
        ) {
            switch( hash ) {
                case '/case-1':
                    // Do stuff for case #1
                    break;
                case '/case-2':
                    // Do stuff for case #2
                    break;
                case '/case-X':
                    // Do stuff for case #X
                    break;
            }
        }
    };

    $( document ).ready(
        function () {
            // Listen for changes in the Hash part of the URL
            window.addEventListener("hashchange", track_hash_changes, false);
        }
    );
})( jQuery, this );

Where case-1, case-2, case-X are the user.html#/case-1, user.html#/case-2, user.html#/case-X

Answer 3

window.location.href should continue to get what you're after.

If you want to find out how something works, just type it into the console to see what properties it contains. So for example I just added #/splurge to the path for this page, entered window.location into the console and got this information: