JS 获取路径参数|极客笔记

JS 获取路径参数

在Web开发中，经常会遇到需要获取URL中的参数的情况。URL参数通常用来传递数据，比如搜索关键字、页面标识等。在前端开发中，我们可以通过JavaScript来获取URL中的参数，并对其进行处理和使用。

本文将详细讨论如何使用JavaScript获取URL中的路径参数，包括如何解析URL，获取参数名称和数值，以及如何处理特殊字符和空格等情况。

解析URL

要获取URL中的参数，首先需要解析URL，将其分解成协议、主机、路径和查询参数等部分。我们可以使用window.location对象来获取当前页面的URL信息。

// 获取当前页面的URL
var url = window.location.href;

// 解析URL
var parser = document.createElement('a');
parser.href = url;

// 获取主机名
var hostname = parser.hostname;

// 获取路径
var path = parser.pathname;

// 获取查询参数
var queryParams = parser.search;

上面的代码中，我们首先获取当前页面的URL，然后创建一个HTMLAnchorElement元素，并将URL赋值给这个元素的href属性。通过这个元素，我们可以方便地获取主机名、路径和查询参数等信息。

获取路径参数

获取URL中的路径参数，通常是指URL中的查询参数。查询参数通常是以?开头的一串键值对，每个键值对之间使用&分隔。

我们可以通过解析查询参数的方式来获取每个参数的名称和数值。

// 解析查询参数字符串
function parseQueryString(queryString) {
    var params = {};
    // 去除问号
    queryString = queryString.substring(1);

    // 按&分割键值对
    var pairs = queryString.split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        var key = decodeURIComponent(pair[0]);
        var value = decodeURIComponent(pair[1] || '');
        params[key] = value;
    }

    return params;
}

// 获取查询参数
var params = parseQueryString(queryParams);

上面的代码定义了一个parseQueryString函数，用于解析查询参数字符串，将其转换成一个对象，其中键是参数名称，值是参数数值。我们使用decodeURIComponent函数来解码参数值，避免特殊字符和空格等问题。

现在，我们可以通过params对象来获取路径参数了。

// 获取参数值
var keyword = params.keyword;
var page = params.page;

// 打印参数值
console.log(keyword); // 输出搜索关键字
console.log(page); // 输出页码

通过上面的代码，我们成功地获取了URL中的路径参数，并将其保存在params对象中。接下来，我们可以通过键来获取对应的数值，如上面的示例中获取了keyword和page两个参数值。

处理特殊字符

有时，URL中的参数值可能包含特殊字符，比如空格、中文字符等。这些特殊字符需要进行编码和解码，以免引起问题。

在JavaScript中，可以使用encodeURIComponent和decodeURIComponent函数来对参数值进行编码和解码。

// 编码参数值
var encodedValue = encodeURIComponent('参数值');

// 解码参数值
var decodedValue = decodeURIComponent(encodedValue);

上面的代码示例中，我们首先使用encodeURIComponent函数对参数值进行编码，然后再使用decodeURIComponent函数进行解码。

完整示例

下面是一个完整的示例代码，用于演示如何获取URL中的路径参数，并处理特殊字符：

// 解析查询参数字符串
function parseQueryString(queryString) {
    var params = {};
    // 去除问号
    queryString = queryString.substring(1);

    // 按&分割键值对
    var pairs = queryString.split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        var key = decodeURIComponent(pair[0]);
        var value = decodeURIComponent(pair[1] || '');
        params[key] = value;
    }

    return params;
}

// 获取当前页面的URL
var url = window.location.href;

// 解析URL
var parser = document.createElement('a');
parser.href = url;

// 获取查询参数
var queryParams = parser.search;
var params = parseQueryString(queryParams);

// 获取参数值
var keyword = params.keyword;
var page = params.page;

// 打印参数值
console.log(keyword); // 输出搜索关键字
console.log(page); // 输出页码