前端常用小功能（一）---解析url

写作背景算上实习时间，学前端两年了。知识结构很乱，需要网络化总结。写作目的知识总结，结交一些前端朋友。需求：请求一些后端接口，前端需要提供一些具体的请求参数。注意事项：1.解析出来的是否是普通的url（有时候带hash的url也会被解析）。2、url等字符串知识列表是否有空格：1、数组的扁平化2、正则匹配3、模板字符串拼接$(function(){const$input=$(".input");const$queriesContainer=$(".queries-container");consttestUrl="url";consttrimUrl=str=>str.replace(/\s+/g,"");constgetUrlQueries=u=>{//删除url空格inconsturl=trimUrl(u);if(!(url&&url.includes("?")))return"";conststartPoint=url.indexOf("?")+1;//注意React使用哈希路由器constendPoint=url.indexOf("#")>-1?url.indexOf("#"):url.length+1;consturlSegment=url.slice(startPoint,endPoint);返回urlSegment.split("&").reduce((result,item)=>{consttmp=item.split("=");result[tmp[0]]=tmp[1];returnresult;},{});};constrenderUrlQueries=queries=>Object.entries(queries).reduce((result,item,currentIndex)=>{result+=`${currentIndex+1}。${项目[0]:${item[1]}`;返回结果；},"");constgetRender=()=>{consturl=$input.val();constqueries=getUrlQueries(url);$queriesContainer.html(renderUrlQueries(queries));};constinit=()=>{$input.val(testUrl);得到渲染器（）；};在里面（）;$input.on("输入",()=>getRender());});在线demo不足：1.场景考虑不够2.ES6没有完全使用（indexOf->includes）。