干貨:HTML中高效獲取url的參數(shù)

avaweb

在我們平常的javaweb開發(fā)中，前臺(tái)頁面經(jīng)常會(huì)用到獲取url中的參數(shù)，大多數(shù)程序員可能直接

用window.location.href 獲取到當(dāng)前頁面的url，然后再用substring去截取字符串，這樣的話很麻煩。

當(dāng)然我上面所說的是在html的文件中，如果你是用的jsp的話，那就很簡單了。用el表達(dá)式我們可以很輕松的獲取url中的參數(shù)：${param.paramName}

好了，言歸正傳，那如何在html中獲取url中的參數(shù)了？

我們可以單獨(dú)封裝一個(gè)函數(shù)來達(dá)到這個(gè)目的。以后只要是要獲取url的參數(shù)，直接調(diào)用這個(gè)函數(shù)就可以了。

function get_param(name, url){
if(!url) url = window.location.href;
name = name.replace(/[\[\]]/g,"\$&");
var regex =newRegExp("[?&]"+ name +"(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if(!results) return null;
if(!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g," "));
}

我在后續(xù)的文章中，會(huì)分享更多更實(shí)用的開發(fā)小技巧給大家，希望大家多多關(guān)注！

rl 解析

  const urlSearchParams = new URLSearchParams(window.location.search);
  const queryParams = Object.fromEntries(urlSearchParams.entries());
  console.log(queryParams);//成功轉(zhuǎn)換成對(duì)象

注意看url中的查詢值哦

Url 解析知道query中的key直接獲取對(duì)應(yīng)的value

  const urlSearchParams = new URLSearchParams(window.location.search);
  const value = urlSearchParams.get("a");
  console.log(value);

拿來吧你

家好，我是大澈！

本文約 600+ 字，整篇閱讀約需 1 分鐘。

每日分享一段優(yōu)質(zhì)代碼片段。

今天分享一段優(yōu)質(zhì) JS 代碼片段，從而比以往更簡單的從 URL 中獲取查詢參數(shù)。

老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(qū)留下你的見解！

const getQueryByName = (name) => {
  const query = new URLSearchParams(location.search)
  return decodeURIComponent(query.get(name))
}
// url: https://sunday.com/?name=fatfish&age=100
const name = getQueryByName('name') // fatfish
const age = getQueryByName('age') // 100
const gender = getQueryByName('gender') // null

分享原因

這段代碼通過 URLSearchParams 對(duì)象簡化了從 URL 中獲取查詢參數(shù)的過程。

通過這種方法，可以更方便地在 JavaScript 中解析和獲取 URL 查詢參數(shù)，特別適用于處理需要從 URL 中提取參數(shù)的場(chǎng)景，比如讀取用戶在網(wǎng)頁中的輸入或搜索關(guān)鍵字等。

這是項(xiàng)目中一個(gè)很常見的操作，之前我們經(jīng)常會(huì)使用正則表達(dá)式或者拆分字符串來完成，現(xiàn)在有了更簡單的方式！

代碼解析

1. const query = new URLSearchParams(location.search);

創(chuàng)建 URLSearchParams 對(duì)象。

URLSearchParams 是 Web API 的一部分，用于操作 URL 的查詢字符串。

location.search 返回當(dāng)前 URL 的查詢字符串（例如 ?name=value&key=value）。

URLSearchParams 對(duì)象將其解析為一個(gè)可以操作的查詢參數(shù)對(duì)象。

2. decodeURIComponent(query.get(name));

query.get(name) 方法從查詢參數(shù)對(duì)象中獲取名稱為 name 的參數(shù)值。

decodeURIComponent 用于對(duì)參數(shù)值進(jìn)行解碼，以確保返回的值是一個(gè)人類可讀的字符串，避免 URL 編碼帶來的問題（例如 %20 代表空格）。

- end -

在線咨詢

上一篇：標(biāo)簽的相互嵌套規(guī)則是怎樣
下一篇：CSS 合法顏色值

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

干貨:HTML中高效獲取url的參數(shù)

rl 解析

Url 解析 知道query中的key直接獲取對(duì)應(yīng)的value

您的項(xiàng)目需求

Url 解析知道query中的key直接獲取對(duì)應(yīng)的value