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, Jan 29 '20 at 12:07

sdgluck · Answer 1 · 2020-01-29T12:33:00.490

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.)

thank you so much . but i have a simple problems in results . — BENKHALDOUN, Jan 29 '20 at 13:12

ABDELJALIL AIT ETALEB · Accepted Answer · 2020-01-29T14:35:43.080

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 '20 at 14:35

answered Jan 29 '20 at 12:14

ABDELJALIL AIT ETALEB

146
2
9

1

@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 – ABDELJALIL AIT ETALEB Jan 29 '20 at 14:37

score 1 · Answer 3 · answered Jan 29 '20 at 12:31

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! :)

score 1 · Answer 4 · answered Apr 16 '20 at 09:52

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));

score 0 · Answer 5 · answered Jan 29 '20 at 12:22

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 '20 at 12:22

Sibtain

108
16

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. – Sibtain Jan 29 '20 at 12:24

How can I get pathname values from url in JavaScript?

5 Answers5

Linked