Regex to get first word after slash in URL

Question

I need to get the first word after slash in a url in javascript, I assume using a regex would be ideal.

Here's an idea of what the URLs can possibly look like :

http://mysite.com/section/
http://mysite.com/section/subsection/
http://mysite.com/section-with-dashes/
http://mysite.com/section_with_underscores/

In bold is what I need the regex to match for each scenario, so basically only the first portion after the slash, no matter how many further slashes there are.

I'm at a complete loss here, appreciate the help.

Technically, the first word after a slash in your examples is 'mysite'... What you want is the first part of the url's path component. — Marc B, Apr 20 '11 at 19:20

Brandon McKinney · Accepted Answer · 2011-04-20T19:34:07.503

47

JavaScript with RegEx. This will match anything after the first / until we encounter another /.

window.location.pathname.replace(/^\/([^\/]*).*$/, '$1');

edited Apr 20 '11 at 19:34

answered Apr 20 '11 at 19:28

Brandon McKinney

1,392
10
9

great answer my friend – JAF Jan 22 '16 at 18:14
when the url is www.a.com/1/2, i want /1/ back. and when the url is www.a.com, i want / back, can this be done in one single regex? – techguy2000 Nov 21 '17 at 18:24

score 19 · Answer 2 · answered Apr 20 '11 at 19:24

19

Non-regex.

var link = document.location.href.split('/');
alert(link[3]);

answered Apr 20 '11 at 19:24

Alex Emilov

1,163
3
17
25

score 10 · Answer 3 · edited Oct 07 '21 at 05:49

10

Exploding an url in javascript can be done using the official rfc2396 regex:

var url = "http://www.example.com/path/to/something?query#fragment";
var exp = url.split(/^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/);

This will gives you:

["", "http:", "http", "//www.example.com", "www.example.com", "/path/to/something", "?query", "query", "#fragment", "fragment", ""]

Where you can, in your case, easily retrieve you path with:

const path = exp[5];

And therefore the first word after the path using:

const rootPath = path.split('/')[1];

edited Oct 07 '21 at 05:49

Community

1
1

answered Jan 17 '12 at 14:28

Flavien Volken

16,172
11
86
115

Why are you adding ".split("/")[1]"? – Mau Jan 13 '21 at 07:20
1

because I was young when I wrote this… no, actually this is to get the rootPath (as asked by the question's author), I updated the answer. – Flavien Volken Jan 13 '21 at 14:14

hsz · Answer 4 · 2011-04-20T19:26:16.940

3

Try with:

var url = 'http://mysite.com/section-with-dashes/';
var section = url.match(/^http[s]?:\/\/.*?\/([a-zA-Z-_]+).*$/)[0];

edited Apr 20 '11 at 19:26

answered Apr 20 '11 at 19:20

hsz

143,040
58
252
308

score 1 · Answer 5 · answered Apr 20 '11 at 19:23

My regex is pretty bad, so I will improvise with a less efficient solution :P

// The first part is to ensure you can handle both URLs with the http:// and those without

x = window.location.href.split("http:\/\/")
x = x[x.length-1];
x = x.split("\/")[1]; //Result is in x

score 1 · Answer 6 · answered Apr 20 '11 at 19:32

1

Here is the quick way to get that in javascript

var urlPath = window.location.pathname.split("/");
if (urlPath.length > 1) {
  var first_part = urlPath[1];
  alert(first_part); 
}

answered Apr 20 '11 at 19:32

Ady Ngom

1,232
2
10
12

score 0 · Answer 7 · answered Apr 20 '11 at 19:21

0

$url = 'http://mysite.com/section/subsection';

$path = parse_url($url, PHP_URL_PATH);

$components = explode('/', $path);

$first_part = $components[0];

answered Apr 20 '11 at 19:21

Marc B

348,685
41
398
480

4

For some reason, I'm thinking that the JavaScript interpreter won't like your PHP solution. – Jim Mischel Apr 20 '11 at 19:48
1

After blinking a few times, you're probably right... But since there's a lot of people who think Javascript can execute on the server, I can pretend that PHP can execute on the client :) – Marc B Apr 20 '11 at 19:55

score 0 · Answer 8 · answered Nov 20 '21 at 20:41

In case you want to get what is after the first forward slash (included) you can do like so:

const linkUrl = pathname.replace(/^(.*\/)/, '$1')

like for http://localhost:3000/dashboard/dataExploration will return /dashboard/dataExploration

Note this will help you to change the active link element according to the location pathname in react app for ex :).

Regex to get first word after slash in URL

8 Answers8

Linked