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

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

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

写作背景

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

写作目的

知识总结，结交一些前端的小伙伴。

需求：

请求某些后端的接口，需要前端提供一些特定的请求参数。

注意事项：

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).

混合云超融合服务器 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
一丢丢前端常用的小技巧

摘要：获取节点只能运用到上返回找到的元素节点速度是最快的能运用到所有元素节点上返回一个类数组的集合同上能运用到所有元素节点上返回第一个匹配的元素参数是标准的选择器能运用到所有元素节点上返回一个类数组的集合参数是标准的选择器操作获取或设置元素的返回获取DOM节点: document.getElementById(): 只能运用到document上, 返回找到的元素节点, 速度是最快的; d...

missonce 2019-08-21 13:32 评论0 收藏0