如何使用JavaScript解析URL

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

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

開始

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

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

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

什么是 URL

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

如何使用JavaScript解析URL

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è)添加到我們形如寫的的腳本中:

console.log(window.location);

查看瀏覽器的控制臺(tái)：

如何使用JavaScript解析URL

不是你想要的?這是因?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);

如何使用JavaScript解析URL

出于本文的目的，將 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ì)象，你可以寫 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é)議是一開始的部分。這告訴瀏覽器如何訪問(wèn)該頁(yè)面，例如通過(guò) HTTP 或 HTTPS。但是還有很多其他協(xié)議，比如 ftp（文件傳輸協(xié)議）和 ws（WebSocket）。通常，網(wǎng)站將使用 HTTP 或 HTTPS。

雖然如果你的計(jì)算機(jī)上打開了文件，你可能正在使用文件協(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)址都沒有端口號(hào)，這種情況非常罕見。

端口號(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é)束，如果沒有端口號(hào)，到主機(jī)名結(jié)束。

console.log(myURL.origin);
// Output: "https://example.com:4000"

pathname（文件名）

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

console.log(myURL.pathname);
// Output: "/folder/page.html"

錨點(diǎn)（hash）

從 “#”開始到最后，都是錨部分?？梢詫⒐Ｖ堤砑拥?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
}

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

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

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

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

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何使用JavaScript解析URL

開始

什么是 URL

獲取當(dāng)前URL

創(chuàng)建 URL 對(duì)象

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

href

協(xié)議 (protocol)

主機(jī)名（hostname）

端口（port）

主機(jī)（host）

來(lái)源（origin）

pathname（文件名）

錨點(diǎn)（hash）

查詢參數(shù) (search)

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

擴(kuò)展

獲取 URL 的中參數(shù)

修改 URL 的中某個(gè)參數(shù)值