在 JavaScript 中获取路径参数

最新推荐文章于 2024-10-02 11:53:16 发布

扶苏1002

最新推荐文章于 2024-10-02 11:53:16 发布

阅读量1k

点赞数 4

分类专栏： JavaScript实战文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_44741577/article/details/137473974

版权

JavaScript实战专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了三种从URL中提取参数的方法：使用JavaScript的URLSearchParams对象，通过正则表达式匹配，以及自定义函数实现。分别展示了如何获取foo和bar参数的值。

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

方法一：使用URLSearchParams对象

// 假设URL为 http://example.com/?foo=1&bar=2

const searchParams = new URLSearchParams(window.location.search);
const fooParam = searchParams.get('foo'); // 获取参数foo的值，结果为 "1"
const barParam = searchParams.get('bar'); // 获取参数bar的值，结果为 "2"

方法二：使用正则表达式

// 假设URL为http://example.com/?foo=1&bar=2

const urlParams = {};
const regExp = /[?&]+([^=&]+)=([^&]*)/g;
const matches = window.location.href.match(regExp);
matches.forEach(param => {
  const [_, key, value] = param.split('=');
  urlParams[key] = value;
});

const fooParam = urlParams['foo']; // 获取参数foo的值，结果为 "1"
const barParam = urlParams['bar']; // 获取参数bar的值，结果为 "2"

方法三：使用自定义函数

// 假设URL为 http://example.com/?foo=1&bar=2

function getUrlParam(name) {
  const regExp = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  const match = window.location.search.substr(1).match(regExp);
  if (match) {
    return decodeURI(match[2]);
  }
  return null;
}

const fooParam = getUrlParam('foo'); // 获取参数foo的值，结果为 "1"
const barParam = getUrlParam('bar'); // 获取参数bar的值，结果为 "2"