url参数 - jQuery如何解析URL中的参数值？

Question

jQuery获取地址栏url参数

获取url参数内容

Answer 1

function getUrlParams(url) {
var params = {};
var parser = document.createElement('a');
parser.href = url;

var query = parser.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {

var pair = vars[i].split('=');if (pair.length === 2) {  params[pair[0]] = decodeURIComponent(pair[1]);}

}
return params;
}

// 示例用法
var url = 'https://example.com/page?param1=value1&param2=value2';
var params = getUrlParams(url);
console.log(params);

Answer 2

解析URL中的参数值，可以使用正则来解析URL中的参数值。$.urlParam()方法接受两个参数：第一个参数是要解析的参数名，第二个参数是默认值（当参数不存在时返回的值）。例如：

// 获取URL参数的方法function urlParam(name，default_value) {  var url = window.location.href;  name = name.replace(/[[]]/g, "\\$&");  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),      results = regex.exec(url);  if (!results) return default_value;  if (!results[2]) return '';  return decodeURIComponent(results[2].replace(/\+/g, " "));}// 解析名为"id"的参数值var id = $.urlParam("id", "default_value");console.log(id);// 解析名为"name"的参数值，如果不存在则返回"unknown"var name = $.urlParam("name", "unknown");console.log(name);

上述代码将分别输出名为"id"和"name"的参数值。

Answer 3

// https://www.example.com?a=1&b=2const search = new URLSearchParams(location.search)search.get('a') // '1'

Answer 4

function getUrlParams(url) {    // 通过 ? 分割获取后面的参数字符串    if (!url.split("?")) {        return {};    }    var urlStr = url.split("?")[1];    console.log("urlStr", urlStr);    if (!urlStr) {        return {};    }    // 创建空对象存储参数    var obj = {};    // 再通过 & 将每一个参数单独分割出来    var paramsArr = urlStr.split("&");    for (var i = 0, len = paramsArr.length; i < len; i++) {        // 再通过 = 将每一个参数分割为 key:value 的形式        var arr = paramsArr[i].split("=");        obj[arr[0]] = arr[1];    }    return obj;}var urlParams = getUrlParams("http://baidu.com?a=1&b=2&c=3");console.log(urlParams["a"]);console.log(urlParams["b"]);console.log(urlParams["c"]);

Answer 5

可以构造一个 URL 实例来获取。https://developer.mozilla.org/zh-CN/docs/Web/API/URL

const instance = new URL('https://www.example.com?a=1&b=2')const search = instance.searchconst searchParams = instance.searchParamsconsole.log(search) // ?a=1&b=2console.log(searchParams) // URLSearchParams {size: 2}console.log(searchParams.get("a")) // 1

Answer 6

在jQuery中，可以使用一些简单的JavaScript函数来解析URL中的参数值，因为jQuery本身并没有提供直接的函数来执行这个操作。一种常见的做法是使用正则表达式或者split()方法配合indexOf()和substring()来解析URL参数。

以下是一个简单的示例，展示了如何使用JavaScript来解析URL参数，并可以在jQuery环境中使用：

function getParameterByName(name, url) {    if (!url) url = window.location.href;    name = name.replace(/[\[\]]/g, '\\$&');    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),        results = regex.exec(url);    if (!results) return null;    if (!results[2]) return '';    return decodeURIComponent(results[2].replace(/\+/g, ' '));}// 使用示例var urlParam = getParameterByName('paramName');console.log(urlParam);

在这个例子中，getParameterByName 函数接收两个参数：要查找的参数名和URL字符串。如果没有提供URL，函数将使用当前页面的URL (window.location.href)。

函数首先会对参数名进行转义处理，以处理可能存在的特殊字符（如方括号）。然后，它创建一个正则表达式来匹配URL中的参数名和它的值。exec 方法会在URL字符串中搜索这个正则表达式，并返回匹配的结果数组。

如果找不到匹配项，函数返回 null。如果找到了匹配项但没有值（即参数存在但没有赋值），函数返回空字符串。如果找到了匹配项并且参数有值，函数会返回解码后的参数值。

请注意，这种方法假定URL参数是正确编码的，并且参数之间没有空格。如果URL参数中有空格或特殊字符，那么它们应该已经被正确编码（例如使用 encodeURIComponent）。

你可以在jQuery的上下文中调用这个函数来获取URL参数，就像上面的使用示例一样。这个函数不依赖于jQuery，但可以在任何使用jQuery的环境中工作。