js如何實現匹配網址url的正則表達式

這篇文章主要為大家展示了“js如何實現匹配網址url的正則表達式”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“js如何實現匹配網址url的正則表達式”這篇文章吧。

DNS規定，域名中的標號都由英文字母和數字組成，每一個標號不超過63個字符，也不區分大小寫字母。標號中除連字符（-）外不能使用其他的標點符號。級別最低的域名寫在最左邊，而級別最高的域名寫在最右邊。由多個標號組成的完整域名總共不超過255個字符。所以驗證則網址url的正則可以如下幾種

方法一：

function checkUrl(urlString){
if(urlString!=""){
var reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
if(!reg.test(urlString)){
alert("不是正確的網址吧，請注意檢查一下");
						}
					}
}

方法二：推薦

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); 
  }
 }
var testUrl;
testUrl="http://harveyzeng.iteye.com/blog/1776991";
//var testUrl="https://www.jb51.net/article/1.htm";
alert(IsURL(testUrl));

剛發現一個不錯的多功能測試函數的代碼：

<script>
/**
 * 正則表達式判斷網址是否有效
 */
 
(function(){
  "use strict";
 
  var urlDict=[
    //Bad Case
    'www.baidu.com',           //常規網址，未帶協議頭的地址
    'w.baidu.com',            //常規網址，短子域名
    'baidu.com',             //常規網址，僅有主域名
    '測試.com',              //非常規合法網址，中文域名不在參考之列
    '1.2',                //錯誤域名
    ' WWWW ',              //無效字符串
    '111測試',              //無效字符串
    //Correct Case
    'http://baidu.com',          //常規網址，僅有主域名
    'http://www.baidu.com',        //常規網址，帶子域名
    'https://www.baidu.com/',       //常規網址，使用https協議頭，帶根目錄
    'http://www.baidu.com/api',      //常規網址，有一級目錄下資源
    'http://www.subdomain.baidu.com/index/subdir',   //常規網址，多級子域名，多級目錄
    'http://www.www.subdomain.baidu.com/index/subdir/',//常規網址，多級子域名，多級目錄，目錄地址閉合
    'http://io.io'            //非常規網址，多級子域名，多級目錄，目錄地址閉合
  ];
 
  // 建議的正則
  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>

運行以后通過chorme的F12查看效果

上面介紹的主要是js函數的寫法與判斷方法，下面是小編整理的一些關于驗證網址的正則表達式大家可以參考一下

以上是“js如何實現匹配網址url的正則表達式”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！