如何解析url查询参数？1.使用urlsearchparams api可直接解析url中的键值对，适用于现代浏览器；2.传统方法通过字符串分割处理，兼容老版本浏览器；3.处理多个相同key的参数时，urlsearchparams结合数组存储值；4.传统方法同样可修改实现相同key参数的处理；5.url编码问题可通过decodeuricomponent解码；6.安全处理需验证参数类型、过滤特殊字符、使用白名单防止xss攻击。
URL查询参数的解析，简单来说，就是把URL中 ? 后面的那部分字符串拆解成键值对，方便我们在JavaScript中获取和使用。这看似简单，但实际应用中会遇到各种各样的情况，需要我们灵活处理。
URL参数获取与处理技巧
解决方案
最直接的方法是使用 URLSearchParams API，这是现代浏览器提供的原生方法，非常方便。
function getQueryParams(url) {
const urlObj = new URL(url);
const params = new URLSearchParams(urlObj.search);
const queryParams = {};
for (const [key, value] of params) {
queryParams[key] = value;
}
return queryParams;
}
// 示例
const url = 'https://example.com?name=John&age=30&city=New%20York';
const params = getQueryParams(url);
console.log(params); // 输出: { name: "John", age: "30", city: "New York" }如果需要兼容老版本的浏览器，可以使用传统的字符串分割方法：
function getQueryParamsLegacy(url) {
const query = url.split('?')[1];
if (!query) {
return {};
}
const params = {};
query.split('&').forEach(part => {
const [key, value] = part.split('=');
if (key) {
params[decodeURIComponent(key)] = decodeURIComponent(value || ''); // 处理没有value的情况
}
});
return params;
}
// 示例
const url = 'https://example.com?name=John&age=30&city=New%20York';
const params = getQueryParamsLegacy(url);
console.log(params); // 输出: { name: "John", age: "30", city: "New York" }如何处理URL中包含多个相同Key的参数？
这种情况比较常见，比如 ?tag=javascript&tag=react&tag=vue。 URLSearchParams 可以很好地处理这种情况。
function getMultipleQueryParams(url) {
const urlObj = new URL(url);
const params = new URLSearchParams(urlObj.search);
const queryParams = {};
for (const [key, value] of params.entries()) { // 使用 entries() 方法
if (queryParams[key]) {
if (!Array.isArray(queryParams[key])) {
queryParams[key] = [queryParams[key]];
}
queryParams[key].push(value);
} else {
queryParams[key] = value;
}
}
return queryParams;
}
// 示例
const url = 'https://example.com?tag=javascript&tag=react&tag=vue';
const params = getMultipleQueryParams(url);
console.log(params); // 输出: { tag: ["javascript", "react", "vue"] }如果使用传统方法，需要稍微修改一下逻辑：
function getMultipleQueryParamsLegacy(url) {
const query = url.split('?')[1];
if (!query) {
return {};
}
const params = {};
query.split('&').forEach(part => {
const [key, value] = part.split('=');
if (key) {
const decodedKey = decodeURIComponent(key);
const decodedValue = decodeURIComponent(value || '');
if (params[decodedKey]) {
if (!Array.isArray(params[decodedKey])) {
params[decodedKey] = [params[decodedKey]];
}
params[decodedKey].push(decodedValue);
} else {
params[decodedKey] = decodedValue;
}
}
});
return params;
}
// 示例
const url = 'https://example.com?tag=javascript&tag=react&tag=vue';
const params = getMultipleQueryParamsLegacy(url);
console.log(params); // 输出: { tag: ["javascript", "react", "vue"] }如何处理URL编码问题？
URL中的参数值经常会进行编码，比如空格会被编码成 %20，特殊字符会被编码成其他形式。 decodeURIComponent 可以用来解码。
// 在上面的示例代码中已经使用了 decodeURIComponent
// 示例
const url = 'https://example.com?city=New%20York';
// ... (使用上面的 getQueryParams 或 getQueryParamsLegacy)
// console.log(params); // 输出: { city: "New York" }如何安全地处理URL参数？
永远不要信任来自URL的参数。 需要对参数进行验证和过滤，防止XSS攻击等安全问题。
- 验证数据类型： 确保参数是期望的数据类型，比如数字、字符串等。
- 过滤特殊字符： 移除或转义可能导致安全问题的特殊字符。
- 使用白名单： 只允许特定的参数值，拒绝其他值。
function sanitizeQueryParams(params) {
const sanitizedParams = {};
for (const key in params) {
if (params.hasOwnProperty(key)) {
let value = params[key];
// 示例：只允许数字和字母的参数值
if (typeof value === 'string') {
value = value.replace(/[^a-zA-Z0-9]/g, ''); // 移除所有非字母数字字符
}
sanitizedParams[key] = value;
}
}
return sanitizedParams;
}
// 示例
const url = 'https://example.com?name=<script>alert("XSS")</script>&age=30';
const params = getQueryParams(url);
const sanitizedParams = sanitizeQueryParams(params);
console.log(sanitizedParams); // 输出: { name: "", age: "30" }这个例子只是一个简单的演示，实际应用中需要根据具体情况进行更严格的验证和过滤。
