SOURCE

function changeEventHandler() {

  var rBegin = '(?=^s*\\b)';
  var rEnd = '(?=\\b\\s+$|$)';
  var rEndSplit = rEnd.replace('=', '!');;
  var rPath = '((?:.split)*(?:\\w+\\.)*(?:.split)*(?:\\w+\\.)*[\\\\\\/])?'.replace(/split/g, rEndSplit);;
  var rName = '([^\\\\\\/]+?)';
  var rSuffix = '(?:\\.([^\\.\\s]+)\\b)?';

  var regContent = rBegin + rPath + rName + rSuffix + rEnd;

  var reg = new RegExp(regContent, '');

  var inputContent = document.getElementById("input").value;

  var match = inputContent.match(reg);

  document.getElementById("path").innerHTML = match[1];
  document.getElementById("name").innerHTML = match[2];
  document.getElementById("suffix").innerHTML = match[3];
}
window.onload = function() {
  changeEventHandler(event);
}

<div>
<input id="input" onchange="changeEventHandler()" value='file:///D:/Users/zhupf/Desktop/test.back.html' style="width: 61.8%" />
<button onclick="changeEventHandler()">提取</button>
<div>
<table >
  <tr><td>路　径:</td><td id="path"></td></tr>  
  <tr><td>文件名:</td><td id="name"></td></tr>  
  <tr><td>后　缀:</td><td id="suffix"></td></tr>  
</table>