title: javascript: Split an HREF string using a hash character
body: <p>I have the following code that returns the url of each of the links in the function:</p>
  
  <pre><code>var nav_link;
  $('#nav_what-we-do').find('.top-dropdown').find('a').each(function(index, elem) {
      console.log("Descendant: " + elem.tagName + " " + elem.href);
      the_link = $(this);
      nav_link = elem.href.split('#');
      if (nav_link[0] === '/what-we-do/') {
          the_link.attr('href','#'+nav_link[1]);
          the_link.click(function() {
              var tab_id = $(this).attr('href');
              selectTab(tab_id);
              return false;
          });
      }
  });
  </code></pre>
  
  <p>The console prints links like:</p>
  
  <pre><code>Descendant: A http://localhost/testsite/what-we-do/#solutions
  Descendant: A http://localhost/testsite/what-we-do/#features
  Descendant: A http://localhost/testsite/what-we-do/features/test
  Descendant: A http://localhost/testsite/what-we-do/solutions/test2
  </code></pre>
  
  <p>Now I want only those links that contain the hash(#) and split them using this hash.
  Then I want to check if array(0) contains the characters "/what-we-do/".
  I have tried to split the links like this:</p>
  
  <pre><code>nav_link = elem.href.split('#');
  </code></pre>
  
  <p>but the <strong>IF</strong> part is not working.</p>
  
  <p>Can someone tell me what I am doing wrong.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>According to suggestions from T.J.</p>
  
  <pre><code>$('#nav_what-we-do').find('.top-dropdown').find('a').each(function(index, elem) {
      //console.log("Descendant: " + elem.tagName + " " + elem.href);
      var the_link = elem.href,
          hashIndex = the_link.split("#");
      if(hashIndex.length == 2) {
          console.log(hashIndex);
          console.log("Descendant: " + elem.tagName + " " + elem.href);
          console.log('First part is: ' + hashIndex[0].indexOf("/what_we_do/"));
      }
      if (hashIndex.length == 2 &amp;&amp; hashIndex[0].indexOf("/what_we_do/") !== -1) {
          the_link.attr('href', "#" + hashIndex[1]);
          the_link.attr('href', the_link.substring(hashIndex));
          the_link.click(function() {
              var tab_id = $(this).attr('href');
              selectTab(tab_id);
              return false;
          });
      }
  });
  </code></pre>
  
  <p>If I print in console I get:</p>
  
  <pre><code>["http://localhost/testsite/what-we-do/", "solutions"] site_javascript.js:133
  Descendant: A http://localhost/testsite/what-we-do/#solutions site_javascript.js:134
  First part is: -1 site_javascript.js:135
  
  ["http://localhost/testsite/what-we-do/", "features"] site_javascript.js:133
  Descendant: A http://localhost/testsite/what-we-do/#features site_javascript.js:134
  First part is: -1 
  </code></pre>
  
  <p>Where first part should be the value <strong>hashIndex[0].indexOf("/what_we_do/")</strong></p>
  
  <p>What could be going on since <strong>hashIndex</strong> has the string <strong>/what-we-do/</strong>?</p>