JS如何提取URL中的参数并以jason格式返回结果

crary,记忆

于 2024-02-20 11:00:00 发布

阅读量1k

点赞数 22

分类专栏：前端知识总结文章标签： javascript 开发语言 ecmascript 前端学习

本文链接：https://blog.csdn.net/qq_44327851/article/details/136159340

版权

前端知识总结专栏收录该内容

65 篇文章 1 订阅

订阅专栏

本文介绍了四种JavaScript方法来从URL中提取查询参数：使用数组循环、正则表达式配合URLSearchParams、entries()方法以及split()和reduce()。展示了如何解析和序列化查询参数以便于后续处理。

摘要由CSDN通过智能技术生成

方法一：使用数组循环

  function serilizeUrl(url) {
      var urlObj = {};
      if (/\?/.test(url)) {
        var urlString = url.subString(url.indexOf('?') + 1);
        var urlArray = urlString.split('&');
        for (var i = 0, len = urlArray.length; i < len; i++) {
          var urlItem = urlArray[i];
          var item = urlItem.split('=');
          urlObj[item[0]] = item[1];
        }
        return urlObj;
      }
      return null;
    }

方法二：使用正则表达式和 `URLSearchParams` 对象

function extractUrlParams(url) {
    const params = {};
    const queryString = url.split('?')[1];
    
    if (queryString) {
        const searchParams = new URLSearchParams(queryString);
        for (let [key, value] of searchParams) {
            params[key] = value;
        }
    }
    
    return JSON.stringify(params);
}

const url = 'https://www.example.com/?name=Alice&age=30';
const extractedParams = extractUrlParams(url);
console.log(extractedParams);

方法三：使用 `URLSearchParams` 对象的 `entries()` 方法

function extractUrlParams(url) {
    const params = {};
    const queryString = url.split('?')[1];
    
    if (queryString) {
        const searchParams = new URLSearchParams(queryString);
        for (let [key, value] of searchParams.entries()) {
            params[key] = value;
        }
    }
    
    return JSON.stringify(params);
}

const url = 'https://www.example.com/?name=Alice&age=30';
const extractedParams = extractUrlParams(url);
console.log(extractedParams);

方法四：使用 `split()` 方法和 `reduce()` 方法

function extractUrlParams(url) {
    const params = {};
    const queryString = url.split('?')[1];
    
    if (queryString) {
        queryString.split('&').reduce((acc, param) => {
            const [key, value] = param.split('=');
            acc[key] = decodeURIComponent(value);
            return acc;
        }, params);
    }
    
    return JSON.stringify(params);
}

const url = 'https://www.example.com/?name=Alice&age=30';
const extractedParams = extractUrlParams(url);
console.log(extractedParams);