title: How should fragment part of a URL be escaped?
body: <p>If a URL has unusual characters in the fragment part (i.e. after #) how should they be (percent) escaped? I can't find a consistent answer in how browsers handle this, which is probably a good reason not to have them, but I'd like to know what the 'right' answer is. </p>
  
  <p>My testing seems to suggest not to escape at all, but that this is only reliable when following links, not when pasting into a browser's address bar.</p>
  
  <p>I wrote a little web page as appended. I then pasted the following link into various browsers. The 'go' link in the page is there to see what happens when you click a link as opposed to pasting it (which seems to differ in some browsers)</p>
  
  <p><a href="http://www.frankieandshadow.com/test.html/?new=1#" rel="noreferrer">http://www.frankieandshadow.com/test.html/?new=1#</a>{# &amp;}%7B%23%20%26%7D</p>
  
  <p>(I notice stackoverlow's pattern match for URLs doesn't like that - I intend the whole line; again there may be a clue for me there!)</p>
  
  <p><strong>Chrome</strong> appears to do no unescaping of any kind, and produces consistently: </p>
  
  <p>#{# &amp;}%7B%23%20%26%7D</p>
  
  <p><strong>Firefox</strong> substitutes some, but not all, of the escaped characters pasted with their non escaped equivalents, and then produces</p>
  
  <p>#{# &amp;}{# &amp;}</p>
  
  <p>and this is the same if you follow the link</p>
  
  <p><strong>Safari</strong> (on PC) does the opposite: it encodes non-encoded unusual characters on paste, and then produces</p>
  
  <p>#%7B%23%20&amp;%7D%7B%23%20%26%7D</p>
  
  <p>but following the link is different, producing</p>
  
  <p>#{# &amp;}%7B%23%20%26%7D</p>
  
  <p><strong>IE9</strong>, amazingly, behaves just like Chrome</p>
  
  <p><strong>IE7</strong> replaces the real space with %20 on paste but otherwise leaves the URL alone, and produces</p>
  
  <p>#{#%20&amp;}%7B%23%20%26%7D</p>
  
  <p>and if you click the link, it gives</p>
  
  <p>#{# &amp;}%7B%23%20%26%7D</p>
  
  <hr>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  function wibble() {
    document.getElementById("wobble").innerHTML = 
      location.hash.replace(/&amp;/g,"&amp;amp;").replace(/&lt;/g,"&amp;lt;").replace(/&gt;/g,"&amp;gt;");
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload='wibble()'&gt;
  &lt;div id='wobble'&gt;&lt;/div&gt;
  &lt;a href='/test.html?new=1#{# &amp;}%7B%23%20%26%7D'&gt;go&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>