jQuery Isotope hash-history: prettify the hash-URL

I'm using Isotope with Hash History. It works great, but I'm not happy with the URL - I'd like to simplify & clean it up.

Currently using:

var href = $this.attr('href').replace( /^#/, '' );
var option = $.deparam( href, true );`

On this markup:

<li><a href="#filter=.work/">Work</a></li>

So, my question: how can I make it work with the following markup?

<li><a href="#/work/">Work</a></li>

I'm only开发者_StackOverflow社区 using filters, all other Isotope options are locked down, so I'm hoping to remove the reference to filters.

Thanks in advance!

I am using this:

function getHashFilter() {
  var hash = location.hash;
  // get filter=filterName
  var matches = location.hash.match(/^#?(.*)$/)[1]; // this is to get the name of the class
  var hashFilter = matches;
  return hashFilter;

}

$( function() {
  var $container = $('. isotope');

  // bind filter button click
  var $filters = $('#filters').on( 'click', 'span', function() {
    var filterAttr = $( this ).attr('data-filter');
    // set filter in hash
    location.hash = '/' + filterAttr.substr(1); // adding the slash for the url
  });

  var isIsotopeInit = false;

  function onHashchange() {
    var hashFilter = getHashFilter();
    if ( !hashFilter && isIsotopeInit ) {
      return;
    }
    isIsotopeInit = true;
    // filter isotope
    $container.isotope({
      itemSelector: '.element-item',
      filter: '.' + hashFilter.substr(1) //adding the . so it can match the data-filter
    });
    // set selected class on button
    if ( hashFilter ) {
      $filters.find('.is-checked').removeClass('is-checked');
      $filters.find('[data-filter=".' + hashFilter + '"]').addClass('is-checked');
    }
  }

  $(window).on( 'hashchange', onHashchange );
  // trigger event handler to init Isotope
  onHashchange();
});

I realised that * will not work after this. So you need to add another class/data-filter to show all.