(巨好使,详细,解析URl,URl自定义传参)js URl中快速自定义传参,并且实现参数解析 修改 和新增,替换功能

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 我们在日常开发中经常会遇到要对url中的参数进行修改和新增,但是自己手动每次敲就会导致代码很麻烦,且不易维护

背景


我们在日常开发中经常会遇到要对url中的参数进行修改和新增,但是自己手动每次敲就会导致代码很麻烦,且不易维护


而且可能会遇到一些特殊的需求,需要携带固定参数,进行页面的多次跳转这种情况(!!!)


方法


1.解析url中的参数(将正确的url地址输进去,自动返回解析以后的参数)

//获取url路径中的参数
const getQuery = (url) => {
    // result为存储参数键值的集合
    const result = {}
    //建立正则匹配路径中有没有问号
    var reg = /\?/g
    if (reg.test(url)) {
        // str为?之后的参数部分字符串
        const str = url.substr(url.indexOf('?') + 1)
        // arr每个元素都是完整的参数键值
        const arr = str.split('&')
        for (let i = 0; i < arr.length; i++) {
            // item的两个元素分别为参数名和参数值
            const item = arr[i].split('=')
            result[item[0]] = item[1]
        }
    }
    return result
}

2. 进行url参数的修改,更新,以及覆盖功能

const chanUrlData = (hostUrl='',orignJson={},newJson={}) => {
    //快速自定义url路径中的参数的原理,首先将url中的数据json获取下来,然后通过遍历将url中的数据进行新增和覆盖
    //1. hostUrl='链接的host地址(链接'?'之前的部分) https://blog.csdn.net/qq_59747594/article/details/126397187'
    //2. orignJson='链接中问号后面的json数据' {name:wang,sex:1}
    //3. newJson='自定义在url里面路径的参数' {name:wangzhaoyang,money:1000000}
    for (let x in newJson) {
        orignJson[x] = newJson[x]
    }
    var newDataJson=[]//用来接收最新的生成url参数数据
    for (var item in orignJson) {
        newDataJson.push(item + '=' + orignJson[item])
    }
    if(newDataJson.length>0){
        return hostUrl+'?'+newDataJson.join('&')
    }else{
        return hostUrl
    }
}


使用(仔细体会一下结果的那张截图)

var urlStr='https://blog.csdn.net/qq_59747594/article/details/126397187?name=wang&sex=1'
console.log(getQuery(urlStr))
console.log(chanUrlData(urlStr.split('?')[0],getQuery(urlStr),{
    name:'wangzhaoyang',
    money:10000000
}))

1024b19218af40c7a8a6290c6186518d.png

解释


就是为什么方法一和方法二我没有写在一块,那样不更简单吗,其实不然,因为在某些特殊的情况下,不需要进行url的解析直接就可以更简单拿到url中的数据


window.local(最方便兼容各种js)拿到路径全部信息(hash,host,hostname,href,origin,pathname,port,protocol)以及跳转路由__揽的博客-CSDN博客_js获取路由hash


uniapp,微信中

var pages = getCurrentPages();//获取所有页面的数组对象
var currPage = pages[pages.length - 1]; //当前页面
var beforePage= pages[pages.length - 2]; //上一个页面


(uniapp跳转回显),A页面进入B页面,B页面返回A页面,并传值给A页面(技巧绝对好用慢慢看)__揽的博客-CSDN博客_uniapp 页面返回传值


目录
相关文章
|
1月前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
16天前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
|
3天前
|
机器学习/深度学习 人工智能 自然语言处理
Hugging Face 论文平台 Daily Papers 功能全解析
【9月更文挑战第23天】Hugging Face 是一个专注于自然语言处理领域的开源机器学习平台。其推出的 Daily Papers 页面旨在帮助开发者和研究人员跟踪 AI 领域的最新进展,展示经精心挑选的高质量研究论文,并提供个性化推荐、互动交流、搜索、分类浏览及邮件提醒等功能,促进学术合作与知识共享。
|
2天前
|
存储 自然语言处理 搜索推荐
外汇CRM系统的关键特点及功能解析
Zoho CRM外汇系统提供全面客户管理,涵盖信息记录、交易历史等,提升个性化服务水平。系统界面直观易用,支持自定义,数据分析实时,助决策精准。具备高安全性,多系统整合能力强,自动化功能提高效率,支持多语言,适用于全球市场,配备专业客户支持与培训,助力外汇企业优化流程,增强客户满意度,在竞争中领先。
8 1
|
2天前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
10 0
|
2天前
|
设计模式 存储 算法
PHP中的设计模式:策略模式的深入解析与应用在软件开发的浩瀚海洋中,PHP以其独特的魅力和强大的功能吸引了无数开发者。作为一门历史悠久且广泛应用的编程语言,PHP不仅拥有丰富的内置函数和扩展库,还支持面向对象编程(OOP),为开发者提供了灵活而强大的工具集。在PHP的众多特性中,设计模式的应用尤为引人注目,它们如同精雕细琢的宝石,镶嵌在代码的肌理之中,让程序更加优雅、高效且易于维护。今天,我们就来深入探讨PHP中使用频率颇高的一种设计模式——策略模式。
本文旨在深入探讨PHP中的策略模式,从定义到实现,再到应用场景,全面剖析其在PHP编程中的应用价值。策略模式作为一种行为型设计模式,允许在运行时根据不同情况选择不同的算法或行为,极大地提高了代码的灵活性和可维护性。通过实例分析,本文将展示如何在PHP项目中有效利用策略模式来解决实际问题,并提升代码质量。
|
30天前
|
Rust JavaScript 前端开发
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
|
1月前
|
运维 Cloud Native JavaScript
云端新纪元:云原生技术深度解析深入理解Node.js事件循环及其在异步编程中的应用
【8月更文挑战第27天】随着云计算技术的飞速发展,云原生已成为推动现代软件开发和运维的关键力量。本文将深入探讨云原生的基本概念、核心价值及其在实际业务中的应用,帮助读者理解云原生如何重塑IT架构,提升企业的创新能力和市场竞争力。通过具体案例分析,我们将揭示云原生技术背后的哲学思想,以及它如何影响企业决策和操作模式。
|
28天前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
56 0
|
28天前
|
存储 开发者 C#
WPF与邮件发送:教你如何在Windows Presentation Foundation应用中无缝集成电子邮件功能——从界面设计到代码实现,全面解析邮件发送的每一个细节密武器!
【8月更文挑战第31天】本文探讨了如何在Windows Presentation Foundation(WPF)应用中集成电子邮件发送功能,详细介绍了从创建WPF项目到设计用户界面的全过程,并通过具体示例代码展示了如何使用`System.Net.Mail`命名空间中的`SmtpClient`和`MailMessage`类来实现邮件发送逻辑。文章还强调了安全性和错误处理的重要性,提供了实用的异常捕获代码片段,旨在帮助WPF开发者更好地掌握邮件发送技术,提升应用程序的功能性与用户体验。
33 0

推荐镜像

更多