Home > Web Front-end > JS Tutorial > body text

A very comprehensive javascript URL parsing function and segmented URL parsing method_javascript skills

WBOY
Release: 2016-05-16 16:52:39
Original
1174 people have browsed it

一、URL解析函数

复制代码 代码如下:

<script>  <br>/**<br>*@param {string} url Complete URL address <br>*@returns {object} Custom object <br>*@description Usage example: var myURL = parseURL('http://abc.com: 8080/dir/index.html?id=255&m=hello#top'); <p>myURL.file='index.html' <br><br>myURL.hash= 'top' <br><br>myURL.host= 'abc.com' <br><br>myURL.query= '?id=255&m=hello' <br><br>myURL.params= Object = { id: 255, m: hello } <br><br>myURL.path= '/dir/index.html' <br> <br>myURL.segments= Array = ['dir', 'index.html'] <br><br>myURL.port= '8080' <br><br>myURL.protocol= 'http' <br><br>myURL.source= 'http://abc.com:8080/dir/index.html?id=255&m=hello#top' <br><br>*/  <br>function parseURL(url) {  <br> var a =  document.createElement('a');  <br> a.href = url;  <br> return {  <br> source: url,  <br> protocol: a.protocol.replace(':',''),  <br> host: a.hostname,  <br> port: a.port,  <br> query: a.search,  <br> params: (function(){  <br>     var ret = {},  <br>         seg = a.search.replace(/^?/,'').split('&'),  <br>         len = seg.length, i = 0, s;  <br>     for (;i<len;i ) {  <BR>         if (!seg[i]) { continue; }  <BR>         s = seg[i].split('=');  <BR>         ret[s[0]] = s[1];  <BR>     }  <BR>     return ret;  <BR> })(),  <BR> file: (a.pathname.match(//([^/?#] )$/i) || [,''])[1],  <BR> hash: a.hash.replace('#',''),  <BR> path: a.pathname.replace(/^([^/])/,'/$1'),  <BR> relative: (a.href.match(/tps?://[^/] (. )/) || [,''])[1],  <BR> segments: a.pathname.replace(/^//,'').split('/')  <BR> };  <BR>}    <br><br>//var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');  <BR>var myURL = parseURL('http://localhost:8080/test/mytest/toLogina.ction?m=123&pid=abc');  <BR>alert(myURL.path);  <BR>alert(myURL.params.m);  <BR>alert(myURL.params.pid);  <BR></script>

二、JS分段URL解析

URL : 统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成:scheme://host:port/path?query#fragment

复制代码 代码如下:

scheme  = 通信协议 (常用的http,ftp,maito等)
host = 主机 (域名或IP)
port = 端口号
path = 路径
query = 查询(可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数,用”&”符号隔开,每个参数的名和值用”=”符号隔开。)
fragment = 信息片断(字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。(也称为锚点.))

对于这样一个URL
http://www.jb51.net:80/seo/?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)

2,window.location.protocol
URL 的协议部分
本例返回值:http:

3,window.location.host
URL 的主机部分
本例返回值:www.jb51.net

4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符
本例返回值:”"

5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/seo/

6,window.location.search
查询(参数)部分
除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6

7,window.location.hash
锚点
本例返回值:#imhere

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template