在 Web 開發中，有許多情況需要解析 URL，這篇主要學習如何使用 URL 物件實現這一點。
建立一個以下內容的 HTML 文件，並在瀏覽器中開啟。
JavaScript URL parsing
如果你想嘗試本文中的任何內容，可以將其放在
這應該是相當簡單的，但讓我們說清楚。 URL 是網頁的位址，可以在瀏覽器中輸入以取得該網頁的唯一內容。可以在地址欄中看到它：
URL 是統一資源定位符，對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示，是網路上標準資源的位址。網路上的每個文件都有一個唯一的 URL，它包含的資訊指出文件的位置以及瀏覽器應該如何處理它。
此外，如果你不熟悉基本 URL 路徑的工作方式，可以查看此文學習。
URL 不都長的一樣的取得目前URL取得目前頁面的URL 非常簡單- 我們可以使用這是一個快速提醒- 有時URL 可能非常奇怪，如下：
##https://example.com: 1234/page/?a=bhttp://localhost/page.htmlhttps://154.23.54.156/page?x=...#file :///Users/username/folder/file.png
window.location。
console.log(window.location);
var myURL = new URL('https://example.com');myURL 來查看myURL 的內容：
console.log(myURL);
var myURL = new URL('https://example.com:4000/folder/page.html?x=y&a=b#section-2')myURL。
href# 基本上是作為字串(文本)的整個 URL。如果你想把頁面的 URL 作為字串而不是 URL 對象，你可以寫 window.location.href。
console.log(myURL.href); // Output: "https://example.com:4000/folder/page.html?x=y&a=b#section-2"
ftp（檔案傳輸協定）和 ws（WebSocket）。通常，網站將使用 HTTP 或 HTTPS。
雖然如果你的電腦上開啟了文件，你可能正在使用文件協定！ URL物件的協定部分包括：，但不包括 //。讓我們看看 myURL 吧！
console.log(myURL.protocol); // Output: "https:"
google.com 或codetheweb.blog。
console.log(myURL.hostname); // Output: "example.com"
example.com:1234）。大多數網址都沒有連接埠號，這種情況非常罕見。
example.com，我可以在多個不同的連接埠上發送不同的資料。但通常域名預設為一個特定端口，因此不需要端口號。來看看 myURL 的連接埠號碼：
console.log(myURL.port); // Output: "4000"
主机只是主机名和端口放在一起，尝试获取 myURL 的主机：
console.log(myURL.host); // Output: "example.com:4000"
origin 由 URL 的协议，主机名和端口组成。 它基本上是整个 URL，直到端口号结束，如果没有端口号，到主机名结束。
console.log(myURL.origin); // Output: "https://example.com:4000"
pathname 从域名的最后一个 “/” 开始到 “?” 为止,是文件名部分,如果没有 “?” ,则是从域名最后的一个 “/” 开始到 “#” 为止 , 是文件部分, 如果没有 “?” 和 “#” , 那么从域名后的最后一个 “/” 开始到结束 , 都是文件名部分。
console.log(myURL.pathname); // Output: "/folder/page.html"
从 “#” 开始到最后，都是锚部分。可以将哈希值添加到 URL 以直接滚动到具有 ID 为该值的哈希值 的元素。 例如，如果你有一个 id 为 hello 的元素，则可以在 URL 中添加 #hello 就可以直接滚动到这个元素的位置上。通过以下方式可以在 URL 获取 “#” 后面的值:
console.log(myURL.hash); // Output: "#section-2"
你还可以向 URL 添加查询参数。它们是键值对，意味着将特定的“变量”设置为特定值。 查询参数的形式为 key=value。 以下是一些 URL 查询参数的示例：
?key1=value1&key2=value2&key3=value3
请注意，如果 URL 也有 锚点（hash），则查询参数位于 锚点（hash）(也就是 ‘#’)之前，如我们的示例 URL 中所示：
console.log(myURL.search); // Output: "?x=y&a=b"
但是，如果我们想要拆分它们并获取它们的值，那就有点复杂了。
要解析查询参数，我们需要创建一个 URLSearchParams 对象，如下所示：
var searchParams = new URLSearchParams(myURL.search);
然后可以通过调用 searchParams.get（'key'）来获取特定键的值。 使用我们的示例网址 - 这是原始搜索参数：
?x=y&a=b
因此，如果我们调用 searchParams.get（'x'），那么它应该返回 y，而 searchParams.get（'a'）应该返回 b，我们来试试吧！
console.log(searchParams.get('x'));
// Output: "y"
console.log(searchParams.get('a'));
// Output: "b"方法一：正则法
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
// 这样调用：
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));方法二：split拆分法
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i 修改 URL 的中某个参数值
//替换指定传入参数的值,paramName为参数,replaceWith为新值
function replaceParamVal(paramName,replaceWith) {
var oUrl = this.location.href.toString();
var re=eval('/('+ paramName+'=)([^&]*)/gi');
var nUrl = oUrl.replace(re,paramName+'='+replaceWith);
this.location = nUrl;
window.location.href=nUrl
}登入後複製原文地址：https://codetheweb.blog/2019/01/21/javascript-url-parsing/
为了保证的可读性，本文采用意译而非直译。
更多编程相关知识，请访问：编程学习网站！！
以上是詳解使用 JavaScript 解析 URL的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
