• URL中的参数提取


    前言:

    平时往往会有一些需求,要我们拿到 url 里的参数,传给后端做处理 或者 别的一些操作,那么就涉及到对 url 字符串进行各种操作,恰好我刷题碰到一个类似的题目描述 ,本篇文章主要介绍简单的方式 获取 url 中的参数。

    题目描述


     操作步骤

    操作 指定的 url 

    新建对象存储后面的操作结果

      var Params = new Object()

     找到 url 中 ‘?’ 的索引

     var index = url.indexOf('?')

     提取 ‘?’ 之后的全部字符串

     var strs = url.slice(index+1)

    把各个 参数 分离,变成数组

     var str = strs.split('&')

    循环 分离 每个参数 的 键与值

    1. for(let i = 0; i < str.length; i++) {
    2. Params[str[i].split("=")[0]]=str[i].split("=")[1];
    3. }

    完整代码

    代码中 的打印 语句 是我测试每个操作的结果 ,这个可以删除

    1. <script>
    2. const _getParams = (url) => {
    3. // 补全代码
    4. var Params = new Object()
    5. // 找到 url 中 ‘?’ 的索引
    6. var index = url.indexOf('?')
    7. console.log(index)
    8. // 提取 ‘?’ 之后的参数
    9. var strs = url.slice(index+1)
    10. console.log(strs)
    11. // 把各个 参数 分离,变成数组
    12. var str = strs.split('&')
    13. console.log(str)
    14. // 循环 分离 每个参数 的 键值
    15. for(let i = 0; i < str.length; i++) {
    16. // Params[str[i].split("=")[0]]=unescape(str[i].split("=")[1]);
    17. Params[str[i].split("=")[0]]=str[i].split("=")[1];
    18. }
    19. console.log(Params)
    20. }
    21. _getParams('https://nowcoder.com/online?id=1&salas=1000')
    22. </script>

    操作当前页面的 URL 

    这个就是靠  location.search 直接快速 提取到  ‘ ?’  即后面 的代码 ,其他步骤都一样

     window.location打印结果


    location.search 

     完整代码

    1. getRequest = function() {
    2. var Params = new Object()
    3. // 获取 url 路径 '?' 以及后面的全部参数
    4. var url = location.search;
    5. // 去掉 ‘?’ ,拿到参数
    6. let strs = url.substr(1);
    7. // 使用 split 让不同参数分离 ,strs 是数组形式
    8. let str = strs.split("&");
    9. for(let i = 0; i < str.length; i++) {
    10. Params[str[i].split("=")[0]]=str[i].split("=")[1];
    11. }
    12. return Params
    13. },

    文章如有错误,恳请大家提出问题,本人不胜感激 。 不懂的地方可以评论,我都会一一回复

    文章对大家有帮助的话,希望大家能动手点赞鼓励,大家未来一起努力     长路漫漫,道阻且长  

  • 相关阅读:
    ElasticSearch集群搭建及启动异常的问题
    第2周学习:卷积神经网络基础
    UE5的引擎初始化流程
    在一台Ubuntu服务器中部署Ceph分布式存储
    掌握这些技巧,让Excel批量数据清洗变得简单高效!
    为什么要分库分表?
    Geotrust的SSL证书有哪些特点?
    【吴恩达机器学习笔记】九、机器学习系统的设计
    vue-router导入视图文件方式与打包参数的差异
    Vue生成多文件pdf准考证
  • 原文地址:https://blog.csdn.net/qq_52855464/article/details/125486429