> 웹 프론트엔드 > JS 튜토리얼 > 태그를 사용하여 URL 분석 URL example_javascript 기술을 자동으로 구문 분석합니다.

태그를 사용하여 URL 분석 URL example_javascript 기술을 자동으로 구문 분석합니다.

WBOY
풀어 주다: 2016-05-16 16:33:18
원래의
1526명이 탐색했습니다.

对于window.location,我们比较熟悉,它有protocol,hostname,host,port,search,hash,href,pathname等属性,a标签也和window.location一样,也有这样属性,这样可以方便我们分析网址,闲话少说,上代码。

function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':',''),
host: a.hostname,
port: a.port||'80',
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(/\/([^\/&#63;#]+)$/i) || [,''])[1],
hash: a.hash.replace('#',''),
path: a.pathname.replace(/^([^\/])/,'/$1'),
relative: (a.href.match(/tps&#63;:\/\/[^\/]+(.+)/) || [,''])[1],
segments: a.pathname.replace(/^\//,'').split('/')
};
}

로그인 후 복사

测试地址

console.log(parseURL("http://www.w3school.com.cn/jsref/dom_obj_anchor.asp?type=2#id2"));

结果如下

复制代码 代码如下:

{
file: "dom_obj_anchor.asp",
hash: "id2",
host: "www.w3school.com.cn",
params: {type: "2"},
path: "/jsref/dom_obj_anchor.asp",
port: "80",
protocol: "http",
query: "?type=2",
relative: "/jsref/dom_obj_anchor.asp?type=2#id2",
segments: [0: "jsref",1: "dom_obj_anchor.asp"],
source: http://www.w3school.com.cn/jsref/dom_obj_anchor.asp?type=2#id2
}

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿