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

godlong_X 發布于2019-08-02 11:12 / 2285人閱讀

摘要：寫作目的知識總結，結交一些前端的小伙伴。需求請求某些后端的接口，需要前端提供一些特定的請求參數。注意事項解析的是否為普通的有時候也會解析帶的。

寫作背景

算上實習時間，已經學習前端兩年了。知識結構很亂，需要有一個網絡化的總結。

寫作目的

知識總結，結交一些前端的小伙伴。

需求：

請求某些后端的接口，需要前端提供一些特定的請求參數。

注意事項：

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域名

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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