前端常用的小函数(1)---解析url

godlong_X 发布于2019-08-02 11:12 / 2312人阅读

摘要：写作目的知识总结，结交一些前端的小伙伴。需求请求某些后端的接口，需要前端提供一些特定的请求参数。注意事项解析的是否为普通的有时候也会解析带的。

写作背景

</>复制代码 
算上实习时间，已经学习前端两年了。知识结构很乱，需要有一个网络化的总结。

写作目的

</>复制代码 
知识总结，结交一些前端的小伙伴。

需求：

</>复制代码 
请求某些后端的接口，需要前端提供一些特定的请求参数。

注意事项：

</>复制代码 
1.解析的是否为普通的url （有时候也会解析带hash的url）。
2.url 中是否有空格等字符串

知识罗列：

</>复制代码 
1.数组的扁平化处理
2.正则匹配
3.模板字符串拼接

</>复制代码 
$(function() {
  const $input = $(".input");
  const $queriesContainer = $(".queries-container");
  const testUrl = "url"; 
  const trimUrl = str => str.replace(/s+/g, "");
  const getUrlQueries = u => {
    // 去除url 中的空格
    const url = trimUrl(u);
    if (!(url && url.includes("?"))) return "";
    const startPoint = url.indexOf("?") + 1;
    // 注意React使用hash router
    const endPoint = url.indexOf("#") > -1 ? url.indexOf("#") : url.length + 1;
    const urlSegment = url.slice(startPoint, endPoint);
    return urlSegment.split("&").reduce((result, item) => {
      const tmp = item.split("=");
      result[tmp[0]] = tmp[1];
      return result;
    }, {});
  };
  const renderUrlQueries = queries =>
    Object.entries(queries).reduce((result, item, currentIndex) => {
      result += `
${currentIndex +
        1}.  ${
        item[0]
      } : ${item[1]}
`;      return result;
    }, "");
  const getRender = () => {
    const url = $input.val();
    const queries = getUrlQueries(url);
    $queriesContainer.html(renderUrlQueries(queries));
  };
  const init = () => {
    $input.val(testUrl);
    getRender();
  };
  init();
  $input.on("input", () => getRender());});

在线demo
不足：

</>复制代码 
1.场景考虑的不够充分。
2.没有完全使用ES6(indexOf->includes).

云服务器 GPU云服务器 url函数 url解析解析url 解析url域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52838.html

前端常用的小函数(1)---解析url

摘要：写作目的知识总结，结交一些前端的小伙伴。需求请求某些后端的接口，需要前端提供一些特定的请求参数。注意事项解析的是否为普通的有时候也会解析带的。写作背景算上实习时间，已经学习前端两年了。知识结构很乱，需要有一个网络化的总结。写作目的知识总结，结交一些前端的小伙伴。需求：请求某些后端的接口，需要前端提供一些特定的请求参数。注意事项： 1.解析的是否为普通的url （有时候也会...

shevy 2019-08-23 10:59 评论0 收藏0
微信小程序快速开发：从注册账号到小程序上架

摘要：写在前面自从微信小程序功能发布后，我就一直关注着小程序的动向，然而限于学业繁忙，总是没有太多的时间去学习。准备工作注册微信小程序账号点击传送门立马注册微信小程序账号。微信官方一般会在日之内完成审核，我新注册的小程序审核用了两天时间。写在前面自从微信小程序功能发布后，我就一直关注着小程序的动向，然而限于学业繁忙，总是没有太多的时间去学习。大二逐渐学习了Vuejs，被其简洁的设计所吸引...

CHENGKANG 2019-08-26 10:14 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
如果你在2018面试前端，那这篇文章最好看一看！

摘要：优点是继承了父类的模板，又继承了父类的原型对象，缺点就是父类实例传参，不是子类实例化传参，不符合常规语言的写法使用的方式继承了父类的模板，不继承了父类的原型对象。优点是方便了子类实例传参，缺点就是不继承了父类的原型对 github版本戳,求star,follow 前端目录 HTML相关 CSS相关 JAVASCRIPT相关 DOM相关 HTTP相关 VUE相关算法相关网络安全相关...

Guakin_Huang 2019-08-29 16:42 评论0 收藏0