3

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>

3

5 Answers 5

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:


As you tagged this question with the 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.)

1
  • thank you so much . but i have a simple problems in results . Jan 29, 2020 at 13:12
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>

1
  • 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 Jan 29, 2020 at 14:37
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! :)

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

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

1
  • 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, 2020 at 12:24

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.