如何使用JavaScript解析URL

小編給大家分享一下如何使用JavaScript解析URL，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)主要為客戶提供服務(wù)項目涵蓋了網(wǎng)頁視覺設(shè)計、VI標(biāo)志設(shè)計、成都全網(wǎng)營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)、成都做手機網(wǎng)站、微商城、網(wǎng)站托管及成都網(wǎng)站維護(hù)、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都效果圖設(shè)計行業(yè)客戶提供了網(wǎng)站開發(fā)服務(wù)。

開始

創(chuàng)建一個以下內(nèi)容的 HTML 文件，并在瀏覽器中打開。

<html>
    <head>
        <title>JavaScript URL parsing</title>
    </head>
    <body>
        <script>
            // 激動人心的代碼即將寫在這里
        </script>
    </body>
</html>

如果你想嘗試本文中的任何內(nèi)容，可以將其放在 <script> 標(biāo)記中，保存，重新加載頁面，看看會發(fā)生什么！ 在本教程中，將使用 console.log  來打印所需要的內(nèi)容，你可以打開開發(fā)都工具，來查看內(nèi)容。

什么是 URL

這應(yīng)該是相當(dāng)簡單的，但讓我們說清楚。 URL是網(wǎng)頁的地址，可以在瀏覽器中輸入以獲取該網(wǎng)頁的唯一內(nèi)容。 可以在地址欄中看到它：

如何使用JavaScript解析URL

URL 是統(tǒng)一資源定位符，對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址?；ヂ?lián)網(wǎng)上的每個文件都有一個唯一的 URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。

此外，如果你不熟悉基本 URL 路徑的工作方式，可以查看此文學(xué)習(xí)。

URL 不都長的一樣的

這是一個快速提醒 - 有時 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)前頁面的 URL 非常簡單 - 我們可以使用 window.location。

試著把這個添加到我們形如寫的的腳本中:

console.log(window.location);

查看瀏覽器的控制臺：

如何使用JavaScript解析URL

不是你想要的?這是因為它不返回你在瀏覽器中看到的實際 URL 地址——它返回的是一個 URL 對象。使用這個 URL 對象，我們可以解析 URL 的不同部分，接下來就會講到。

創(chuàng)建 URL 對象

很快就會看到，可以使用 URL 對象來了解 URL 的不同部分。如果你想對任何 URL 執(zhí)行此操作，而不僅僅是當(dāng)前頁面的 URL，該怎么辦？ 我們可以通過創(chuàng)建一個新的 URL 對象來實現(xiàn)。 以下是如何創(chuàng)建一個：

var myURL = new URL('https://example.com');

就這么簡單！ 可以打印 myURL 來查看 myURL 的內(nèi)容：

console.log(myURL);

如何使用JavaScript解析URL

出于本文的目的，將 myURL 設(shè)置為這個值：

var myURL = new URL('https://example.com:4000/folder/page.html?x=y&a=b#section-2')

將其復(fù)制并粘貼到 <script> 元素中，以便你可以繼續(xù)操作！ 這個 URL 的某些部分可能不熟悉，因為它們并不總是被使用 - 但你將在下面了解它們，所以不要擔(dān)心！

URL 對象的結(jié)構(gòu)

使用 URL 對象，可以非常輕松地獲取 URL 的不同部分。 以下是你可以從 URL 對象獲得的所有內(nèi)容。 對于這些示例，我們將使用上面設(shè)置的 myURL。

href

URL 的 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"
協(xié)議 (protocol)

URL的協(xié)議是一開始的部分。這告訴瀏覽器如何訪問該頁面，例如通過 HTTP 或 HTTPS。 但是還有很多其他協(xié)議，比如 ftp（文件傳輸協(xié)議）和 ws（WebSocket）。通常，網(wǎng)站將使用 HTTP 或 HTTPS。

雖然如果你的計算機上打開了文件，你可能正在使用文件協(xié)議！ URL對象的協(xié)議部分包括：，但不包括 //。 讓我們看看 myURL 吧！

console.log(myURL.protocol);
// Output: "https:"
主機名（hostname）

主機名是站點的域名。 如果你不熟悉域名，則它是在瀏覽器中看到的URL的主要部分 - 例如 google.com 或codetheweb.blog。

console.log(myURL.hostname);
// Output: "example.com"
端口（port）

URL 的端口號位于域名后面，用冒號分隔（例如 example.com:1234）。 大多數(shù)網(wǎng)址都沒有端口號，這種情況非常罕見。

端口號是服務(wù)器上用于獲取數(shù)據(jù)的特定“通道” - 因此，如果我擁有 example.com，我可以在多個不同的端口上發(fā)送不同的數(shù)據(jù)。 但通常域名默認(rèn)為一個特定端口，因此不需要端口號。 來看看 myURL 的端口號：

console.log(myURL.port);
// Output: "4000"
主機（host）

主機只是主機名和端口放在一起，嘗試獲取 myURL 的主機：

console.log(myURL.host);
// Output: "example.com:4000"
來源（origin）

origin 由 URL 的協(xié)議，主機名和端口組成。 它基本上是整個 URL，直到端口號結(jié)束，如果沒有端口號，到主機名結(jié)束。

console.log(myURL.origin);
// Output: "https://example.com:4000"
pathname（文件名）

pathname 從域名的最后一個 “/” 開始到 “?” 為止,是文件名部分,如果沒有 “?” ,則是從域名最后的一個 “/” 開始到 “#” 為止 , 是文件部分, 如果沒有 “?” 和 “#” , 那么從域名后的最后一個 “/” 開始到結(jié)束 , 都是文件名部分。

console.log(myURL.pathname);
// Output: "/folder/page.html"
錨點（hash）

從 “#”開始到最后，都是錨部分?？梢詫⒐Ｖ堤砑拥?URL 以直接滾動到具有 ID 為該值的哈希值 的元素。 例如，如果你有一個 id 為 hello 的元素，則可以在 URL 中添加 #hello 就可以直接滾動到這個元素的位置上。通過以下方式可以在 URL 獲取 “#”后面的值:

console.log(myURL.hash);
// Output: "#section-2"
查詢參數(shù) (search)

你還可以向 URL 添加查詢參數(shù)。它們是鍵值對，意味著將特定的“變量”設(shè)置為特定值。 查詢參數(shù)的形式為 key=value。 以下是一些 URL 查詢參數(shù)的示例：

?key1=value1&key2=value2&key3=value3

請注意，如果 URL 也有 錨點（hash），則查詢參數(shù)位于 錨點（hash）(也就是 ‘#’)之前，如我們的示例 URL 中所示：

console.log(myURL.search);
// Output: "?x=y&a=b"

但是，如果我們想要拆分它們并獲取它們的值，那就有點復(fù)雜了。

使用 URLSearchParams 解析查詢參數(shù)

要解析查詢參數(shù)，我們需要創(chuàng)建一個 URLSearchParams對象，如下所示：

var searchParams = new URLSearchParams(myURL.search);

然后可以通過調(diào)用 searchParams.get（'key'）來獲取特定鍵的值。 使用我們的示例網(wǎng)址 - 這是原始搜索參數(shù)：

?x=y&a=b

因此，如果我們調(diào)用 searchParams.get（'x'），那么它應(yīng)該返回 y，而 searchParams.get（'a'）應(yīng)該返回 b，我們來試試吧！

console.log(searchParams.get('x'));
// Output: "y"
console.log(searchParams.get('a'));
// Output: "b"

擴展

獲取 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 的中某個參數(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
}

看完了這篇文章，相信你對如何使用JavaScript解析URL有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站標(biāo)題：如何使用JavaScript解析URL
文章位置：http://muchs.cn/article38/johgsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、面包屑導(dǎo)航、手機網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、做網(wǎng)站、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司