使用JavaScript解析URL的方法示例
前言
在 Web 開(kāi)發(fā)中，有許多情況需要解析 URL,這篇主要學(xué)習(xí)如何使用 URL 對(duì)象實(shí)現(xiàn)這一點(diǎn)。下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧
開(kāi)始
創(chuàng)建一個(gè)以下內(nèi)容的 HTML 文件，并在瀏覽器中打開(kāi)。
<html> <head> <title>JavaScript URL parsing</title> </head> <body> <script> // 激動(dòng)人心的代碼即將寫(xiě)在這里 </script> </body> </html>
如果你想嘗試本文中的任何內(nèi)容，可以將其放在 <script> 標(biāo)記中，保存，重新加載頁(yè)面，看看會(huì)發(fā)生什么！ 在本教程中，將使用 console.log 來(lái)打印所需要的內(nèi)容，你可以打開(kāi)開(kāi)發(fā)都工具，來(lái)查看內(nèi)容。
什么是 URL
這應(yīng)該是相當(dāng)簡(jiǎn)單的，但讓我們說(shuō)清楚。 URL 是網(wǎng)頁(yè)的地址，可以在瀏覽器中輸入以獲取該網(wǎng)頁(yè)的唯一內(nèi)容。 可以在地址欄中看到它：
URL 是統(tǒng)一資源定位符，對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問(wèn)方法的一種簡(jiǎn)潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址?；ヂ?lián)網(wǎng)上的每個(gè)文件都有一個(gè)唯一的 URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。
此外，如果你不熟悉基本 URL 路徑的工作方式，可以查看此文學(xué)習(xí)。
URL 不都長(zhǎng)的一樣的
這是一個(gè)快速提醒 - 有時(shí) URL 可能非常奇怪，如下：
https://example.com:1234/page/?a=b
http://localhost/page.html
https://154.23.54.156/page?x=...
file:///Users/username/folder/file.png
獲取當(dāng)前URL
獲取當(dāng)前頁(yè)面的 URL 非常簡(jiǎn)單 - 我們可以使用 window.location。
試著把這個(gè)添加到我們形如寫(xiě)的的腳本中:
console.log(window.location);
查看瀏覽器的控制臺(tái)：
不是你想要的?這是因?yàn)樗环祷啬阍跒g覽器中看到的實(shí)際 URL 地址——它返回的是一個(gè) URL 對(duì)象。使用這個(gè) URL 對(duì)象，我們可以解析 URL 的不同部分，接下來(lái)就會(huì)講到。
創(chuàng)建 URL 對(duì)象
很快就會(huì)看到，可以使用 URL 對(duì)象來(lái)了解 URL 的不同部分。如果你想對(duì)任何 URL 執(zhí)行此操作，而不僅僅是當(dāng)前頁(yè)面的 URL，該怎么辦？ 我們可以通過(guò)創(chuàng)建一個(gè)新的 URL 對(duì)象來(lái)實(shí)現(xiàn)。 以下是如何創(chuàng)建一個(gè)：
var myURL = new URL('https://example.com');
就這么簡(jiǎn)單！ 可以打印 myURL 來(lái)查看 myURL 的內(nèi)容：
console.log(myURL);
出于本文的目的，將 myURL 設(shè)置為這個(gè)值：
var myURL = new URL('https://example.com:4000/folder/page.html?x=y&a=b#section-2')
將其復(fù)制并粘貼到 <script> 元素中，以便你可以繼續(xù)操作！ 這個(gè) URL 的某些部分可能不熟悉，因?yàn)樗鼈儾⒉豢偸潜皇褂?- 但你將在下面了解它們，所以不要擔(dān)心！
URL 對(duì)象的結(jié)構(gòu)
使用 URL 對(duì)象，可以非常輕松地獲取 URL 的不同部分。 以下是你可以從 URL 對(duì)象獲得的所有內(nèi)容。 對(duì)于這些示例，我們將使用上面設(shè)置的 myURL。
href
URL 的 href 基本上是作為字符串(文本)的整個(gè) URL。如果你想把頁(yè)面的 URL 作為字符串而不是 URL 對(duì)象，你可以寫(xiě) window.location.href。
console.log(myURL.href); // Output: https://example.com:4000/folder/page.html?x=y&a=b#section-2
協(xié)議 (protocol)
URL的協(xié)議是一開(kāi)始的部分。這告訴瀏覽器如何訪問(wèn)該頁(yè)面，例如通過(guò) HTTP 或 HTTPS。 但是還有很多其他協(xié)議，比如 ftp（文件傳輸協(xié)議）和 ws（WebSocket）。通常，網(wǎng)站將使用 HTTP 或 HTTPS。
雖然如果你的計(jì)算機(jī)上打開(kāi)了文件，你可能正在使用文件協(xié)議！ URL對(duì)象的協(xié)議部分包括：，但不包括 //。 讓我們看看 myURL 吧！
console.log(myURL.protocol); // Output: "https:"
主機(jī)名（hostname）
主機(jī)名是站點(diǎn)的域名。 如果你不熟悉域名，則它是在瀏覽器中看到的URL的主要部分 - 例如 google.com 或codetheweb.blog。
console.log(myURL.hostname); // Output: "example.com"
端口（port）
URL 的端口號(hào)位于域名后面，用冒號(hào)分隔（例如 example.com:1234）。 大多數(shù)網(wǎng)址都沒(méi)有端口號(hào)，這種情況非常罕見(jiàn)。
端口號(hào)是服務(wù)器上用于獲取數(shù)據(jù)的特定“通道” - 因此，如果我擁有 example.com，我可以在多個(gè)不同的端口上發(fā)送不同的數(shù)據(jù)。 但通常域名默認(rèn)為一個(gè)特定端口，因此不需要端口號(hào)。 來(lái)看看 myURL 的端口號(hào)：
console.log(myURL.port); // Output: "4000"
主機(jī)（host）
主機(jī)只是主機(jī)名和端口放在一起，嘗試獲取 myURL 的主機(jī)：
console.log(myURL.host); // Output: "example.com:4000"
來(lái)源（origin）
origin 由 URL 的協(xié)議，主機(jī)名和端口組成。 它基本上是整個(gè) URL，直到端口號(hào)結(jié)束，如果沒(méi)有端口號(hào)，到主機(jī)名結(jié)束。
console.log(myURL.origin); // Output: https://example.com:4000
pathname（文件名）
pathname 從域名的最后一個(gè) “/” 開(kāi)始到 “?” 為止,是文件名部分,如果沒(méi)有 “?” ,則是從域名最后的一個(gè) “/” 開(kāi)始到 “#” 為止 , 是文件部分, 如果沒(méi)有 “?” 和 “#” , 那么從域名后的最后一個(gè) “/” 開(kāi)始到結(jié)束 , 都是文件名部分。
console.log(myURL.pathname); // Output: "/folder/page.html"
錨點(diǎn)（hash）
從 “#” 開(kāi)始到最后，都是錨部分。可以將哈希值添加到 URL 以直接滾動(dòng)到具有 ID 為該值的哈希值 的元素。 例如，如果你有一個(gè) id 為 hello 的元素，則可以在 URL 中添加 #hello 就可以直接滾動(dòng)到這個(gè)元素的位置上。通過(guò)以下方式可以在 URL 獲取 “#” 后面的值:
console.log(myURL.hash); // Output: "#section-2"
查詢參數(shù) (search)
你還可以向 URL 添加查詢參數(shù)。它們是鍵值對(duì)，意味著將特定的“變量”設(shè)置為特定值。 查詢參數(shù)的形式為 key=value。 以下是一些 URL 查詢參數(shù)的示例：
?key1=value1&key2=value2&key3=value3
請(qǐng)注意，如果 URL 也有 錨點(diǎn)（hash），則查詢參數(shù)位于 錨點(diǎn)（hash）(也就是 ‘#')之前，如我們的示例 URL 中所示：
console.log(myURL.search); // Output: "?x=y&a=b"
但是，如果我們想要拆分它們并獲取它們的值，那就有點(diǎn)復(fù)雜了。
使用 URLSearchParams 解析查詢參數(shù)
要解析查詢參數(shù)，我們需要?jiǎng)?chuàng)建一個(gè) URLSearchParams 對(duì)象，如下所示：
var searchParams = new URLSearchParams(myURL.search);
然后可以通過(guò)調(diào)用 searchParams.get（'key'）來(lái)獲取特定鍵的值。 使用我們的示例網(wǎng)址 - 這是原始搜索參數(shù)：
?x=y&a=b
因此，如果我們調(diào)用 searchParams.get（'x'），那么它應(yīng)該返回 y，而 searchParams.get（'a'）應(yīng)該返回 b，我們來(lái)試試吧！
console.log(searchParams.get('x'));
// Output: "y"
console.log(searchParams.get('a'));
// Output: "b"
擴(kuò)展
獲取 URL 的中參數(shù)
方法一：正則法
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;
}
// 這樣調(diào)用：
alert(GetQueryString("參數(shù)名1"));
alert(GetQueryString("參數(shù)名2"));
alert(GetQueryString("參數(shù)名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 < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 參數(shù)1,參數(shù)2,參數(shù)3,參數(shù)N;
// 參數(shù)1 = Request['參數(shù)1'];
// 參數(shù)2 = Request['參數(shù)2'];
// 參數(shù)3 = Request['參數(shù)3'];
// 參數(shù)N = Request['參數(shù)N'];
修改 URL 的中某個(gè)參數(shù)值
//替換指定傳入?yún)?shù)的值,paramName為參數(shù),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/
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了JavaScript中的全局對(duì)象介紹,對(duì)于任何JavaScript程序,當(dāng)程序開(kāi)始運(yùn)行時(shí),JavaScript解釋器都會(huì)初始化一個(gè)全局對(duì)象以供程序使用,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了canvas軌跡回放功能實(shí)現(xiàn)過(guò)程以及相關(guān)的代碼整理，跟著小編一起學(xué)習(xí)下吧。2017-12-12
layuiAdmin循環(huán)遍歷展示商品圖片列表的方法
今天小編就為大家分享一篇layuiAdmin循環(huán)遍歷展示商品圖片列表的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
發(fā)現(xiàn)我JS真的還有很多要學(xué)，下面只是我的練習(xí)作品，代碼很多是網(wǎng)上的。2008-07-07
JavaScript對(duì)象解構(gòu)的用法實(shí)例解析
解構(gòu)賦值允許你使用類(lèi)似數(shù)組或?qū)ο笞置媪康恼Z(yǔ)法將數(shù)組和對(duì)象的屬性賦給各種變量,下面這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象解構(gòu)用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
用js編寫(xiě)的簡(jiǎn)單的計(jì)算器代碼程序
這篇文章主要介紹了用js編寫(xiě)的簡(jiǎn)單的計(jì)算器代碼程序，非常具有實(shí)用性,感興趣的小伙伴可以參考下2015-08-08
這篇文章主要介紹了JavaScript的流程控制語(yǔ)句，感興趣的小伙伴們可以參考一下2015-11-11
JS實(shí)現(xiàn)頁(yè)面導(dǎo)航與內(nèi)容相互錨定實(shí)例詳解
這篇文章主要為大家介紹了JS實(shí)現(xiàn)頁(yè)面導(dǎo)航與內(nèi)容相互錨定實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
JavaScript判斷對(duì)象是否為空對(duì)象的幾種常見(jiàn)方法
經(jīng)典面試題,研發(fā)時(shí)也經(jīng)常遇見(jiàn)的一個(gè)問(wèn)題,如何判斷一個(gè)對(duì)象是空對(duì)象,這篇文章主要給大家介紹了關(guān)于JavaScript判斷對(duì)象是否為空對(duì)象的幾種常見(jiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Webpack對(duì)js處理是有限的,只能編譯js中ES模塊化語(yǔ)法,不能編譯其他語(yǔ)法,導(dǎo)致js不能在IE等瀏覽器運(yùn)行,本文主要介紹了Webpack處理js資源,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12