title: How to extract hash substring values from window.location and write them into HTML?
body: <p>I'm trying to <strong>extract hash substring values from window.location and write them into HTML for the user to see</strong>, with an URL syntax that disallows use of <code>?</code> as query string delimiter.</p>
  
  <p>So I am working with this simple page:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;input type="button" id="test" value="Test" /&gt;
  &lt;!-- input buton is here just to test the script --&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(function() {
      $('#test').click(function() {
          window.location = (window.location);
          GetURLParameter('source');  
      });
  });
  
  function GetURLParameter(sParam) {
      var sPageURL = window.location.hash.substring(1);
      var sURLVariables = sPageURL.split('&amp;');
      for (var i = 0; i &lt; sURLVariables.length; i++) {
          var sParameterName = sURLVariables[i].split('=');
          if (sParameterName[0] == sParam) {
              alert(sParameterName[1]);
              return sParameterName[1];
          }
      }
  } 
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I call the page with an URL that looks like this, this the client window.location:</p>
  
  <pre><code>http://example.com/pagename.html#source=FOO&amp;medium=BAR&amp;campaign=FRED
  </code></pre>
  
  <p>I want to write FOO, BAR, FRED into the page, so the user can see it. </p>
  
  <p>(notice no <code>?</code> in the URL as query string delimiter, just <code>#</code>)</p>
  
  <p>... On input button click, I get a successful alert (as expected) that shows the source "FOO" from the URL. Great.</p>
  
  <p>But <strong>how do I get the other two SParamaterNames, and then how do I write them into the page as HTML</strong> for the user to see, rather than return an alert?</p>
  
  <hr>
  
  <p><strong>UPDATE UPDATE UPDATE</strong> (below)</p>
  
  <p>Thanks, @sam-baker!! ...  Great answer. I used your first example, but changed the first two lines in your code to <code>$(window).load(function() {</code> so that the script runs onload, which was my intent.</p>
  
  <p>So, I am still using this same URL: </p>
  
  <pre><code>http://example.com/pagename.html#source=FOO&amp;medium=BAR&amp;campaign=FRED
  </code></pre>
  
  <p>But I want to insert the hash substring values into hardcoded HTML, like this:</p>
  
  <pre><code>&lt;body&gt;
  &lt;span class="style1"&gt;$need_source_value_here&lt;/span&gt;&lt;br /&gt;
  &lt;span class="style1"&gt;$need_medium_value_here&lt;/span&gt;&lt;br /&gt;
  &lt;span class="style3"&gt;$need_campaign_value_here&lt;/span&gt;&lt;br /&gt;
  </code></pre>
  
  <p>I will style each value individually, by hardcoding span or div styles into the HTML.</p>
  
  <hr>
  
  <p><strong>UPDATE UPDATE UPDATE</strong></p>
  
  <p><strong>Here's the solution:</strong> </p>
  
  <p>Hit the following simple page in the code example bellow with this URL syntax, and it will output the substring vars to the user, onload, wherever you want them on the page. </p>
  
  <pre><code>http://example.com/pagename.html#dyntext=FOO+MAN+CHU&amp;dynterm=BAR+HOPPING&amp;dynimage=FRED+IS+DEAD
  
  
  
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;span id="dyntext-span" style="font-weight: bold;"&gt;&lt;/span&gt;&lt;br /&gt;
  &lt;span id="dynterm-span" style="font-style: italic;"&gt;&lt;/span&gt;&lt;br /&gt;
  &lt;span id="dynimage-span" style="text-decoration: underline;"&gt;&lt;/span&gt;&lt;br /&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
          var tags = ["dyntext", "dynterm", "dynimage"];
          for (var i = 0; i &lt; tags.length; ++i) {
              var param = GetURLParameter(tags[i]);
              if (param) {
                  var dyntext = GetURLParameter('dyntext');
                  var dynterm = GetURLParameter('dynterm');
                  var dynimage = GetURLParameter('dynimage');
              }
          }
  
          var elem = document.getElementById("dyntext-span");
          var text = document.createTextNode(dyntext);
          elem.appendChild(text);
          var elem = document.getElementById("dynterm-span");
          var text = document.createTextNode(dynterm);
          elem.appendChild(text);
          var elem = document.getElementById("dynimage-span");
          var text = document.createTextNode(dynimage);
          elem.appendChild(text);     
  });
  
  function GetURLParameter(sParam) {
      var sPageURL = window.location.hash.substring(1);
      var sURLVariables = sPageURL.split('&amp;');
      for (var i = 0; i &lt; sURLVariables.length; i++) {
          var sParameterName = sURLVariables[i].split('=');
          if (sParameterName[0] == sParam) {
              return sParameterName[1];
          }
      }
  }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Had some crossbroswer issues because <code>innerText</code> is not supported by Firefox, did not want to deal with cross-browser fallback to <code>textContent</code>, etc, so just walked DOM tree and created text nodes, replacing the <code>+</code> unicode character with space. Hope this is useful to you!</p>