如何使用 JavaScript 解析 URL？

给定一个 URL，任务是解析该 URL 并使用 JavaScript 检索所有相关数据。

例子：

URL: https://www.geeksforgeeks.org/courses
When we parse the above URL then we can find
hostname: geeksforgeeks.com
path: /courses

方法一：在这个方法中，我们将使用 createElement() 方法创建一个 HTML 元素，锚标记，然后用它来解析给定的 URL。

      
// Store the URL into variable
var url = "https://geeksforgeeks.org/pathname/?search=query";
      
// Created a parser using createElement() method
var parser = document.createElement("a");
parser.href = url;
      
// Host of the URL
document.write(parser.host + "<br>");
      
// Hostname of the URL
document.write(parser.hostname + "<br>");
      
// Pathname of URL
document.write(parser.pathname + "<br>");
      
// Search in the URL
document.write(parser.search + "<br>");
  

输出：

geeksforgeeks.org
geeksforgeeks.org
/pathname/
?search=query

方法二：在这个方法中，我们将使用 URL() 创建一个新的 URL 对象，然后用它来解析提供的 URL。

      
// Store the URL into variable
var url = 
"https://geeksforgeeks.org:3000/pathname/?search=query";
      
// Created a URL object using URL() method
var parser = new URL(url);
       
// Protocol used in URL
document.write(parser.protocol + "<br>");
       
// Host of the URL
document.write(parser.host + "<br>");
       
// Port in the URL
document.write(parser.port + "<br>");
       
// Hostname of the URL
document.write(parser.hostname + "<br>");
       
// Search in the URL
document.write(parser.search + "<br>");
       
// Search parameter in the URL
document.write(parser.searchParams + "<br>");
  

输出：

https:
geeksforgeeks.org:3000
3000
geeksforgeeks.org
?search=query
search=query