Question

I am currently using:

$(function () {
    var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");

    $('.mainmenu a').each(function () {
      if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
        $(this).addClass('active');
      }
    });
});

Since the ‘mainmenu a’ tag I am using has an href with link.html, this script works well when the url contains link.html. However, I would also like this to work when the url contains i.e. /link/page (without the .html extension) and vice versa. Basically I would like this to work with the url containing the .html extension, and link being a directory. Is this possible?

Answer 1

Yes, just simply replace .html with an empty string before doing your comparison. The real solution to your problem however is to not allow such a mix of clean URL’s and filename-based URL’s on your site to begin with.

You might do it like this:

$(function () {
    var url = window.location.pathname.toLowerCase().replace(/(\/|\.html)$/, '').replace(/^\//, '');
    $('.mainmenu a').each(function () {
        var href = this.href.toLowerCase().replace(/(\/|\.html)$/, '').replace(/^\//, '');
        if (url === href) {
            $(this).addClass('active');
            return false; // break out of each()
        }
    });
});