获取url内的参数数据

2023-11-19

例如我们的页面 是含有参数的 类似于 www.baidu.com?userdata=百度用户

我们想获得 url内的userdata的数据值 那么就需要 使用下方这个正则判断方式来进行计算

window.location.href

这个可以获得 window对象内的location的href 也就是我们当前页面的地址

第一种 正则方式获得

然后通过语法正则判断问号 ? 后面的数据

    // 获取url的数据参数

      let url =window.location.href
      // // 返回参数对象
      function queryURLParams(url) {
        let pattern = /(\w+)=(\w+)/ig; //定义正则表达式
        let parames = {}; // 定义参数对象
        url.replace(pattern, ($, $1, $2) => {
          parames[$1] = $2;
        });
        return parames;
      }
      let urldata = queryURLParams(url)
      alert(urldata.userdata)

然后我们就可以alert弹窗提示 userdata的内容了

第二种 利用URLSearchParams语法获取

    let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  function queryURLParams(URL) {
    let url = URL.split("?")[1];
    const urlSearchParams = new URLSearchParams(url);
    const params = Object.fromEntries(urlSearchParams.entries());
    return params
  }
  console.log(queryURLParams(URL))

 

 缺点就是第二种方式 不适配IE浏览器

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

获取url内的参数数据 的相关文章

  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • JavaScript 重定向到新窗口

    我有以下代码 它根据下拉列表的值重定向到页面 我如何使其在新窗口中打开 function goto form var index form select selectedIndex if form select options index
  • 在requestAnimationFrame中使用clearRect不显示动画

    我正在尝试在 HTML5 画布上做一个简单的 javascript 动画 现在我的画布是分层的 这样当我收到鼠标事件时 背景层不会改变 但带有头像的顶层会移动 如果我使用 requestAnimationFrame 并且不清除屏幕 我会看到
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 动态img(或视频)标签根本不加载资源,HTTP请求处于“待处理”状态

    我尝试使用以下方法在 Web 应用程序上加载资源时遇到一些问题img or videoHTML 标签 我在我的应用程序中使用 Angular 并动态设置src的参数img标签 使用ng src src 指示 没有那么多图像和资源需要加载 在
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • 如何将vue组件插入到contenteditable div中

    我想用 vue 创建简单的所见即所得编辑器 我发现只有一个在 vue js 上创建的真正的所见即所得编辑器 这里是 https quasar dev vue components editor 但我没有发现有插入图像的能力 其他 vue w
  • 无效字符错误:“fred”

    我确信他一定是一个新手问题 简单来说 我想定义我的第一个 Polymer dart 组件 只是我一直在同一个减速带上踢脚趾 为了使事情变得非常简单 我将其简化为一个非常简单的示例 我做了一个简单的rename示例 跑表 来自 Dart 组件
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • 【论文笔记系列】AutoML:A Survey of State-of-the-art (上)

    之前已经发过一篇文章来介绍我写的AutoML综述 最近把文章内容做了更新 所以这篇稍微细致地介绍一下 由于篇幅有限 下面介绍的方法中涉及到的细节感兴趣的可以移步到论文中查看 论文地址 https arxiv org abs 1908 007
  • yolo 车辆测距+车辆识别+单目测距(双目测距)

    基于yolo目标检测算法实现的车前道路中的车辆和行人检测 并且可以估测出目标与本车之间的距离 一 视频展示 yolo车距1 订阅专栏获得源码 提供完整代码 无需看下文 二 单目测距原理 图中有一个车辆 且车辆在地面上 其接地点Q必定在地面上
  • 用KNN(K近邻算法)和ANN(人工神经网络)建立预测模型

    数据 输入 32 维的向量 输出一个值 有151组这样的数据 目的 用这样一组数据建立一个预测模型 输入32维的向量就能预测一个值 代码部分 1 导入工具包 在import pandas as pd import seaborn as sn
  • 机器学习算法Python实现:tfidf 特征词提取及文本相似度分类

    coding utf 8 本代码主要实现了对于商品名称根据tfidf提取特征词 然后基于已经训练好的word2vec模型 对每行商品的tfidf值大于某一阈值的特征词相似度匹配已经给定的商品类别 import jieba import ji
  • 有趣算法之C++函数模板

    C 函数模板 20200924 原文链接 https www runoob com w3cnote c templates detail html 原文正在慢慢理解中 模板是C 支持参数化多态的工具 使用模板可以使用户为类或者函数声明一种一
  • Qt-信号和槽

    一 Qt信号和槽机制 emit的使用 一 相关概念 1 信号 Signal 就是在特定情况下被发射的事件 例如PushButton 最常见的信号就是鼠标单击时发射的 clicked 信号 一个 ComboBox 最常见的信号是选择的列表项变
  • 【SQLSERVER】 "in"的替换方法

    期望效果 select From Empoylee Where Address1 Address2 in Select Address1 Address2 From EmpoyleeAdresses Where Country Canada
  • iOS架构-组件化(项目框架搭建2)

    静态库引用静态库 如果像上图一样 直接在业务层组件引用数据层组件的文件 则会报错 因为组件之间没有建立引用关系 如下图 静态库如何引用Pods第三方库 拷贝Podfile文件到项目 打开终端执行pad install 直接引用Pod下面的Y
  • VC++6.0调试工具使用初步

    摘要 程序设计初者学会IDE 集成开发环境 中提供的调试工具 是一件非常重要的事 本文在初学者有初步的程序设计体验 只需要掌握到控制结构 为前提 介绍了单步执行 断点设置及观察程序运行情况的方法 并配有练习的建议 方便读者的学习 相关博文
  • HTTP协议头部与Keep-Alive模式详解

    转自 https www byvoid com zhs blog http keep alive header 1 什么是Keep Alive模式 我们知道HTTP协议采用 请求 应答 模式 当使用普通模式 即非KeepAlive模式时 每
  • Bootstrap导航

    Bootstrap 导航 1 定义导航组件 基本结构 ul class nav li class active a href 首页 a li li a href 导航标题1 a li li a href 导航标题2 a li ul 1 1
  • Code39码和Code93码的区别

    条形码可以标示出产品的生产国 制造厂家 图书分类号 邮件起止地点 类别 日期等许多信息 因而在很多领域都得到了广泛的应用 尤其是那些可以同时支持字母 数字 字符这些字符集的条码 比如Code39和Code93 都是可以支持多种字符集的条形码
  • ios游戏开发

    知识系统 英文教程网站 http www csdn net article 2012 12 20 2813035 game dev guide 开发类库 http www csdn net article 2012 11 07 281158
  • Jmeter动态吞吐量实现

    在容量测试时 控量 是非常重要的 JMeter 是根据线程数大小来控制压力强弱的 但我们制定的压测目标中的指标往往是吞吐量 QPS TPS 这就给测试人员带来了不便之处 必须一边调整线程数 一边观察 QPS TPS 达到什么量级了 为了解决
  • 本地视频播放器

    这是一个基于VUE Go做的一个本地视频播放器项目 欢迎fork或star 使用指南 本地开发 安装依赖 npm install 开发模式 npm run dev 打包 npm run build 启动后端 bee run 直接使用 解压
  • “条件递进式编程”技巧两例

    什么是 条件递进式编程 呵呵 这是我自己起的名字 所谓条件递进式编程 就是指需要一系列相关函数组合执行的情况下 后续函数执行的必要性由前面所有函数执行是否成功来决定 比如说 有一系列函数如下DoSomething1 DoSomething2
  • 端到端的图像压缩------《End-to-end optimized image compression》笔记

    End to end optimized image compression 简介 内容 整体算法结构以及流程如下 前向传播 变换优化问题 变分推导问题 实验结果 结论 论文地址 https arxiv org abs 1611 01704
  • 获取map中第一个key值

    获取map中第一个key值 param map 数据源 return public static String getKeyOrNull Map
  • SqliLabs Less26-26a

    第二十六关 GET类型基于你所有的空格和言论都是属于我的错误 1 判断注入点 根据提示 sql语句应该存在过滤 观察源代码发现存在or and 空格 斜杠过滤 绕过方法 Or and 采取双写绕过 注释过滤 采取and 1闭合语句绕过 空格
  • 获取url内的参数数据

    例如我们的页面 是含有参数的 类似于 www baidu com userdata 百度用户 我们想获得 url内的userdata的数据值 那么就需要 使用下方这个正则判断方式来进行计算 window location href 这个可以