脚本宝典收集整理的这篇文章主要介绍了前端常用的小函数(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}. <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).
以上是脚本宝典为你收集整理的前端常用的小函数(1)---解析url全部内容，希望文章能够帮你解决前端常用的小函数(1)---解析url所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。