Question

I want to map what is in the location hash to a string. The mapping has to be based on a pattern below (:Placeholder would be arbitrary numbers, maybe RegEx?). What is the best way to handle this in a function?

    'news/:NewsID/dup' => 'newsDuplicate',
    'news/:NewsID' => 'newsDetail',
    'news/:NewsID/authors' => 'authorsList',
    'news/:NewsID/authors/' => 'authorsList',
    'news/:NewsID/authors/create' => 'authorsCreate',
    'news/:NewsID/authors/:AuthorID' => 'authorDetail',
    'news/:NewsID/authors/:AuthorID/orders' => 'orders',
    'news/:NewsID/authors/:AuthorID/workflow' => 'workflow',
    'news/:NewsID/authors/:AuthorID/tags' => 'tags'

I am trying to highlight the correct button in a navigation and wanted a function like handleNav() which would highlight the right button based on the pattern.

For example, when at http://mydomain.com#!news/123/authors/987, then I can do something like this:

function handleNav() {
  var current = ?? //get mapped string above
  $('button.' + current).addClass('active').siblings().removeClass('active');
}

How do I get the “current” variable above based on the mapping? Not sure if a bunch of if-else statements would be the best way and I do not know much regex. Thanks for any help or insight.

Answer 1

Perhaps normalize the string before reading the mapping? Something like this:

var map = {
  'news/ID/dup' : 'newsDuplicate',
  'news/ID' : 'newsDetail',
  'news/ID/authors' : 'authorsList',
  'news/ID/authors/' : 'authorsList',
  'news/ID/authors/create' : 'authorsCreate',
  'news/ID/authors/:AuthorID' : 'authorDetail',
  'news/ID/authors/:AuthorID/orders' : 'orders',
  'news/ID/authors/:AuthorID/workflow' : 'workflow',
  'news/ID/authors/:AuthorID/tags' : 'tags'
}

function normalize(str) {
    return str.replace(/news\/\d+/,'news/ID')
}

var current = map[normalize(url)];