前端常用的小函数(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 += `
  • ${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).

    你可能感兴趣的:(前端常用的小函数(1)---解析url)