Filename From URL

Gets the last path component from a URL string, excluding query and hash ID

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<dl>
  <dt>No query, no fragment</dt>
  <dd data-url="http://subdomain.domain:port/path1/path2/filename.extension"></dd>
  <dt>Query, no fragment</dt>
  <dd data-url="http://subdomain.domain:port/path1/path2/filename.extension?query1=queryValue1&query2=queryValue2"></dd>
  <dt>Fragment, no query</dt>
  <dd data-url="http://subdomain.domain:port/path1/path2/filename.extension#fragmentId"></dd>
  <dt>Query and fragment</dt>
  <dd data-url="http://subdomain.domain:port/path1/path2/filename.extension?query1=queryValue1&query2=queryValue2#fragmentId"></dd>
</dl>

CSS

dt {
  font-family: sans-serif;
  font-weight: bold;
}

dd {
  font-family: monospace;
  font-size: 1.2em;
  margin-bottom: 12px;
}

.pass {
  color: green;
}

.fail {
  color: red;
}

JavaScript

// returns a string on success, null in failure
function fileNameFromUrl(url) {
  var matches = url.match(/\/([^\/?#]+)[^\/]*$/);
  if (matches.length > 1) {
    return matches[1];
  }
  return null;
}

// test suite
$(function () {
	$('dd').each(function () {
  	var dd = $(this);
    var fileName = fileNameFromUrl(dd.data('url'));
    dd.text(fileName);
    
    if (fileName === 'filename.extension') {
    	dd.addClass('pass');
    }
    else {
    	dd.addClass('fail');
    }
  });
});