How to Parse a Url into Hostname and Path in JavaScript

How do I parse a URL into hostname and path in javascript?

var getLocation = function(href) {
    var l = document.createElement("a");
    l.href = href;
    return l;
};
var l = getLocation("http://example.com/path");
console.debug(l.hostname)
>> "example.com"
console.debug(l.pathname)
>> "/path"

How to split url to get url path in JavaScript

First solution (URL object)

The URL object can be used for parsing, constructing, normalizing, encoding URLs, and so on.

var url = 'http://www.mymainsite.com/somepath/path2/path3/path4';

var pathname = new URL(url).pathname;

console.log(pathname);

Extract hostname name from string

There is no need to parse the string, just pass your URL as an argument to URL constructor:

const url = 'http://www.youtube.com/watch?v=ClkQA2Lb_iE';
const { hostname } = new URL(url);

console.assert(hostname === 'www.youtube.com');

Parse URL with Javascript

You can use

var pagenum = location.pathname.match(/\/page\/(.*)/)[1];

It will extract anything past '/page/' in your URL;

How can I get pathname values from url in JavaScript?

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>

URL parse vs constructor: path missing

As indicated by the OP, the use of the url.parse method is discouraged in favor of the WATWG URL API. The legacy .path attribute returns the combined pathname and search components. Although the preferred WATWG URL API does not have the path attribute, the value required by options.path can be constructed by combining the .pathname and .search attributes.

How to parse the URL & check if that has https & display only the hostname in react

Demo at CodeSandbox.

Source:

import { useState, useEffect } from "react";
export default function App() {
  const [urlSource, setUrlSource] = useState("http://www.google.com");
  const [shortenLink, setShortenLink] = useState("");

  // This will trigger every time when you set new URL.
  useEffect(() => {
    const origin = new URL(urlSource).origin;
    const result = origin.replace("http://", "").replace("https://", "");
    setShortenLink(result);
  }, [urlSource]);

  useEffect(() => {
    // Get URL from DB
    setUrlSource("https://www.stackoverflow.com/questions/ask");
  }, []);

  return <a href={urlSource}>{shortenLink}</a>;

Note: Right click and then Open link in new tab to see it work.

Node.js url.parse() and pathname property

pathname is the path section of the URL, that comes after the host and before the query, including the initial slash if present.

For example:

url.parse('http://stackoverflow.com/questions/17184791').pathname

will give you:

"/questions/17184791"

javascript: Problems using the URL class

By looking at the URL Standard URL representation table of URL's scheme / host combinations, "ftps" scheme is not allowed. However "ftp" is allowed so you may use that.

I also tried parsing the URL using the a element as described in an anwser to How do I parse a URL into hostname and path in javascript?, but it is the same. "ftps" does not work, but "ftp" does.

So the easisest way is probably to parse it with "ftp" and get the values you want, or do the parsing manually.