如何獲取HTML中的URL參數值

獲取HTML中的URL參數值是前端開發中經常涉及到的一個問題。在前端開發中，需要獲取URL的參數值，以便動態地改變頁面的展示內容。下面將從多個方面詳細闡述如何獲取HTML中的URL參數值。

一、使用window.location.search對象

通過window.location.search可以獲取URL中問號後面的所有參數。例如，訪問地址為 http://www.example.com?id=123&name=example，則window.location.search的值為? id=123&name=example。為了獲取具體的某個參數的值，需要對window.location.search進行處理。

function GetQueryString(name){
    var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
    var r=window.location.search.substr(1).match(reg);
    if (r!=null) return unescape(r[2]); return null;
}

對於上面的代碼，可以調用GetQueryString函數來獲取URL中的具體參數值。例如，想要獲取id的值，調用GetQueryString(‘id’)即可。

二、使用URLSearchParams對象

URLSearchParams是ES6中新增的對象，用來處理URL問號後面的參數。可以通過獲取URLSearchParams實例來獲取URL參數值。

var urlSearchParams = new URLSearchParams(window.location.search);

console.log(urlSearchParams.get('id'));
console.log(urlSearchParams.get('name'));

上面的代碼中，使用了get方法來獲取URL中具體參數的值。例如，要獲取id的值，調用urlSearchParams.get(‘id’)即可。

三、使用正則表達式獲取URL參數值

除了使用window.location.search和URLSearchParams方法外，也可以通過正則表達式獲取URL參數值。

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURIComponent(r[2]); return '';
}

上面的代碼使用正則表達式來匹配URL參數值。對於獲取具體某個參數的值，調用 getUrlParam(‘id’)即可。

四、結語

以上是幾種獲取HTML中URL參數值的方法。不同場景下適合使用不同的方法，開發人員可以根據需求選擇相應的方法來獲取URL參數值。