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

寫做背景

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

寫做目的

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

需求：

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

注意事項：

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 += `<li class="list-query">${currentIndex +
        1}.&nbsp;&nbsp;<span class="key">${
        item[0]
      }</span> : <span class="value">${item[1]}</span></li>`;
      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).