浅析JS获取url中的参数实例代码

首先,获取URL中的参数是Web开发经常需要的功能。JavaScript提供了多种方式可以获取URL参数,本文将介绍其中两种最常见的方式:URLSearchParams和正则表达式。

使用URLSearchParams

URLSearchParams是一个原生对象,主要用来操作URL查询参数。使用URLSearchParams获取URL参数非常方便。

我们可以用如下代码创建一个URLSearchParams对象:

const urlParams = new URLSearchParams(window.location.search);

这个新建的URLSearchParams对象会自动从当前网页的URL中获取查询参数。如果你想获取另外一个链接中的参数,只需把该链接作为参数传递给URLSearchParams构造函数即可。

一旦我们有了urlParams对象,我们就可以通过调用get()、getAll()、has()、set()、delete()、keys()、values()和entries()方法对其进行查询和修改。下面是几个例子。

获取指定参数的值

const myParam = urlParams.get('myParam');
console.log(myParam);

检查是否存在参数

if (urlParams.has('myParam')) {
    // do something
}

使用正则表达式

虽然URLSearchParams是一种非常方便的获取URL参数的方法,但有些时候我们还是需要使用正则表达式来取得它们。

下面是一些正则表达式的示例。

获取所有参数

const url = window.location.href;
const pattern = /[?&](\w+)=([^&#]*)/g;
let params = {};
let match;
while (match = pattern.exec(url)) {
    params[match[1]] = decodeURIComponent(match[2]);
}
console.log(params);

获取指定参数的值

function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
    const results = regex.exec(url);
    if (!results) {
        return null;
    }
    if (!results[2]) {
        return '';
    }
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
console.log(getParameterByName('myParam'));

以上就是使用URLSearchParams和正则表达式获取URL参数的MarkDown文档攻略,希望对您有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:浅析JS获取url中的参数实例代码 - Python技术站

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

相关文章

  • Struts2.5版本struts.xml与web.xml配置的更改方法

    Struts2.5是一个非常流行的Java web框架,其中struts.xml与web.xml是两个重要的配置文件。如果你需要修改它们,以下是详细的操作步骤: 编辑struts.xml Struts2.5默认使用的是struts.xml配置文件,你可以根据自己的需要修改它。下面是修改struts.xml的步骤: 打开struts.xml文件 “` “`…

    Java 2023年5月20日
    00
  • MyBatis批量插入(insert)数据操作

    让我来详细讲解一下MyBatis批量插入数据操作的攻略。 一、什么是批量插入 批量插入指在一次数据库操作中插入多条数据记录。相比于循环单次插入,批量插入可以显著提高数据库操作效率。 二、MyBatis批量插入的实现方式 在MyBatis中,可以通过insert标签或者selectKey标签实现批量插入。 1. insert标签实现批量插入 使用insert标…

    Java 2023年5月20日
    00
  • Java代码实践12306售票算法(二)

    “Java代码实践12306售票算法(二)”是一篇关于Java编程的算法实践教程。下面,让我来详细讲解这篇文章的完整攻略吧。攻略分为以下几个部分: 1. 理解12306售票算法 这一节主要是讲解12306售票算法的基本原理,以及常见的问题。首先,我们需要理解Java多线程编程的基础知识,并且掌握类的使用,以及多线程的启动和结束。其次,需要了解12306售票系…

    Java 2023年5月19日
    00
  • 将html页改成jsp的两种方式

    将HTML页面改为JSP页面的主要目的是为了让页面能够动态生成,便于后台数据的传递和展示。下面介绍两种方式来将HTML页面转换为JSP页面。 1. 直接将HTML文件后缀改为JSP 这是最简单的一种方式,只需将原来的HTML文件后缀改为JSP即可。 示例1: 原始的HTML页面代码如下: <!DOCTYPE html> <html> …

    Java 2023年6月1日
    00
  • JSP实用教程之简易页面编辑器的实现方法(附源码)

    首先我们先来了解一下题目中的内容: JSP实用教程之简易页面编辑器的实现方法(附源码) 该文章是一篇针对JSP编程和页面编辑器的教程,主要介绍了如何使用JSP编写一个简易的页面编辑器,同时也附有源码提供下载。 下面我们来分步骤详细讲解该教程的实现方法: 1、目标 首先,我们需要明确本篇教程的目标是什么。本篇教程要实现的是一个基于JSP的简易页面编辑器,能够实…

    Java 2023年6月15日
    00
  • 深入理解Maven环境搭建和介绍

    深入理解Maven环境搭建和介绍 什么是Maven Maven 是基于项目对象模型(POM),可以管理项目构建、依赖管理和项目信息维护的工具。使用 Maven 可以很方便地构建和管理 Java 项目。Maven 拥有高度的可重用性、可扩展性、低耦合性和可维护性,可以使软件开发过程更加规范和高效。 Maven环境搭建 Maven 的环境搭建主要包括两个步骤:安…

    Java 2023年5月20日
    00
  • Windows下搭建python开发环境详细步骤

    下面我来详细介绍在Windows下搭建Python开发环境的步骤。 安装Python 下载Python 在Python官网 https://www.python.org/downloads/ 下载最新版Python安装包。根据本机操作系统位数,选择32位或64位的安装包进行下载。 安装Python 双击下载的Python安装包文件,按照提示进行安装即可。 在…

    Java 2023年5月26日
    00
  • 浅谈SpringBoot项目打成war和jar的区别

    一、Spring Boot打为war包和jar包的区别 在Spring Boot的项目中,我们有两种打包方式,一个是打成war包,一个是打成jar包。两者的主要区别是在于部署方式方面。 1、打成war包 war包是一种WEB应用程序归档文件,其包含了Web应用程序的完整内容,包括jsp、servlet、html、javascript、css等静态资源以及ja…

    Java 2023年5月19日
    00
合作推广
合作推广
分享本页
返回顶部