A very comprehensive javascript URL resolution function and segmentation URL resolution method

  • 2020-03-30 02:35:29
  • OfStack

I. URL resolution function


<script>  
/** 
*@param {string} url  The complete URL address  
*@returns {object}  Custom objects  
*@description  Usage examples: var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top'); 
myURL.file='index.html' 

myURL.hash= 'top' 

myURL.host= 'abc.com' 

myURL.query= '?id=255&m=hello' 

myURL.params= Object = { id: 255, m: hello } 

myURL.path= '/dir/index.html' 

myURL.segments= Array = ['dir', 'index.html'] 

myURL.port= '8080' 

myURL.protocol= 'http' 

myURL.source= 'http://abc.com:8080/dir/index.html?id=255&m=hello#top' 

*/  
function parseURL(url) {  
 var a =  document.createElement('a');  
 a.href = url;  
 return {  
 source: url,  
 protocol: a.protocol.replace(':',''),  
 host: a.hostname,  
 port: a.port,  
 query: a.search,  
 params: (function(){  
     var ret = {},  
         seg = a.search.replace(/^?/,'').split('&'),  
         len = seg.length, i = 0, s;  
     for (;i<len;i++) {  
         if (!seg[i]) { continue; }  
         s = seg[i].split('=');  
         ret[s[0]] = s[1];  
     }  
     return ret;  
 })(),  
 file: (a.pathname.match(//([^/?#]+)$/i) || [,''])[1],  
 hash: a.hash.replace('#',''),  
 path: a.pathname.replace(/^([^/])/,'/$1'),  
 relative: (a.href.match(/tps?://[^/]+(.+)/) || [,''])[1],  
 segments: a.pathname.replace(/^//,'').split('/')  
 };  
}    

//var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');  
var myURL = parseURL('http://localhost:8080/test/mytest/toLogina.ction?m=123&pid=abc');  
alert(myURL.path);  
alert(myURL.params.m);  
alert(myURL.params.pid);  
</script>

Second, JS section URL resolution

URL: Uniform Resource Locator (URL)
The complete URL consists of these parts: scheme://host:port/path? Query# fragments


scheme  =  Communication protocol  ( The commonly used http,ftp,maito Etc. )
host =  The host  ( Domain name or IP)
port =  The port number 
path =  The path 
query =  Query (optional, used for dynamic web pages (such as using CGI , ISAPI , PHP/JSP/ASP/ASP.NET And other technologies) to pass parameters, can have multiple parameters, with the" & "Symbol separated, the name and value of each parameter by" = "Separated by symbols. 
fragment =  A fragment of information (a string used to specify a fragment in a network resource. For example, a web page with more than one noun can be used fragment Locate the explanation directly to a noun. ( Also known as anchor points .) ) 

For a URL like this
/ / www.jb51.net:80/seo/? Ver = 1.0 & id = 6 # imhere

We can use javascript to get the various parts of it
1, the window. The location. The href
The entire URl string (which in the browser is the entire address bar)

2, the window. The location. The protocol
The protocol part of the URL
Return value: HTTP:

3, the window. The location. The host
The host part of the URL
This example returns the value :www.jb51.net

4, the window. The location. The port
The port part of the URL
If the default port 80 is used (update: even if :80 is added), the return value is not the default 80 but a null character
Return value of this example: ""

5, the window. The location. The pathname
The path part of the URL (that is, the file address)
Return value :/seo/

6, the window. The location. The search
Query (parameter) section
In addition to assigning values to dynamic languages, we can also assign static pages and use javascript to get the values of the parameters we believe to be appropriate
Return value :? Ver = 1.0 & id = 6

7, the window. The location. The hash
The anchor
This example returns a value :#imhere


Related articles: