How can I get pathname values from url in JavaScript?

Question

I have this:

http://example.com/iu4pa9rm8vfh.html?param_1

I want this:

iu4pa9rm8vfh

var url ="http://example.com/iu4pa9rm8vfh.html?param_1";
  document.getElementById("demo").innerHTML = 
"The pathname of this page is :" + url.pathname;

Thanks in advance for any guidance!

update what is the problem in results

<!DOCTYPE html>
<html>

<body>

  <p id="demo"></p>

  <script>
    const url = new URL("http://example.com/iu4pa9rm8vfh.html?param_1")
    const pathname = url.pathname.match(/([0-9a-z]+)/)
    console.log(pathname[0])

    document.getElementById("demo").innerHTML = "The pathname of this page is :" + pathname;
  </script>

</body>

</html>

search for ' string ' methods. You will find there what you need. — Mihai T
– Mihai T, Commented Jan 29, 2020 at 12:07

sdgluck · Accepted Answer · 2020-01-29 12:33:00Z

4

You can use the URL constructor to build a URL object, like so:

const url = new URL("http://example.com/iu4pa9rm8vfh.html?param_1")
console.log(url.pathname)

Then strip the bits you don't want out. Or rather, in this example below, perform a regex on the pathname to retrieve only the alphanumeric characters:

const url = new URL("http://example.com/iu4pa9rm8vfh.html?param_1")
const pathname = url.pathname.match(/([0-9a-z]+)/)
console.log(pathname[0])

Note that if you supply an invalid URL to the URL constructor then it will throw an error, so make sure you catch that and handle it gracefully.

More info on URL:

see this question/answer: https://stackoverflow.com/a/31415172/2039244
or read the MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/URL/URL)

As you tagged this question with the jquery tag (perhaps you require an answer that works in <=IE11 as these browsers do not support the URL constructor), then here is an approach you can use:

function parseUrl(url) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

const url = parseUrl('http://example.com/iu4pa9rm8vfh.html?param_1')
const pathname = url.pathname.match(/([0-9a-z]+)/)
console.log(pathname[0])

(Modified from this answer.)

edited Jan 29, 2020 at 12:33

answered Jan 29, 2020 at 12:07

sdgluck

27.8k12 gold badges82 silver badges96 bronze badges

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

1 Comment

BENKHALDOUN Over a year ago

thank you so much . but i have a simple problems in results .

ABDELJALIL AIT ETALEB · Accepted Answer · 2020-01-29 14:35:43Z

3

you can do it like this :

const url = new URL('http://example.com/iu4pa9rm8vfh.html?param_1')
let path = url.pathname.split('.')[0].replace('/','')
document.getElementById("demo").innerHTML = "The pathname of this page is :" + path;

<!DOCTYPE html>
<html>

<body>

  <p id="demo"></p>

  <script>
    const url = new URL('http://example.com/iu4pa9rm8vfh.html?param_1')
    let path = url.pathname.split('.')[0].replace('/','')
    document.getElementById("demo").innerHTML = "The pathname of this page is :" + path;
  </script>

</body>

</html>

edited Jan 29, 2020 at 14:35

answered Jan 29, 2020 at 12:14

ABDELJALIL AIT ETALEB

1462 silver badges9 bronze badges

1 Comment

ABDELJALIL AIT ETALEB Over a year ago

@BENKHALDOUN try run my snippet and see if that's what u wanted , or in your code pathname is an array select the first element like this pathname[0] , you did it in the console.log but not in innerHTML

Ashish Bhardwaj · Accepted Answer · 2020-01-29 12:31:10Z

1

There are a number of ways in which you can fetch out the pathname.

But technically speaking you should use the URL constructor method to create an object out of the URL. And then use its property to fetch the pathname.

Property name: pathname

const url = new URL("http://example.com/iu4pa9rm8vfh.html?param_1")
console.log(url.pathname.replace("/", "").replace(".html",""))

I have used the replace method to remove the slash and .html tag present in the pathname. I hope it helps! :)

answered Jan 29, 2020 at 12:31

Ashish Bhardwaj

1585 bronze badges

Comments

Ettiene Grobler · Accepted Answer · 2020-04-16 09:52:09Z

1

Use the Javascript URL Api if possible: https://developer.mozilla.org/en-US/docs/Web/API/URL_API

let addr = new URL("http://example.com/iu4pa9rm8vfh.html?param_1");
// addr.pathname will return "/iu4pa9rm8vfh.html"
// Many wasys to skin this cat, but below is one way using split and slice
// Result will be "iu4pa9rm8vfh"
console.log(addr.pathname.split('.')[0].slice(1));

answered Apr 16, 2020 at 9:52

Ettiene Grobler

5253 silver badges15 bronze badges

Comments

Sibtain · Accepted Answer · 2020-01-29 12:22:03Z

0

You can do it on a variety of different ways but I would like to suggest you to use subString(startIndex,endIndex).

Following code will return any thing between .com/ and .html

var url = "http://example.com/iu4pa9rm8vfh.html?param_1";

url.substring(url.indexOf('.com/')+5,url.indexOf('.html'));

answered Jan 29, 2020 at 12:22

Sibtain

10817 bronze badges

1 Comment

Sibtain Over a year ago

You can put hard coded indexes in Substring.e.g Substring(19,25) as In your case I believe starting index is not going to change.

Collectives™ on Stack Overflow

How can I get pathname values from url in JavaScript?

5 Answers 5

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related