亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript獲取URL參數(shù)常見的4種方法

 更新時間:2024年07月19日 09:10:55   作者:Fanfffff720  
對于獲取URL參數(shù),有很多種方法可以實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于JavaScript獲取URL參數(shù)常見的4種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在前端開發(fā)中,處理URL參數(shù)是一個常見的任務(wù),尤其是在沒有框架支持的情況下。雖然許多框架提供了方便的方法來獲取URL參數(shù),但有時我們需要依賴原生JavaScript來完成這個任務(wù)。這也是面試中經(jīng)常出現(xiàn)的問題之一。今天讓我們一起來探討如何利用原生JavaScript來獲取URL參數(shù)值。

獲取方法總結(jié)

原生JS獲取URL鏈接參數(shù)的方法有好幾種,我們一起來學(xué)習(xí)一下常見的幾種。

1.使用正則表達式

2.利用a標簽內(nèi)置方法

3.利用split分割方法

4.使用URLSearchParams方法

具體實現(xiàn)

方法一: 正則表達式

function queryURLParams(url, paramName) {
    // 正則表達式模式,用于匹配URL中的參數(shù)部分。正則表達式的含義是匹配不包含 ?、&、= 的字符作為參數(shù)名,之后是等號和不包含 & 的字符作為參數(shù)值
    let pattern = /([^?&=]+)=([^&]+)/g;
    let params = {};
    
    // match用于存儲正則匹配的結(jié)果
    let match;
    // while 循環(huán)和正則表達式 exec 方法來迭代匹配URL中的參數(shù)
    while ((match = pattern.exec(url)) !== null) {
        // 在字符串url中循環(huán)匹配pattern,并對每個匹配項進行解碼操作,將解碼后的鍵和值分別存儲在key和value變量中
        let key = decodeURIComponent(match[1]);
        let value = decodeURIComponent(match[2]);
        
        if (params[key]) {
            if (Array.isArray(params[key])) {
                params[key].push(value);
            } else {
                params[key] = [params[key], value];
            }
        } else {
            // 參數(shù)名在 params 對象中不存在,將該參數(shù)名和對應(yīng)的值添加到 params 對象中
            params[key] = value;
        }
    }
    
    if (!paramName) {
        // 沒有傳入?yún)?shù)名稱, 返回含有所有參數(shù)的對象params
        return params;
    } else {
        if (params[paramName]) {
            return params[paramName];
        } else {
            return '';
        }
    }
}

let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100&name=lion";
console.log(queryURLParams(url)); // 返回所有參數(shù)對象
console.log(queryURLParams(url, 'name')); // 返回參數(shù)名為 'name' 的所有值
console.log(queryURLParams(url, 'age')); // 返回參數(shù)名為 'age' 的值
console.log(queryURLParams(url, 'color')); // 返回""

正則表達式解釋: 

  • ([^?&=]+):這部分是一個捕獲組,表示匹配不包含 ?、&= 的任意字符的一個或多個,即匹配參數(shù)名部分。
  • =:表示匹配參數(shù)名和參數(shù)值之間的等號。
  • ([^&]+):這部分也是一個捕獲組,表示匹配不包含 & 的任意字符的一個或多個,即匹配參數(shù)值部分。
  • g:表示使用全局匹配模式,即匹配目標字符串中所有符合模式的部分。

方法二: 利用a標簽

a標簽內(nèi)置的方法能夠快速且方便地獲取URL參數(shù),

它的原理主要就是利用了a標簽得到一些內(nèi)置屬性,如href、hash、search等屬性。

考慮到URL中的哈希部分,在函數(shù)queryURLParams(url)中,會檢查URL中的哈希部分是否存在,如果存在則將哈希值存儲到參數(shù)對象中,并將屬性名設(shè)置為"HASH"。這樣在返回的參數(shù)對象中,如果URL中有哈希部分,就可以通過"HASH"來訪問哈希值。

let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
  function queryURLParams(url) {
    // 1.創(chuàng)建a標簽
    let link = document.createElement('a');
    link.href = url;
    let searchUrl = link.search.substr(1); // 獲取問號后面字符串
    let hashUrl = link.hash.substr(1); // 獲取#后面的值
    let obj = {}; // 聲明參數(shù)對象
    // 2.向?qū)ο笾羞M行存儲
    hashUrl ? obj['HASH'] = hashUrl : null; // #后面是否有值

    let list = searchUrl.split("&");
    for (let i = 0; i < list.length; i++) {
      let arr = list[i].split("=");
      obj[arr[0]] = arr[1];
    }
    return obj;
  }
  console.log(queryURLParams(URL))

上段代碼中先創(chuàng)建了一個a標簽,然后就可以根據(jù)a標簽的屬性分別得到url的各個部分了,這其實和Vue的路由跳轉(zhuǎn)獲取參數(shù)有點類似。

1. 將傳入的URL賦值給 `<a>` 標簽的 `href` 屬性的目的是利用瀏覽器提供的原生 API 來幫助實現(xiàn) URL 參數(shù)的解析。通過將URL賦值給 `<a>` 標簽的 `href` 屬性,瀏覽器會自動解析這個URL,包括提取其中的協(xié)議、主機、路徑、查詢參數(shù)等各個部分,從而方便我們對這個URL進行進一步的操作。

2. 通過`link.search.substr(1)`和`link.hash.substr(1)`可以獲取URL中問號后面的字符串和`#`后面的值,是因為瀏覽器在解析URL后會將這些信息存儲在`<a>`標簽對象的對應(yīng)屬性中。具體來說:

   - `link.search` 包含了 URL 中問號后面的部分(即查詢參數(shù)部分)。

   - `link.hash` 包含了 URL 中`#`后面的部分(即片段部分)。

   - 使用`substr(1)`是為了去掉字符串中的問號或`#`字符,只留下真正的參數(shù)內(nèi)容或片段內(nèi)容。

方法三: split分割法

這種方法利用了split可以以某個字符講字符串分割為數(shù)組的特點,巧妙地將各個參數(shù)分割出來。

function getUrlParams(url, paramName) {
    // 從 URL 中提取查詢參數(shù)部分
    const queryString = url.split('?')[1];
    
    // 如果沒有查詢參數(shù),返回空對象
    if (!queryString) {
        return {};
    }
    
    // 處理帶有 hash 地址的情況
    const hashIndex = queryString.indexOf('#');
    if (hashIndex !== -1) {
        queryString = queryString.substring(0, hashIndex);
    }
    
    // 將查詢參數(shù)字符串解析為鍵值對
    const queryParams = {};
    queryString.split('&').forEach(param => {
        const [key, value] = param.split('=');
        // 如果值已經(jīng)存在,則將其轉(zhuǎn)換為數(shù)組存儲
        if (queryParams[key]) {
            if (Array.isArray(queryParams[key])) {
                queryParams[key].push(decodeURIComponent(value));
            } else {
                queryParams[key] = [queryParams[key], decodeURIComponent(value)];
            }
        } else {
            queryParams[key] = decodeURIComponent(value);
        }
    });
    
    // 如果沒有指定參數(shù)名稱,則返回包含所有查詢參數(shù)的對象
    if (!paramName) {
        return queryParams;
    }
    
    // 如果指定了參數(shù)名稱
    if (queryParams[paramName]) {
        return queryParams[paramName];
    } else {
        // 參數(shù)不存在,返回空字符串
        return '';
    }
}

// 示例 URL
const url = 'https://example.com?name=John&age=30&name=Jane&gender=male';
const urlWithHash = 'http://xxx.com/#/operations/app?name=John&age=30&name=Jane&gender=male';

console.log(getUrlParams(url)); 
// 輸出: { name: ['John', 'Jane'], age: '30', gender: 'male' }

console.log(getUrlParams(url, 'name'));
// 輸出: ['John', 'Jane']

console.log(getUrlParams(url, 'age'));
// 輸出: '30'

console.log(getUrlParams(url, 'city'));
// 輸出: ''

console.log(getUrlParams(urlWithHash)); 
// 輸出: { name: ['John', 'Jane'], age: '30', gender: 'male' }

關(guān)于hash地址部分

在處理 URL 查詢參數(shù)時,通常情況下不需要處理 hash 地址部分。

Hash 地址通常用于客戶端路由或頁面內(nèi)導(dǎo)航,一般不會包含查詢參數(shù)信息。

但在某些情況下,可能需要處理帶有 hash 地址的 URL,例如:

1. 當(dāng)需要從 URL 中提取查詢參數(shù)時,如果 URL 中的查詢參數(shù)部分后面緊跟著 hash 地址(如 `http://example.com/page?name=John#section2`),需要排除 hash 部分以確保正確提取查詢參數(shù)。

2. 如果要監(jiān)聽 hash 地址的變化,并根據(jù)不同的 hash 地址執(zhí)行不同的邏輯(如單頁面應(yīng)用路由器),則需要處理 hash 地址的改變并做出響應(yīng)。 總的來說,在處理 URL 查詢參數(shù)時一般不需要處理 hash 地址部分,但在特定情況下需要注意并處理。

方法四: URLSearchParams

URLSearchParams方法能夠讓我們非常方便的獲取URL參數(shù),但是存在一定的兼容性問題,官網(wǎng)的解釋如下:

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串。

該接口提供了非常的的方法讓我們來處理URL參數(shù),這里我們只介紹如何獲取URL參數(shù)值,更加詳細的使用方法大家可以參考官網(wǎng)。

 let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  function queryURLParams(URL) {
    let url = URL.split("?")[1];
    const urlSearchParams = new URLSearchParams(url);
    const params = Object.fromEntries(urlSearchParams.entries());
    return params
  }
  console.log(queryURLParams(URL))

這里我們基本上只用了兩行主要代碼就實現(xiàn)了參數(shù)的解析。需要注意的是urlSearchParams.entries()返回的是一個迭代協(xié)議iterator,所以我們需要利用Object.fromEntries()方法將把鍵值對列表轉(zhuǎn)換為一個對象。

關(guān)于迭代協(xié)議,大家可以參考官網(wǎng):迭代協(xié)議

總結(jié):

這里介紹了四種方法來實現(xiàn)URL鏈接參數(shù)值的解析,其中使用最為廣泛的應(yīng)該當(dāng)屬split分割法。總的來說,了解和掌握這些方法可以幫助前端開發(fā)者更有效地處理URL參數(shù),從而提升開發(fā)效率和應(yīng)對面試中可能出現(xiàn)的相關(guān)問題。

到此這篇關(guān)于JavaScript獲取URL參數(shù)常見的4種方法的文章就介紹到這了,更多相關(guān)JS獲取URL參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論