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

简介: 我们在日常开发中经常会遇到要对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 页面返回传值


目录
相关文章
|
并行计算 Java 数据处理
SpringBoot高级并发实践:自定义线程池与@Async异步调用深度解析
SpringBoot高级并发实践:自定义线程池与@Async异步调用深度解析
1059 0
|
10月前
|
数据采集 人工智能 Java
1天消化完Spring全家桶文档!DevDocs:一键深度解析开发文档,自动发现子URL并建立图谱
DevDocs是一款基于智能爬虫技术的开源工具,支持1-5层深度网站结构解析,能将技术文档处理时间从数周缩短至几小时,并提供Markdown/JSON格式输出与AI工具无缝集成。
474 1
1天消化完Spring全家桶文档!DevDocs:一键深度解析开发文档,自动发现子URL并建立图谱
|
4月前
|
JSON Java Go
【GoGin】(2)数据解析和绑定:结构体分析,包括JSON解析、form解析、URL解析,区分绑定的Bind方法
bind或bindXXX函数(后文中我们统一都叫bind函数)的作用就是将,以方便后续业务逻辑的处理。
344 3
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
1208 2
|
11月前
|
Web App开发 移动开发 前端开发
React音频播放器样式自定义全解析:从入门到避坑指南
在React中使用HTML5原生&lt;audio&gt;标签时,开发者常面临视觉一致性缺失、样式定制局限和交互体验割裂等问题。通过隐藏原生控件并构建自定义UI层,可以实现完全可控的播放器视觉风格,避免状态不同步等典型问题。结合事件监听、进度条拖拽、浏览器兼容性处理及性能优化技巧,可构建高性能、可维护的音频组件,满足跨平台需求。建议优先使用成熟音频库(如react-player),仅在深度定制需求时采用原生方案。
485 12
|
设计模式 XML Java
【23种设计模式·全精解析 | 自定义Spring框架篇】Spring核心源码分析+自定义Spring的IOC功能,依赖注入功能
本文详细介绍了Spring框架的核心功能,并通过手写自定义Spring框架的方式,深入理解了Spring的IOC(控制反转)和DI(依赖注入)功能,并且学会实际运用设计模式到真实开发中。
【23种设计模式·全精解析 | 自定义Spring框架篇】Spring核心源码分析+自定义Spring的IOC功能,依赖注入功能
|
JSON 自然语言处理 Java
OpenAI API深度解析:参数、Token、计费与多种调用方式
随着人工智能技术的飞速发展,OpenAI API已成为许多开发者和企业的得力助手。本文将深入探讨OpenAI API的参数、Token、计费方式,以及如何通过Rest API(以Postman为例)、Java API调用、工具调用等方式实现与OpenAI的交互,并特别关注调用具有视觉功能的GPT-4o使用本地图片的功能。此外,本文还将介绍JSON模式、可重现输出的seed机制、使用代码统计Token数量、开发控制台循环聊天,以及基于最大Token数量的消息列表限制和会话长度管理的控制台循环聊天。
4194 7
|
JavaScript 前端开发 索引
JavaScript获取url网址中域名后面的部分
如何截取 url 中网站域名之后的部分,需要用到以下几个方法:
375 3
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手

热门文章

最新文章

推荐镜像

更多
  • DNS