title: Problems with escape characters in JavaScript + UNIX
body: <p>I'm trying to make a custom <code>&lt;input type="file"&gt;</code> button for a system, but the browser always gives me errors and when it doesn't, the button doesn't work as intended. I suspect I'm not using the escape operators correctly. Either that, or my UNIX environment is interfering with the correct functioning.</p>
  
  <p>I've tried this in multiple ways, and have in mind the error is always the same: "Uncaught SyntaxError: Invalid or unexpected token".</p>
  
  <p><code>fileName = e.target.value.split("\\").pop();</code> Throws out the error. This should be the correct code as it's what I'm trying to do;</p>
  
  <p><code>fileName = e.target.value.split("\\\\").pop();</code> Doesn't throw an error, but makes the source code look like <code>fileName = e.target.value.split("\\").pop();</code>. This doesn't work as intended as what I want is only one "\" backslash.</p>
  
  <p>Code is as follows:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple /&gt;
  &lt;label for="file"&gt;&lt;span&gt;Choose a file&lt;/span&gt;&lt;/label&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }
  
  .inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
    cursor: pointer;
  }
  
  .inputfile:focus + label,
  .inputfile + label:hover {
    background-color: red;
  }
  
  .inputfile:focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
  }
  </code></pre>
  
  <pre><code>var inputs = document.querySelectorAll('.inputfile');
  Array.prototype.forEach.call(inputs, function(input) {
        var label = input.nextElementSibling,
          labelVal = label.innerHTML;
  
        input.addEventListener('change', function(e) {
            var fileName = '';
            if (this.files &amp;&amp; this.files.length &gt; 1)
              fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
            else
              fileName = e.target.value.split("\\").pop();
  
                if (fileName)
                  label.querySelector('span').innerHTML = fileName;
                else
                  label.innerHTML = fileName ? fileName : labelVal;
              });
        });
  
  </code></pre>
  
  <p><a href="https://jsfiddle.net/q5m4z2kw/2/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>What I'm trying to do is make the custom button change its innerHtml to the name of the file the user selected.</p>
  
  <p>The JSFiddle works as intended with only two "\" backslashes. This is why I think UNIX is a suspect - "\" is also a special character, meaning a single-character quote. All web code runs inside this UNIX environment - we compile everything using it. </p>
  
  <p>Any ideas or alternatives?</p>