javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript获取url参数

JavaScript获取当前页面url参数的方法详解

作者：yqcoder

这篇文章主要为大家详细介绍了前端获取当前页面url参数的一些常见方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

一、使用 URLSearchParams（现代浏览器支持）

URLSearchParams 是 JavaScript 提供的一个内置对象，用于处理 URL 的查询字符串，它提供了一系列方便的方法来获取、设置和删除查询参数。

// 获取当前页面的 URL 参数
const queryString = window.location.search;
// 创建 URLSearchParams 对象
const urlParams = new URLSearchParams(queryString);
// 获取特定参数的值
const paramValue = urlParams.get("paramName");
console.log(paramValue);
// 遍历所有参数
urlParams.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

二、手动解析查询字符串

手动解析查询字符串是一种兼容性较好的方法，通过字符串的分割和处理来获取参数。

function getUrlParams() {
  const queryString = window.location.search.slice(1); // 去除问号
  const params = {};
  if (queryString) {
    const paramPairs = queryString.split("&");
    paramPairs.forEach((pair) => {
      const [key, value] = pair.split("=");
      if (key) {
        params[key] = decodeURIComponent(value || "");
      }
    });
  }
  return params;
}
// 使用示例
const allParams = getUrlParams();
const specificParam = allParams["paramName"];
console.log(specificParam);

三、在单页面应用（SPA）中使用路由库获取参数

在基于 Vue.js、React.js 等框架构建的单页面应用中，通常会使用路由库来管理页面导航，这些路由库也提供了方便的方法来获取 URL 参数。

1. Vue.js 示例（使用 Vue Router）

<template>
  <div>
    <p>参数值: {{ $route.query.paramName }}</p>
  </div>
</template>
<script>
export default {
  mounted() {
    const paramValue = this.$route.query.paramName;
    console.log(paramValue);
  },
};
</script>

2. React.js 示例（使用 React Router）

import { useSearchParams } from "react-router-dom";
function MyComponent() {
  const [searchParams] = useSearchParams();
  const paramValue = searchParams.get("paramName");
  return (
    <div>
      <p>参数值: {paramValue}</p>
    </div>
  );
}
export default MyComponent;

四、方法扩展

下面小编为大家整理了JavaScript获取当前页面url的各类参数的方法，希望对大家有所帮助

Location 对象

Location 对象包含有关当前 URL 的信息

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问

Location的各种属性：

方法一：

// 根据参数名获取url中的参数
function getQueryString(name) {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    const urlObj = window.location;
    var r = urlObj.href.indexOf('#') > -1 ? urlObj.hash.split("?")[1].match(reg) : urlObj.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}
 
alert(getQueryString("参数名称"));

方法二：

// 根据参数名获取url中的参数
function GetQueryString(name) { 
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
  var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
  var context = ""; 
  if (r != null) 
     context = r[2]; 
  reg = null; 
  r = null; 
  return context == null || context == "" || context == "undefined" ? "" : context; 
}
// 调用
    var 参数1 = GetQueryString['参数1'];
    var 参数2 = GetQueryString['参数2'];
    var 参数3 = GetQueryString['参数3'];

方法三：

// 根据参数名获取url中的参数
function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
// 调用
    var Request = new Object();
    Request = GetRequest();
    var 参数1,参数2,参数3,参数N;
    参数1 = Request['参数1'];
    参数2 = Request['参数2'];
    参数3 = Request['参数3'];

到此这篇关于JavaScript获取当前页面url参数的方法详解的文章就介绍到这了,更多相关JavaScript页面url参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文