• 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. },

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

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

  • 相关阅读:
    四轴飞控DIY Mark4 - 整理&参数优化
    Java项目防止SQL注入的四种方案
    【Redis入门笔记 09】缓存穿透、击穿与雪崩
    LabVIEW应用开发——控件的使用(二)
    拼凑硬币问题
    混合与剔除
    猿创征文|HCIE-Security Day60:邮件过滤技术
    LDMOS与VDMOS概述
    123页6万字XX市新型智慧城市顶层设计方案
    达梦数据库,数据库重置主键id从1开始
  • 原文地址:https://blog.csdn.net/qq_52855464/article/details/125486429