如何使用正則表達式來分析通用的複雜網址？

Question

如何使用正則表達式來解析通用的複雜URL？

我想獲得信息形式的URL字符串，包括協議，主機名和路徑。

Answer 1

解析URL使用正則表達式

您可以解析URL/URI使用正則表達式。

例先進網址的樣子：

http://login:password@www.example.org:80/demo/example.cgi?lang=de&foo=bar&empty#position 

RegExr用於解析URL先進的是一樣的東西：

([^ :]*):\/\/(?:([^:]*):([^@]*)@|)([^/:]{1,}):?(\d*)?(\/[^? ]*)\??((?:[^=&# ]*=?[^&# ]*&?)*)#?([^ ]*)? 

是的，它是如此的瘋狂。但是，你可以從中獲得以下字段（組）：

#1 Protocol, #2 Login, #3 Password, #4 Host name, #5 Port, #6 Path, #7 Query, #8 Fragment 

比方說，你有一些網址，想知道只有一個主機名：

var myURL = "http://www.example.org/demo/example.cgi?lang=de&foo=bar&empty"; 
 

 
function getHostname(theURL) { 
 
    var Expr = /([^ :]*):\/\/(?:([^:]*):([^@]*)@|)([^/:]{1,}):?(\d*)?(\/[^? ]*)\??((?:[^=&# ]*=?[^&# ]*&?)*)#?([^ ]*)?/g, 
 
     match = Expr.exec(theURL); 
 
    if(match && match[0]) { 
 
     return match[4]; // #4th group of RegExpr 
 
    } 
 
} 
 

 
var myHostname = getHostname(myURL); 
 

 
console.log(myHostname);

我創建了一個不錯的表格，您可以在URL字符串的每個條目（組＃1）中找到RegExpr：

| URL entry name | Example    | Regular Expression    | 
| ----------------- | --------------------- | ------------------------------- | 
| Protocol   | http     | ([^ :]*):\/\/     | 
| Login    | admin     | \/\/([^:]*):[^@]*(?=@)   | 
| Password   | 12345     | \/\/[^:]*:([^@]*)(?=@)   | 
| Host name   | www.example.org  | (?:@|\/\/)([^/:]{1,})   | 
| Domain parts  | www, example, org  | (?:@|\/\/|\.)([^./:]*)(?=[./:]) | 
| Port    | 80     | :(\d*)\/[^/]     | 
| Path    | /demo/example.cgi  | \/\/([^/][^? ]*)\??    | 
| File name   | example.cgi   | ([^?/]*(?!\/))\?    | 
| Query string  | lang=de&foo=bar&empty | \?((?:[^=&# ]*=?[^&# ]*&?)*) | 
| Fragment/position | position    | #([^ ]*)      | 

此外，還可以使用([^=&# ]*)=?([^&# ]*)&?和迭代匹配解析查詢字符串：

var myQueryString = "lang=de&foo=bar&empty"; 
 

 
function parseQueryString(theQueryString) { 
 
    var Expr = /([^=&# ]*)=?([^&# ]*)&?/g, 
 
     QueryEntries = {}, 
 
     match; 
 
    
 
    // If no match left it returns ["", undefinied, undefinied], 
 
    // ["", "", ""] or null - depends on JavaScript engine/web browser. 
 
    // There is litte trick: "" and null is like false, so only check for [""]. 
 
    while((match = Expr.exec(theQueryString)) && match[0]) { 
 
     QueryEntries[match[1]] = match[2] || ''; 
 
    } 
 
    return QueryEntries; 
 
} 
 

 
var myQueryEntries = parseQueryString(myQueryString); 
 

 
console.log(myQueryEntries);

您可以在http://regexr.com/很方便地測試RegExpr。

Answer 2

請勿使用正則表達式。使用URL解析器。

function parseURL(url) { 
 
    var a = document.createElement('a'); 
 
    a.href = url; 
 
    return a; 
 
} 
 
var urlData = parseURL('https://username:password@sub.example.com:123/foo/bar?a=b#c'); 
 
console.log(urlData.protocol); // https: 
 
console.log(urlData.username); // username 
 
console.log(urlData.password); // password 
 
console.log(urlData.host);  // sub.example.com:123 
 
console.log(urlData.hostname); // sub.example.com 
 
console.log(urlData.port);  // 123 
 
console.log(urlData.pathname); // /foo/bar 
 
console.log(urlData.search); // ?a=b 
 
console.log(urlData.hash);  // #c 
 
console.log(urlData.origin); // https://sub.example.com:123 
 
console.log(urlData.href);  // https://username:password@sub.example.com:123/foo/bar?a=b#c

也有URL interface。瀏覽器支持較少，但在語義上它可能比DOM元素更好。

var urlData = new URL('https://username:password@sub.example.com:123/foo/bar?a=b#c'); 
 
console.log(urlData.protocol); // https: 
 
console.log(urlData.username); // username 
 
console.log(urlData.password); // password 
 
console.log(urlData.host);  // sub.example.com:123 
 
console.log(urlData.hostname); // sub.example.com 
 
console.log(urlData.port);  // 123 
 
console.log(urlData.pathname); // /foo/bar 
 
console.log(urlData.search); // ?a=b 
 
console.log(urlData.hash);  // #c 
 
console.log(urlData.origin); // https://sub.example.com:123 
 
console.log(urlData.href);  // https://username:password@sub.example.com:123/foo/bar?a=b#c