前端使用正则表达式获取地址栏URL参数的值并将需要的参数值展示在页面

最新推荐文章于 2024-05-06 10:59:29 发布
最新推荐文章于 2024-05-06 10:59:29 发布
阅读量3.7k 收藏
点赞数 39
分类专栏： 常用教程系列 高级前端全栈教程系列 文章标签： 正则表达式 地址栏url参数 前端 面试题
未经博主同意，禁止转载
本文链接：https://blog.csdn.net/weixin_41937552/article/details/112854992
版权

业务场景：APP中有个H5页面需要分享到微信，用户点击这个消息会跳转到这个网页进行信息确认，然后引导用户下载另一个应用。我们前端工程师需要做的就是将分享的参数在这个网页的地址栏进行获取并展示在信息确认页面。

分享功能请参考我上一篇文章：友盟U-share sdk 分享的接入（支持Android及IOS）

URL地址(例)：https://www.baidu.com/?taskId=202008271119381110000637165xxxx&applicationNo=620043450959360&applicantName=李港&idNo=xxxx26199703180911&serno=eg4ns2p&roomNo=null&appid=xxxx316237&appkey=xxxxa62356

了解本专栏 订阅专栏 解锁全文 超级会员免费看
孙叫兽
关注
  • 39
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 22
    评论
专栏目录
订阅专栏
js URL参数的拼接方法比较
10-28
请求的URL后面带参数在项目中是很常见的，常用在的地方比如跳转到新页面或者请求CGI等
1.30 前端-每日学习 url传参 正则表达式
m0_51409389的博客
01-13 216
1. url一次传两个参数 .html?travelId="+id+"&userId"+xx; 2. 往一个新表中插入数据必须先创此表的实体类 3. get 方法报错 There is no getter for property named ‘userId’ in ‘class com.spring.demo.model.Travel’
[springmvc]从前端获取参数以及显示
weixin_48595687的博客
08-02 285
6.接收请求参数以及数据回显。
通过正则表达式获取url中参数
weixin_30564901的博客
06-07 364
url： http://xxxx.com?name=魅力&id=123 js中: var name = getUrlParam("name"); /*通过正则获取url中的参数*/function getUrlParam(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");...
前端获取JSON数据显示在页面上
热门推荐
kiko.c的博客
06-04 4万+
从后台获取数据显示在界面上是前端开发所必须要掌握的一项基本技能，简单记录一下从本地模拟数据的JSON文件中获取数据显示在界面上。 1.先创建本地json文件，命名为data.json,json文件存储数据格式如下： { "list":[ { "project_img":"images/Home-logo1-hua.png", "project_name":"1...
获取地址栏参数 采用正则表达式获取地址栏参数
————————————————————————————————
02-14 376
采用正则表达式获取地址栏参数 方法： function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]); return null; } // 调用方法 ***切记参数名要带引号
正则表达式获取url后面的参数&&截取微信支付code值（微信内置浏览器里使用微信支付）
南北极之间
05-18 932
正则表达式获取url后面的参数&&截取微信支付code值（微信内置浏览器里使用微信支付）
js 正则表达式 获取url地址栏传参
fang5211的博客
10-26 255
获取单个参数 function jumpId(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); var path = window.location.search.substr(1).match(reg); if (path != null) { return decodeURI(path[2]); } return null; } 获取地.
三种方法用JS获取地址栏参数的方法（正则超级简单）
X-rapido的专栏
06-24 6089
今天碰到要在一个页面获取另外一个页面url传过来的参数，一开始很本能的想到了用 split(“?”)这样一步步的分解出需要的参数。后来想了一下，肯定会有更加简单的方法的！所以在网上找到了两个很又简单实用的方法，mark下方法一：采用正则表达式获取地址栏参数：（ 强烈推荐，既实用又方便！）function GetQueryString(name){ var reg = new RegExp(
javascript 获取url参数的正则表达式(用来获取某个参数值)
10-29
javascript 传多个参数的正则表达式(用来获取某个参数值) ,脚本之家之前发布通过函数获取url参数的代码不是正则表达式。
JS正则表达式替换url参数的方法
12-13
具体代码如下所示： /* 定义替换对象键值 */ var setReferArgs = function(){ .../* 替换URL的参数 */ var replaceUrlParams = function(url){ var actualUrl = ""; var referArgs = setReferArgs(); for(var ke
通过正则表达式获取url中参数的简单实现
01-19
/*通过正则获取url中的参数*/ function getUrlParam(name){ var reg = new RegExp((^|&)+ name +=([^&]*)(&|$)); var r = [removed].search.substr(1).match(reg); if(r!=null)return decodeURI(r[2]); return ...
Java基于正则表达式获取指定HTML标签指定属性值的方法
08-31
主要介绍了Java基于正则表达式获取指定HTML标签指定属性值的方法,涉及java基于正则的HTML元素匹配相关操作技巧,需要的朋友可以参考下
获取地址栏中的参数
前后端分离，人不分离！
08-27 2019
获取地址栏中的参数（?key=value)
深入理解正则表达式：从入门到精通
https://blog.amd794.com
04-30 968
在这个示例中，我们使用正则表达式匹配日志文件中的请求路径，并利用collections.Counter统计每个请求路径出现的次数，最后输出出现次数最多的前5个请求路径及其次数。通过结合Python中的re模块和正则表达式，可以实现各种文本处理需求，包括数据抽取、格式化、搜索替换等功能。通过实际的日志分析项目，结合正则表达式和Python编程，可以更好地理解和应用正则表达式在日志分析中的作用，提高数据处理和分析的效率和准确性。在Python中，我们可以使用re模块来进行正则表达式的匹配操作。
使用IIS部署Vue项目
最新发布
weixin_44656422的博客
05-06 304
使用IIS部署Vue项目，后端必须跨域，不要在Vue中用proxy跨域，那个只在dev环境中有用！IIS安装，不用全部打勾，有些他默认就是方块 ■ 选择性安装的，就维持原样就可以。
大模型部署之前端页面编写框架，我选streamlit
人工智能
04-30 856
Streamlit是一个开源的Python库，它让数据科学家和开发者可以快速创建和分享美观的，交互式的Web应用。无需拥有前端开发经验，任何人都可以使用Streamlit将数据脚本转换为分享给非技术用户的交互式Web应用。它简化了Web应用的开发流程，让开发者能够专注于数据和业务逻辑，而不是UI代码。Streamlit的设计哲学是简洁高效，它通过减少样板代码的使用，使得创建数据驱动的应用变得前所未有的简单。
5-用户权限控制（前端）
qq_53568730的博客
04-29 332
注意：此时虽然可以实现用户权限控制的菜单显示，但仍可以通过url访问不属于自己权限的页面（这需要通过动态路由技术实现）3.在对应的侧边框组件中获取菜单数据，并通过循环遍历将其显示到页面。1.登录成功后，调用状态管理中对应的设置菜单的方法。2.将后端返回的菜单数据存入Cookie中。
使用正则表达式获取url中的参数
09-14
### 回答1： 您好，第一个问题属于技术问题，可以回答。您可以使用以下代码获取url中的参数： ```python import re url = "https://www.example.com?param1=value1&param2=value2&param3=value3" params = re.findall(r'\?(\S+)', url)[0].split('&') for param in params: key, value = param.split('=') print(f"{key}: {value}") ``` 以上代码使用正则表达式和字符串分割的方式获取url中的参数，并将其打印出来。您可以根据您的具体需求进行修改。希望能够帮到您！ ### 回答2： 使用正则表达式获取URL中的参数可以通过以下步骤实现： 1. 定义一个正则表达式模式来匹配URL中的参数。例如，可以使用类似于`(\w+)=(\w+)`的模式来匹配参数名和参数值。 2. 使用编程语言中的正则表达式函数来查找URL中匹配正则表达式模式的部分。例如，在Python中，可以使用`re.findall()`函数来匹配所有符合模式的参数对。 3. 遍历匹配的参数对列表，并提取参数名和参数值。例如，在Python中，可以使用分组功能`(\w+)`和`(\w+)`来提取参数名和参数值。 4. 将提取的参数名和参数值存储在合适的数据结构中，以便后续使用。例如，可以使用字典来存储参数名和参数值的键值对。 以下是一个简单的Python示例： ```python import re def get_url_parameters(url): pattern = r"(\w+)=(\w+)" matches = re.findall(pattern, url) parameters = {} for match in matches: parameter_name = match[0] parameter_value = match[1] parameters[parameter_name] = parameter_value return parameters url = "https://www.example.com/?name=Alice&age=25&gender=female" parameters = get_url_parameters(url) print(parameters) ``` 运行上述代码，输出将是一个包含参数名和参数值的字典： `{'name': 'Alice', 'age': '25', 'gender': 'female'}` ### 回答3： 使用正则表达式获取URL中的参数可以通过分析URL的结构，截取参数部分，并使用正则表达式模式进行匹配操作。以下是一个示例代码： ```python import re def extract_params_from_url(url): pattern = r"[?&](\w+)=([^&]+)" matches = re.findall(pattern, url) params = {} for match in matches: key = match[0] value = match[1] params[key] = value return params # 示例URL url = "https://www.example.com/page?username=johndoe&id=12345" params = extract_params_from_url(url) print(params) ``` 上述代码中的`extract_params_from_url`函数使用正则表达式模式`[?&](\w+)=([^&]+)`，该模式匹配参数名和参数值，并且将它们存储在字典中。最后调用该函数，并传入示例URL，即可获取到URL中的参数。 输出结果为：`{'username': 'johndoe', 'id': '12345'}`。 需要注意的是，上述代码中的正则表达式模式仅适用于常见的URL格式，如果URL的参数部分具有其他特殊结构，可能需要根据实际情况调整正则表达式的模式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 22
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孙叫兽

打赏不会怀孕

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值