干貨:HTML中高效獲取url的參數

avaweb

在我們平常的javaweb開發中，前臺頁面經常會用到獲取url中的參數，大多數程序員可能直接

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

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

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

我們可以單獨封裝一個函數來達到這個目的。以后只要是要獲取url的參數，直接調用這個函數就可以了。

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," "));
}

我在后續的文章中，會分享更多更實用的開發小技巧給大家，希望大家多多關注！

RL 信息

JavaScript 提供了許多方法來檢索和更改顯示在瀏覽器地址欄中的當前 URL，所有這些方法都使用Location對象，它是對象的一個?屬性Window。

您可以創建一個具有當前URL的新對象，如下所示：

let loc = window.location;
let url = loc.href;

Location 屬性

location屬性

Location 接口不繼承任何屬性，但是實現了那些來自 URLUtils 的屬性。

Location.href包含整個URL的一個DOMStringLocation.protocol包含URL對應協議的一個DOMString，最后有一個":"。

Location.host包含了域名的一個DOMString，可能在該串最后帶有一個":"并跟上URL的端口號。

Location.hostname包含URL域名的一個DOMString。

Location.port包含端口號的一個DOMString。

Location.pathname包含URL中路徑部分的一個DOMString，開頭有一個“/"。Location.search 包含URL參數的一個DOMString，開頭有一個“?”。

Location.hash包含塊標識符的DOMString，開頭有一個“#”。

Location.username包含URL中域名前的用戶名的一個DOMString。

Location.password包含URL域名前的密碼的一個 DOMString。

Location.origin只讀包含頁面來源的域名的標準形式DOMString。

方法

Location沒有繼承任何方法，但實現了來自URLUtils的方法。

Location.assign()加載給定URL的內容資源到這個Location對象所關聯的對象上。

Location.reload()重新加載來自當前 URL的資源。他有一個特殊的可選參數，類型為 Boolean，該參數為true時會導致該方法引發的刷新一定會從服務器上加載數據。如果是 false或沒有制定這個參數，瀏覽器可能從緩存當中加載頁面。

Location.replace()用給定的URL替換掉當前的資源。與 assign() 方法不同的是用 replace()替換的新頁面不會被保存在會話的歷史 History中，這意味著用戶將不能用后退按鈕轉到該頁面。

Location.toString()返回一個DOMString，包含整個URL。它和讀取URLUtils.href的效果相同。但是用它是不能夠修改Location的值的。

avaScript 領域的 URL 驗證有了新的消息！這么多年開發者因為 JavaScript 沒有簡便的方法來驗證 URL 而一直對其發牢騷，如今有了一個新方法 — URL.canParse()！

URL.canParse('https://www.pixelstech.net');   // true
URL.canParse('www.pixelstech.net');  // false

URL.canParse() 是一種快速判斷字符串是否為有效 URL 的方法。但在不要興奮得太早，寫下這篇文章時 URL.canParse() 還不被所有瀏覽器支持。不過你可以在下面找到最新的瀏覽器支持信息。

這個靜態方法已經包含在core-js中了。

URL.canParse()依賴于與URL()構造函數評估有效 URL 相同的算法。而且由于這兩個方法都實現了相同的解析器，并且URL()今天已經得到了良好的支持，你可以遵循使用構造函數來驗證 URL 的一般建議。將new URL()放入輔助函數中，檢查是否拋出異常，就大功告成了！

function isUrlValid(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

isUrlValid('https://www.pixelstech.net'); // true
isUrlValid('www.pixelstech.net'); // false

或者如果你不喜歡一個 isUrlValid()函數，你也可以類似core-js那樣實現URL.canParse()。

不i過最后有個問題，什么是有效的 URL？

在線咨詢

上一篇：平滑切換-PPT動畫的全新玩法（原理篇）/04/O365智能系列
下一篇：完美外貿企業郵箱簽名設置指南：提升專業形象，優化商務溝通

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

干貨:HTML中高效獲取url的參數

RL 信息

Location 屬性

方法

您的項目需求