title: How do I avoid double URL encoding when rendering URLs in my website?
body: <p>Users provide both properly escaped URLs and raw URLs to my website in a text input; for example I consider these two URLs equivalent:</p>
  
  <pre><code>https://www.cool.com/cool%20beans
  https://www.cool.com/cool beans
  </code></pre>
  
  <p>Now I want to render these as <code>&lt;a&gt;</code> tags later, when viewing this data.  I am stuck between encoding the given text and getting these links:</p>
  
  <pre><code>&lt;a href="https://www.cool.com/cool%2520beans"&gt;   &lt;!-- This one is broken! --&gt;
  &lt;a href="https://www.cool.com/cool%20beans"&gt;
  </code></pre>
  
  <p>Or not encoding it and getting this:</p>
  
  <pre><code>&lt;a href="https://www.cool.com/cool%20beans"&gt;
  &lt;a href="https://www.cool.com/cool beans"&gt;       &lt;!-- This one is broken! --&gt;
  </code></pre>
  
  <p>What's the best way out from a user experience standpoint with modern browsers?  I'm torn between doing a decoding pass over their input, or the second option I listed above where we don't encode the <code>href</code> attribute.</p>