锐客网

  1. 首页 > it技术 > >

前端URL检测小结

近期多次遇到检测URL是否合法问题，每次都一通百度谷歌，重复劳动。所以，把相关问题总结如下。
URL合法性 前端URL检测小结
文章图片
来源于 维基百科 包含的合法字符 URL 的合法字符包括 0-9、A-Z、a-z 和特殊字符：$-_.,+!*’()#%
JavaScript检测实现 有bug，待完善
【前端URL检测小结】对于支持URL()对象的浏览器

function validateUrl(url) { var isUrl = false; try { var url = new URL(url); isUrl = true; } catch(e) { isUrl = false; } return isUrl; }

对于不支持URL()对象的浏览器
  • 使用polyfill: polyfill.js - URL，然后调用以上方法
  • 使用正则匹配。没有找到完美匹配的正则表达式，简单的如下：
function validateUrl(url) { return /^((https|http|ftp|rtsp|mms)?:\/\/)?[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=?%\-&_~`@[\]':+!]*([^<>"])*$/.test(url); }

小结 由于URL组成的复杂性，很难找到一个可以检测所有URL合法性的正则。所以，在使用URL的具体场景中，最好给定一个合法格式范围，范围外则判定为不合法。
参考
  • 维基百科：统一资源标志符
  • MDN - URL()
  • whatwg： URL - Living Standard
  • segmentfault: 求一个验证url合法性的正则，网上找了很多都有漏洞

    推荐阅读


    上一篇：你身上有8个“养生窝”，按一按更长寿！

    下一篇：【藏地·爱人】