[javascript] 자바 스크립트에서 URL을 호스트 이름과 경로로 구문 분석하는 방법은 무엇입니까?
나는 끈을 가지고 싶습니다
var a = "http://example.com/aa/bb/"
그것을 객체로 처리하여
a.hostname == "example.com"
과
a.pathname == "/aa/bb"
답변
현대적인 방법 :
new URL("http://example.com/aa/bb/")
속성 hostname
과 pathname
함께 몇 가지 다른 객체를 반환합니다 .
첫 번째 인수는 상대 또는 절대 URL입니다. 상대적인 경우 두 번째 인수 (기본 URL)를 지정해야합니다. 예를 들어, 현재 페이지와 관련된 URL의 경우 :
new URL("/aa/bb/", location)
브라우저 외에도이 API는 v7부터 Node.js에서도 사용할 수 있습니다require('url').URL
.
답변
var getLocation = function(href) {
var l = document.createElement("a");
l.href = href;
return l;
};
var l = getLocation("http://example.com/path");
console.debug(l.hostname)
>> "example.com"
console.debug(l.pathname)
>> "/path"
답변
여기에서 찾을 수 있습니다 : https://gist.github.com/jlong/2428561
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";
parser.protocol; // => "http:"
parser.host; // => "example.com:3000"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.hash; // => "#hash"
parser.search; // => "?search=test"
parser.origin; // => "http://example.com:3000"
답변
다음은 정규 표현식을 사용하는 간단한 함수입니다. a
태그 동작 입니다.
찬성
- 예측 가능한 동작 (크로스 브라우저 문제 없음)
- DOM이 필요하지 않습니다
- 정말 짧습니다.
단점
- 정규 표현식은 읽기가 약간 어렵습니다.
–
function getLocation(href) {
var match = href.match(/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);
return match && {
href: href,
protocol: match[1],
host: match[2],
hostname: match[3],
port: match[4],
pathname: match[5],
search: match[6],
hash: match[7]
}
}
–
getLocation("http://example.com/");
/*
{
"protocol": "http:",
"host": "example.com",
"hostname": "example.com",
"port": undefined,
"pathname": "/"
"search": "",
"hash": "",
}
*/
getLocation("http://example.com:3000/pathname/?search=test#hash");
/*
{
"protocol": "http:",
"host": "example.com:3000",
"hostname": "example.com",
"port": "3000",
"pathname": "/pathname/",
"search": "?search=test",
"hash": "#hash"
}
*/
편집하다:
다음은 정규식에 대한 분석입니다.
var reURLInformation = new RegExp([
'^(https?:)//', // protocol
'(([^:/?#]*)(?::([0-9]+))?)', // host (hostname and port)
'(/{0,1}[^?#]*)', // pathname
'(\\?[^#]*|)', // search
'(#.*|)$' // hash
].join(''));
var match = href.match(reURLInformation);
답변
var loc = window.location; // => "http://example.com:3000/pathname/?search=test#hash"
currentUrl을 반환합니다.
자신의 문자열을 URL로 전달하려면 ( IE11에서는 작동하지 않음 ) :
var loc = new URL("http://example.com:3000/pathname/?search=test#hash")
그런 다음 다음과 같이 구문 분석 할 수 있습니다.
loc.protocol; // => "http:"
loc.host; // => "example.com:3000"
loc.hostname; // => "example.com"
loc.port; // => "3000"
loc.pathname; // => "/pathname/"
loc.hash; // => "#hash"
loc.search; // => "?search=test"
답변
freddiefujiwara의 답변은 꽤 좋지만 Internet Explorer 내에서 상대 URL을 지원해야했습니다. 나는 다음 해결책을 생각해 냈다.
function getLocation(href) {
var location = document.createElement("a");
location.href = href;
// IE doesn't populate all link properties when setting .href with a relative URL,
// however .href will return an absolute URL which then can be used on itself
// to populate these additional fields.
if (location.host == "") {
location.href = location.href;
}
return location;
};
이제 필요한 속성을 얻으려면 이것을 사용하십시오.
var a = getLocation('http://example.com/aa/bb/');
document.write(a.hostname);
document.write(a.pathname);
JSFiddle 예 : http://jsfiddle.net/6AEAB/
답변
js-uri (Google 코드에서 사용 가능)는 문자열 URL을 가져 와서 URI 객체를 확인합니다.
var some_uri = new URI("http://www.example.com/foo/bar");
alert(some_uri.authority); // www.example.com
alert(some_uri); // http://www.example.com/foo/bar
var blah = new URI("blah");
var blah_full = blah.resolve(some_uri);
alert(blah_full); // http://www.example.com/foo/blah