Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Liam Maclachlan
Liam Maclachlan
22,805 Points

Can anyone explain why this statment is written in this fashion?

I am working with some pre-written code and am wondering why

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,''))

can't be written like this

if (location.pathname == this.pathname)

Any ideas why the extra regular expression in .replace(/^\//,'') is needed?

3 Answers

Someone decided to share Best Answer option here?

$('a').each(function(){
  if( this.pathname[0] !== "/" ) {
    console.log( this.pathname );
  }
});

On main forum page returned email help@teamtreehouse.com. I've started investigation and found this link saying:

The odd thing about this behavior is that window.location.pathname returns the leading 
slash (after the hostname) in all versions of IE, same as all other browsers.

It is only the location object of a hyperlink ('a element') that returns the path without 
the slash in IE (and Opera as well).

So, regexp in code about compatibility! Question solved! Have a nice weekend, guys.

Good one, Daniel! Good catch! Liam, I stand by what I say, and so the best answer should go to Daniel :)

Liam Maclachlan
Liam Maclachlan
22,805 Points

Don't know if that gives me an answer, though. I get this may be answering the question but it is still not clear in my head why this is happening.

It's checking the location in the browser, which should return the same result, right? Either, both results will return a leading '/', using both 'this.pathname' and 'location.pathname'.

Or is this saying that 'location.pathname' may return the leading slash (in some browsers) and 'this.pathname' will not?

EDIT: Ooh!! Just read the second answer down on stackoverflow. Said the same thing but just made more sense. If it is in the Anchor tag, it won't return a forward slash but pathname will do in certain browser. Get it now. Thanks guys :)

P.S: Dan. You gave some great answers but try not to upvote your own answers before people have a chance to check them out. That can really get people off on the wrong foot. Just a friendly heads up on forum etiquette, man.

Hi Liam,

I recognize that code from CSS Tricks, which is an awesome site that I love myself! All that regular expression does is remove the very beginning / from the path name. I've messed around with that smooth scroll code and couldn't replicate a scenario where it would be necessary to remove the leading / from the path name because the hash links' pathname will always match up with the location pathname.

Liam Maclachlan
Liam Maclachlan
22,805 Points

Hello again, man. Fancy seeing you here. Haha. That is what I was thinking. It seemed ridiculous to remove the same character on both examples, unless there is a scenario where the leading '/' doesn't appear in one. Think that is possible?

Hahaha howdy stranger! :D

I couldn't set up a scenario where the pathname's wouldn't match. I set up some links and removed that regular expression. Here's a couple links I set up and tested:

<a href="#top">An inside link 1</a>
<a href="test.html#top">An inside link 2</a>

where test.html was the page I was testing the links on. The pathnames were matching for those regardless of whether that beginning / character was there or not. Most of the time, CSS Tricks gives out great information about the code they post, but this is definitely not one of those times lol.

Liam Maclachlan
Liam Maclachlan
22,805 Points

I thought that thread was worth pulling at. You know, when something just doesn't sit right? It was staring at me and needed to be corrected >.>

Anyway! Thanks again man. Much appreciate :p

This is one of those times where I would hope someone would come along and provide a scenario where you would need to remove that beginning / character lol If they provide a valid example, you gotta switch the best answer over to them lol :D I really don't mind it. And hey I do what I do man, and that's all I can do haha

Liam Maclachlan
Liam Maclachlan
22,805 Points

I actually tried to add a forward slash to the beggining of the id selector in the HTML....funnily enough, it did not work!

Code edited....bytes have been saved =p

You saved teh bytes!!! You're a god amongst men, Liam! :D

Welcome to the Opera and IE world. Answer is below.

The good question will be: "how it possible that location.pathname is not equal to this.pathname"?

To answer your question it will be great to share your code with some tools like treehouse's workspace or codepen or jsfiddle tool. It's not possible to know without whole enviroment what "this" is. All regexp you have is doing remove first trailing slash.

Equation meaning with regexp: "whenever it has trailing slash we will compare them without it".

Liam Maclachlan
Liam Maclachlan
22,805 Points

You can simply ask for the code, man.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});