js正則表達(dá)式如何驗證URL函數(shù)

這篇文章主要為大家展示了“js正則表達(dá)式如何驗證URL函數(shù)”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js正則表達(dá)式如何驗證URL函數(shù)”這篇文章吧。

核心代碼

<script>
/**
 * 正則表達(dá)式判斷網(wǎng)址是否有效
 */
 
(function(){
  "use strict";
 
  var urlDict=[
    //Bad Case
    'www.baidu.com',           //常規(guī)網(wǎng)址，未帶協(xié)議頭的地址
    'w.baidu.com',            //常規(guī)網(wǎng)址，短子域名
    'baidu.com',             //常規(guī)網(wǎng)址，僅有主域名
    '測試.com',              //非常規(guī)合法網(wǎng)址，中文域名不在參考之列
    '1.2',                //錯誤域名
    ' WWWW ',              //無效字符串
    '111測試',              //無效字符串
    //Correct Case
    'http://baidu.com',          //常規(guī)網(wǎng)址，僅有主域名
    'http://www.baidu.com',        //常規(guī)網(wǎng)址，帶子域名
    'https://www.baidu.com/',       //常規(guī)網(wǎng)址，使用https協(xié)議頭，帶根目錄
    'http://www.baidu.com/api',      //常規(guī)網(wǎng)址，有一級目錄下資源
    'http://www.subdomain.baidu.com/index/subdir',   //常規(guī)網(wǎng)址，多級子域名，多級目錄
    'http://www.www.subdomain.baidu.com/index/subdir/',//常規(guī)網(wǎng)址，多級子域名，多級目錄，目錄地址閉合
    'http://io.io'            //非常規(guī)網(wǎng)址，多級子域名，多級目錄，目錄地址閉合
  ];
 
  // 建議的正則
  function isURL(str){
    return !!str.match(/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g);
  }
 
  // 不知道誰寫的簡單版的坑爹正則
  function badRegFn(str){
    return !!str.match(/(http[s]?|ftp):\/\/[^\/\.]+?\..+\w$/g);
  }
	//jb51
	function IsURL(str_url){
   var strRegex = "^((https|http|ftp|rtsp|mms)?://)" 
   + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" //ftp的user@ 
      + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184 
      + "|" // 允許IP和DOMAIN（域名）
      + "([0-9a-z_!~*'()-]+\.)*" // 域名- www. 
      + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二級域名 
      + "[a-z]{2,6})" // first level domain- .com or .museum 
      + "(:[0-9]{1,4})?" // 端口- :80 
      + "((/?)|" // a slash isn't required if there is no file name 
      + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$"; 
      var re=new RegExp(strRegex); 
   //re.test()
      if (re.test(str_url)){
        return (true); 
      }else{ 
        return (false); 
      }
    }
 
 
  // 測試用例覆蓋
  (function(){
    var ret={}; 
    var collect=function(link){
      var obj={},fnList=[isURL,badRegFn,IsURL];
      for(var i=0,j=fnList.length;i<j;i++){
        var fn=fnList[i];
        obj[fn.name]=fn.call(null,link);
      }
      return obj;
    };
 
    for(var i=0,j=urlDict.length;i<j;i++){
      ret[urlDict[i]]=collect(urlDict[i]);
    }
 
    console.log(ret),console.table(ret);
  }());
 
}());
</script>

調(diào)試方法：

將上面的代碼保存為test.htm在chrome中運(yùn)行，打開F12，即可看到效果如下圖所示

以上是“js正則表達(dá)式如何驗證URL函數(shù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！