[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