converting URL string into slug

Question

I have a string that looks like this "/testpress/about/" and I need to convert it to "about".

I can easily remove testpress by doing the following:

var slug=relativeUrl.replace("testpress", "");

I have not had luck with removing the slashes:

noslash = slug.replace(/\\/g, '');

How can I go about this so I am left with the desired slug?

slug.replace(/\//g, ''); - you're trying to replace backslashes, but you want to remove forward slashes from your example of "/testpress/about/" — ɴᴀᴛᴇ ᴅᴇᴠ
– ɴᴀᴛᴇ ᴅᴇᴠ, Commented May 23, 2013 at 14:50

fotanus · Accepted Answer · 2013-05-23 14:56:25Z

5

It is because you are using the wrong slashes

noslash = slug.replace(/\//g, '');

Look here:

> "/testpress/about/".replace(/\//g, '')
'testpressabout'

edited May 23, 2013 at 14:56

answered May 23, 2013 at 14:50

fotanus

20.3k15 gold badges81 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Coxon · Accepted Answer · 2013-05-23 15:17:00Z

3

I like the RegEx method. That way you can see all the path components.

var path = "/testpress/about/";
var pathComponents = path.match(/([^\/]+)/g);

// to get current page... (last element)
var currentPageSlug = pathComponents[pathComponents.length - 1];

This will work regardless of the trailing slash. The good thing is that no matter how deep the URL structure is, you can always get the path components by referencing them as pathComponents[0], pathComponents[1], pathComponents[2], etc ...

With the RegEx method you also do not need to define 'testpress' in the replace/match/split function. That way it makes your code more reusable.

edited May 23, 2013 at 15:17

answered May 23, 2013 at 15:11

Michael Coxon

5,5401 gold badge29 silver badges54 bronze badges

Comments

Daniel Pecher · Accepted Answer · 2013-05-23 14:54:56Z

1

Why don't you use

"testpress/about/".split('\/')

which will yield

["testpress", "about", ""]

and there you have it: second element of the array.

answered May 23, 2013 at 14:54

Daniel Pecher

2022 silver badges10 bronze badges

Comments

Ed_ · Accepted Answer · 2013-05-23 15:06:52Z

1

You could also use a regular expression to match everything after the slash but before the end of the string, like so:

var text = "testpress/about";
var slug = text.match(/([^\/]+)\/?$/)[1];
//slug -> "about"

edited May 23, 2013 at 15:06

answered May 23, 2013 at 14:59

Ed_

19.2k8 gold badges48 silver badges75 bronze badges

2 Comments

Michael Coxon Over a year ago

The question uses a trailing slash so this will not work. add '\/?' before the '$' to match.

Ed_ Over a year ago

good point! Updated to include this. Also added a group so that the trailing slash will not be returned.

Dustin · Accepted Answer · 2016-07-22 23:03:24Z

0

I like @Michael Coxon's answer but the accepted solution doesn't take into account query parameters or things like '.html'. You could try the following:

getSlugFromUrl = function(url) {
    var urlComponents = url.match(/([^\/]+)/g),
      uri = urlComponents[urlComponents.length - 1];      

    uri = uri.split(/[\.\?\&]/g);
    if (uri.length) {
      slug = uri[0];
    }
    return slug;
  };

This should return only the slug and not anything afterwards.

JSBin here: http://jsbin.com/sonowolise/edit?html,js,console

answered Jul 22, 2016 at 23:03

Dustin

3762 silver badges5 bronze badges

Collectives™ on Stack Overflow

converting URL string into slug

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related