Regex match for a string in a URL

Question

I feel like there is too much repetitive code going on here. All I am doing is doing a basic regex match for a string in the URL.

If a match is found, I find a li with a class (.index, .grid or .type) and add the active class. This is just for my main nav in an attempt to make it somewhat dynamic.

However, I feel like there is a more efficient way to code this:

$(document).ready(function() {
  var myLocation = window.location.href;
  var index = /index/i;
  var grid = /grid/i;
  var type = /type/i;
  var urlIndex = convertURL.match(index);
  var urlGrid = convertURL.match(grid);
  var urlType = convertURL.match(type);
  
  if (urlIndex) {
    $('.index').addClass('active');
  } else if (urlGrid) {
    $('.grid').addClass('active');
  } else if (urlType) {
    $('.type').addClass('active');
  }
});

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

Answer 1

Much like elclanrs' solution, just slightly more "plain"

$(function () {
  var classes = ['index', 'grid', 'type'],
      url = window.location.href.toLowerCase();
  for(var i = 0, l = classes.length ; i < l ; i++ ) {
    if(url.indexOf(classes[i]) !== -1) {
      $('.' + classes[i]).addClass('active');
      break; // only first matching class is considered
    }
  }
});

Answer 2

I think you meant myLocation in place of convertURL.

You don't need that many variables, a typical refactoring might look like this:

// Short version of $(document).ready(fn)
$(function() {
  var loc = window.location.href;
  if (/index/i.test(loc)) {
    $('.index').addClass('active'); 
  } else if (/grid/i.test(loc)) {
    $('.grid').addClass('active');
  } else if (/type/i.test(loc)) {
    $('.type').addClass('active');
  }
});

But I would go for a less imperative solution, without the use of regex, for example:

$(function() {
  var loc = window.location.href;
  var classes = ['index', 'grid', 'type'];
  var isMatch = function(x){return loc.toLowerCase().indexOf(x)>-1};
  $('.'+ classes.filter(isMatch)[0]).addClass('active');
});

Note that you can go even further an cache the lowercased url, but you may want to use the original variable intact later in the code.

Answer 3

$(document).ready(function () {

    // use single var per function, 
    // good for minimizing and other stuff
    var

    i,

    // new string literal, not String object
    convertURL = '' + window.location,

    // the array of strings keeps only the difference 
    // from the repetitive code
    classes = ['index', 'grid', 'type'],

    // using functions with proper arguments reduces repetitivness
    matches = function (regex) {
        return convertURL.match(new RegExp(regex, 'i'));
    }

    // var
    ;

    // always use += instead of ++ -> makes for clear intention
    for (i = 0; i < classes.length; i += 1) {
        if (matches(classes[i])) {
            // returning out of this function stops iteration
            return $('.' + classes[i]).addClass('active');
        }
    }

});