JavaScript에서 URL의 호스트 이름 부분을 추출하는 방법

전체 URL에서 시작하는 정말 쉬운 방법이 있습니까?

document.location.href = "http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah"

그리고 호스트 부분 만 추출하십시오.

aaa.bbb.ccc.com

이것을 안정적으로 수행하는 JavaScript 함수가 있어야하지만 찾을 수는 없습니다.

이 주소를 가진 페이지가 있다고 가정하십시오 http://sub.domain.com/virtualPath/page.htm. 이러한 결과를 얻으려면 페이지 코드에서 다음을 사용하십시오.

• window.location.host: 당신은 얻을 것이다 sub.domain.com:8080또는sub.domain.com:80
• window.location.hostname : 당신은 얻을 것이다 sub.domain.com
• window.location.protocol : 당신은 얻을 것이다 http:
• window.location.port: 당신은 얻을 것이다 8080또는80
• window.location.pathname : 당신은 얻을 것이다 /virtualPath
• window.location.origin: 당신은 얻을 것이다 http://sub.domain.com*****

업데이트 : .origin 정보

***** 심판이 말했듯이 브라우저 호환성 window.location.origin은 명확하지 않습니다. 크롬으로 http://sub.domain.com:port확인했으며 포트가 80 이외 http://sub.domain.com의 포트이고 포트가 80이면 반환되었습니다.

저에게 언급 해 주신 @torazaburo에게 감사드립니다.

위치 프로토콜과 호스트를 연결할 수 있습니다.

var root = location.protocol + '//' + location.host;

URL의 경우을 'http://stackoverflow.com/questions'반환합니다.'http://stackoverflow.com'

사용 document.location목적과 그 host또는 hostname속성.

alert(document.location.hostname); // alerts "stackoverflow.com"

현재 페이지 URL뿐만 아니라 임의의 URL로 작업 할 수 있기를 원했기 때문에 수락 된 답변이 효과가 없었습니다.

URL객체를 살펴보십시오 .

var url = new URL("http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah");
url.protocol;  // "http:"
url.hostname;  // "aaa.bbb.ccc.com"
url.pathname;  // "/asdf/asdf/sadf.aspx"
url.search;    // "?blah"

두 가지 방법이 있습니다. 첫 번째는 다른 답변의 변형이지만 기본 포트가 아닌 포트를 설명합니다.

function getRootUrl() {
  var defaultPorts = {"http:":80,"https:":443};

  return window.location.protocol + "//" + window.location.hostname
   + (((window.location.port)
    && (window.location.port != defaultPorts[window.location.protocol]))
    ? (":"+window.location.port) : "");
}

그러나이 간단한 방법을 선호합니다 (URI 문자열과 함께 작동).

function getRootUrl(url) {
  return url.toString().replace(/^(.*\/\/[^\/?#]*).*$/,"$1");
}

사용하다

window.location.origin

" http://aaa.bbb.ccc.ddd.com/sadf.aspx?blah "

당신은 얻을 것이다 : http://aaa.bbb.ccc.ddd.com/

시험

document.location.host

또는

document.location.hostname

내가 사용하는 또 다른 해킹이 있으며 StackOverflow 응답에서 본 적이 없습니다. 이미지의 "src"속성을 사용하면 사이트의 전체 기본 경로가 생성됩니다. 예를 들면 :

var dummy = new Image;
dummy.src = '$';                  // using '' will fail on some browsers
var root = dummy.src.slice(0,-1); // remove trailing '$'

URL에처럼 http://domain.com/somesite/index.html, root설정됩니다http://domain.com/somesite/ . 이것은 localhost 또는 유효한 기본 URL에서도 작동합니다.

이로 인해 HTTP 요청이 실패합니다. $ 더미 이미지 합니다. 약간의 코드 변경만으로 기존 이미지를 대신 사용하여이를 피할 수 있습니다.

또 다른 변형은 HTTP 요청에 부작용없이 더미 링크를 사용합니다.

var dummy = document.createElement ('a');
dummy.href = '';
var root = dummy.href;

그러나 모든 브라우저에서 테스트하지는 않았습니다.

이것을 확인하십시오 :

alert(window.location.hostname);

이것은 호스트 이름을 다음과 같이 반환합니다 www.domain.com

과:

window.location.host

포트와 같은 도메인 이름을 반환합니다 www.example.com:80

전체 참조는 Mozilla 개발자 사이트를 확인 하십시오.

무언가를 지정하고 싶습니다. 누군가 내가 필요로하는 경로로 전체 URL을 얻으려면 다음을 사용할 수 있습니다.

var fullUrl = window.location.protocol + "//" + window.location.hostname + window.location.pathname;

나는 이것이 조금 늦다는 것을 알고 있지만 작은 ES6 구문으로 깨끗한 작은 기능을 만들었습니다.

function getHost(href){
  return Object.assign(document.createElement('a'), { href }).host;
}

ES5에서 다음과 같이 쓸 수도 있습니다.

function getHost(href){
  return Object.assign(document.createElement('a'), { href: href }).host;
}

물론 IE는을 지원하지 Object.assign않지만 내 작업 라인에서는 중요하지 않습니다.

정규식은 훨씬 더 많은 유연성을 제공합니다.

    //document.location.href = "http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah
    //1.
     var r = new RegExp(/http:\/\/[^/]+/);
     var match = r.exec(document.location.href) //gives http://aaa.bbb.ccc.com

    //2. 
     var r = new RegExp(/http:\/\/[^/]+\/[^/]+/);
     var match = r.exec(document.location.href) //gives http://aaa.bbb.ccc.com/asdf