The Javascript equivalent of this PHP function

Question

So I'm trying to put together a navigation bar and I've been using PHP because I'm not familiar with Javascript. I want to create a function that will return the filename of the current page I'm on and then apply css classes appropriately.

the php code

function setNav($section)
{
    $curSection = end(explode('/', $_SERVER['SCRIPT_NAME']));
    if ($section == $curSection)
    {
        echo ' class="active" ';
    }
}

And then I would just initialize it in the html as follows

<a href="abc.def" <?php setNav('index.php'); ?> >Home </a>

For obvious reasons I'd rather do this in JavaScript or Jquery, but I'm having some trouble putting together the function. I've looked at a few tutorials, but they leave out a few things.

1. How to pull just the last part of the file name. I've seen a couple ideas doing something like:

    <script type="text/javascript"> var url = document.location.href; url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#")); url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?")); url = url.substring(url.lastIndexOf("/") + 1, url.length); alert(url); </script> 

   But then I run into problem 2. Also I understand how substring works but I have no idea what he's doing w/ the second argument for example '(url.indexOf("#") == -1) ? url.length : url.indexOf("#")' I searched google, w3schools and a couple places for an explanation, also looked into advanced usage of substring() and nothing came up. Any guidance is appreciated.

2. If say the file is the index, the url looks something like localhost/abc_corp/ so doing a document.URL call brings up "localhost/abc_corp/" and leaves out the index.php part.

Any help is appreciated in advance.

Answer 1

var scriptName = location.href.substring（（location.protocol.length + location.hostname.length + 3））。split（'？'）;

Answer 2

var schema = document.location.href.substring(0, document.location.href.lastIndexOf(document.domain + '/'));
var scriptName = document.location.href.replace(schema + document.domain, '');

Tested in Chrome Inspector against this same page:

// document.location.href = "https://stackoverflow.com/questions/7909686/the-javascript-equivalent-of-this-php-function"

schema = "https://"
document.domain = "stackoverflow.com"
scriptName = "/questions/7909686/the-javascript-equivalent-of-this-php-function"

Answer 3

To solve problem 2 just if the last character in the string is a / and if so append a fake filename.

But I agree with Jordan - it's not obvious at all why you would do this. Doing it in PHP is the correct thing.

Answer 4

2.If there is no filename present in the URL, javascript will not know anything about the name of the file that made the response. When localhost/abc_corp/ will result in a call to index.php this is a serverside redirect, forced by a server-setting, eg Apache's DirectoryIndex

Answer 5

If you have a working PHP solution I'm not sure why you want to convert it to JavaScript. PHP is a better place to do it anyway.

Anyway, to explain what your JS is doing, if you have a URL like this:

http://www.somedomain.com/ somepage.php ?someparam=234#123123

it will throw away anything after the "?" and/or "#", and anything before the last "/", thus keeping just the bit that I put in bold.

If your URL does not contain any "/" characters, eg, you just have "www.somedomain.com", then it will return the whole string, it can't invent a filename for you.

How this works: first note that aString.indexOf(param) returns -1 if aSring does not contain param , otherwise it returns the index of the first instance. So the second argument to substring is being set to one of two values depending on what indexOf finds. The following:

var url = document.location.href;
url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));

starts with the full URL, then it checks whether there is a "#" character - if there is not then the substring takes the whole string (0 through to url.length ), otherwise it takes the string up to but not including the "#". Then:

url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));

Same idea, but with "?". If there isn't one keep the whole string, otherwise keep everything up to but not including the "?". Then:

url = url.substring(url.lastIndexOf("/") + 1, url.length);

Takes everything from the character after the last "/" (which will be the first character ("-1 + 1") if there are none) through to the end of the string.

Answer 6

var url = document.location.href;
url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
url = url.substring(url.lastIndexOf("/") + 1, url.length);
alert(url);

So the first url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#")); is checking to see if there is a pound symbol and if there is, it takes the substring from 0 to the position of the pound symbol if there is no pound it just takes it from 0 to the whole length (ie does nothing)

the second does the same thing with the question mark.

Problem two I could only solve by parsing for special cases.