JavaScript获得url查询参数的方法

当我们需要获取当前页面URL中的查询参数时,可以使用JavaScript代码来完成这一任务。获取URL查询参数的方法主要分为两种,分别是使用正则表达式和URLSearchParams对象。

使用正则表达式获取URL查询参数

使用正则表达式来获取URL查询参数,可以通过对当前URL使用方法location.search来获得查询参数,然后使用正则表达式来解析得到想要的参数值。

代码示例如下:

// 获取URL查询参数的方法,使用正则表达式实现
function getQueryParam(name) {
  const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');
  const result = window.location.search.substr(1).match(reg);
  if (result !== null) {
    return decodeURIComponent(result[2]);
  }
  return null;
}

// 获取URL中的参数名为id的值
const id = getQueryParam('id');
console.log(id);

通过调用getQueryParam方法,可以获取URL中参数名为id的值。

使用URLSearchParams对象获取URL查询参数

使用URLSearchParams对象获取URL查询参数,是一种较为便捷的方式。该方法创建一个URLSearchParams对象,然后可以使用get()方法直接获取所需参数的值。

代码示例如下:

// 获取URL查询参数的方法,使用URLSearchParams对象实现
function getQueryParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  const result = urlParams.get(name);
  return result;
}

// 获取URL中的参数名为id的值
const id = getQueryParam('id');
console.log(id);

通过调用getQueryParam方法,同样可以获取URL中参数名为id的值。

以上两种方法都可以实现获取URL的查询参数,具体使用哪种方式,要根据项目的实际情况来进行选择。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript获得url查询参数的方法 - Python技术站

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

相关文章

  • JavaScript严格模式下关于this的几种指向详解

    《JavaScript严格模式下关于this的几种指向详解》是一篇关于JavaScript严格模式下this关键字相关问题的文章,下面将就该篇文章的主要内容进行详细讲解。 一、什么是严格模式 回答这个问题之前需要了解JavaScript严格模式的定义。JavaScript严格模式是当开发者使用更优化的语法、开启更严格的错误提示、禁止使用不安全的语言集合时启用…

    JavaScript 2023年6月10日
    00
  • JS锚点的设置与使用方法

    当我们需要在一个较长的网页中跳转到指定页面位置或细节处的时候,往往会使用到JS锚点。JS锚点可以通过设置页面中元素的id属性,实现在页面内跳转到指定元素的效果。下面通过以下几个方面来详细讲解JS锚点的设置与使用方法。 设置JS锚点 1.设置元素的id属性 在HTML中,我们可以通过在指定的元素上设置id属性的值,来为该元素创建一个唯一的标识符。例如: &lt…

    JavaScript 2023年6月10日
    00
  • 一起学写js Calender日历控件

    一起学写 JavaScript Calender 日历控件 – 完整攻略 本攻略将帮助你学习如何编写一个简单的 JavaScript 日历控件。我们将使用原生 JavaScript 实现该控件,这样可以更好地学习和理解 JavaScript 和 DOM 操作。 步骤 1:HTML 结构 我们需要一个 HTML 结构作为日历控件的基础。以下是一个基本的 HTM…

    JavaScript 2023年5月27日
    00
  • 使用js的replace()方法查找字符示例代码

    使用JavaScript中的replace()方法可以对字符串中的特定字符进行查找和替换。下面是使用replace()方法查找字符的攻略: 步骤1:编写要查找的字符串 首先,我们需要定义一个包含我们要查找的字符串的变量。 let str = "This is a sample string. We will use the replace() me…

    JavaScript 2023年5月28日
    00
  • JavaScript字符串对象substr方法入门实例(用于截取字符串)

    JavaScript字符串对象substr方法入门实例(用于截取字符串) 什么是substr方法? 在JavaScript中,字符串是一种数据类型,字符串对象是一种包含该数据类型的对象类型。JavaScript为字符串对象提供了许多用于处理字符串的方法,其中之一就是substr方法。substr方法可以用于截取字符串中的一段字符,并返回该子字符串。 subs…

    JavaScript 2023年5月28日
    00
  • 关于JavaScript中URL对象的一些妙用

    关于JavaScript中URL对象的一些妙用,我来为大家详细讲解一下。 什么是URL对象 URL对象是JavaScript中的一个内置对象,它表示一个统一资源定位符,即URL。它可以帮助我们解析并操作URL。 在JavaScript中,我们可以通过创建一个URL实例来创建一个URL对象。其语法如下: let urlObject = new URL(urlS…

    JavaScript 2023年6月11日
    00
  • JS 基本概念详细介绍

    JS 基本概念详细介绍 JavaScript 是一种基于对象和事件驱动的脚本语言,主要用于 Web 网页上实现交互效果、动态效果等功能。本文将从语言基础、DOM 操作、事件处理、AJAX 等几个方面介绍 JavaScript 的基本概念。 语言基础 变量 JavaScript 中的变量可以通过关键字 var 或 let、const 声明,推荐使用 let、c…

    JavaScript 2023年5月18日
    00
  • JavaScript表单验证的两种实现方法

    下面是详细讲解JavaScript表单验证的两种实现方法的攻略。 一、方法一:使用HTML5表单验证 在HTML5中,可以使用一些input标签的属性进行简单的表单验证。 1. 必填项验证 首先介绍一个必填项验证的属性,即required属性。将该属性设置在input标签中,可以让表单中的该输入框变为必填项。 示例代码: <form> <l…

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