如何获取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参数值。