使用js获取地址栏中传递的值

想要使用 JavaScript 获取地址栏中的传参,可以通过以下两种方式实现:

方法一:使用 window.location.search 获取查询字符串

地址栏的查询字符串可以使用 window.location.search 属性获取。查询字符串以问号(?)开头,其后紧跟着以 & 符号分隔的多个键值对,例如:http://www.example.com?name=John&age=20。

我们可以通过如下代码获取地址栏中 query 参数的值:

// 获取地址栏中查询字符串
const query = window.location.search;

// 使用 URLSearchParams 解析查询字符串
const params = new URLSearchParams(query);

// 获取名称为 name 的参数
const name = params.get('name');

// 获取名称为 age 的参数
const age = params.get('age');

这其中,URLSearchParams 类用于解析查询参数,并通过 get 方法获取指定键名的对应值。需要注意的是,如果 query 参数中存在多个同名键值对,则只会获取第一个键值对的值。

方法二:使用正则表达式获取指定参数

除了使用 URLSearchParams 对象外,我们还可以通过正则表达式匹配地址栏中的 query 参数,例如:

// 获取 query 参数
const query = window.location.search;

// 定义匹配表达式
const reg = /[\?\&](\w+)=(\w+)/ig;

// 定义用于存储结果的对象
const params = {};

// 解析 URL 参数
query.replace(reg, function(a, b, c){
    params[b] = c;
});

// 获取名称为 name 的参数
const name = params['name'];

// 获取名称为 age 的参数
const age = params['age'];

上述代码中,我们通过正则表达式解析出地址栏中的 query 字符串,并通过 replace 方法将其转换为 Object 类型的键值对。需要注意的是,当存在多个同名参数时,会覆盖前面的值。

希望以上两种方法能够对大家有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用js获取地址栏中传递的值 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • js闭包所用的场合以及优缺点分析

    JS闭包是指函数可以访问当前环境外的变量,并在执行后保留对这些变量的引用。通俗的说,就是函数内部的函数可以访问函数外部函数的变量。下面我们来一步一步详细讲解JS闭包所用的场合以及优缺点分析。 什么是闭包 在JS中,每当创建一个函数,该函数就会创建一个作用域(scope)链。作用域链可以帮助函数在查找变量时,逐级向上进行查找,直到找到为止。而闭包,正是通过这个…

    JavaScript 2023年6月10日
    00
  • 举例详解JavaScript中Promise的使用

    下面我将详细讲解JavaScript中Promise的使用: 什么是 Promise? Promise 是 JavaScript 中用于处理异步操作的一种方案,它可以使异步操作更加优雅地编写,避免回调地狱的问题,解决了回调函数嵌套过深的问题。 Promise 有三种状态: pending(等待中) fulfilled(已完成) rejected(已拒绝) P…

    JavaScript 2023年5月27日
    00
  • JS 面向对象的5钟写法

    下面我来详细讲解一下“JS 面向对象的5种写法”的完整攻略。 前言 在JavaScript中,常用的面向对象的写法有5种,分别是原型链、Class、工厂模式、构造函数和混合模式。下面我们来分别介绍这五种写法。 1. 原型链 在JavaScript中,每个对象都有一个原型(也就是一个或者多个prototype)。使用原型链实现的继承是通过将一个类型的实例设置为…

    JavaScript 2023年5月27日
    00
  • JavaScript详细分析数据类型和运算符

    JavaScript详细分析数据类型和运算符 数据类型 在JavaScript中,数据类型可以分为以下几种: 原始数据类型 string:字符串类型,由一个或多个字符组成,用单引号或双引号括起来表示。 number:数字类型,用来表示数值。 boolean:布尔类型,只有两个取值,分别是true和false。 引用数据类型 object:对象类型,表示一组相…

    JavaScript 2023年5月18日
    00
  • javascript Blob对象实现文件下载

    JavaScript Blob对象实现文件下载 在Web开发中,经常需要实现文件的上传和下载功能。这里介绍一种实现文件下载的方法:使用JavaScript的Blob对象。 Blob对象 Blob(Binary Large Object)对象表示一个不可变的、原始数据的类似文件对象。它允许读取文件内容、以及将内容存储到文件中。在实现文件下载的过程中,我们将要使…

    JavaScript 2023年5月27日
    00
  • JavaScript脚本语言是什么_动力节点Java学院整理

    什么是 JavaScript 脚本语言 JavaScript 是一种动态脚本语言,主要用于在网页上添加交互特效和动态页面的功能。JavaScript 脚本在网页上运行,可以在用户的浏览器中直接执行,无需服务器端的支持,其灵活性和易用性使它成为前端开发的重要一环。 特点 JavaScript 脚本语言有以下几个特点: 解释型:与编译型语言不同,JavaScri…

    JavaScript 2023年5月27日
    00
  • 解决Jquery load()加载GB2312页面时出现乱码的两种方案

    当使用jQuery的load()方法加载GB2312编码的页面时,可能会出现乱码问题。这是由于GB2312编码是一种不同于常规UTF-8编码的字符编码方式。为了解决该问题,可以尝试以下两种方式: 方案一:使用iconv模块进行编码转换 可以使用Node.js的iconv模块将GB2312编码的字符串转换为UTF-8编码,然后再进行加载。 示例代码 const…

    JavaScript 2023年5月19日
    00
  • node.js实现带进度条的多文件上传

    关于“node.js实现带进度条的多文件上传”的攻略,可以分为以下几个步骤: 1. 搭建服务端 首先需要建立一个node.js的服务端应用,可以使用express框架来快速搭建。具体步骤如下: 安装express模块: bash npm install –save express 在项目目录下新建一个名为app.js的文件。 在app.js文件中引入exp…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部