source

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

gigabyte 2022. 10. 2. 22:03
반응형

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

완전한 URL부터 시작하는 정말 쉬운 방법이 있을까요?

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

호스트 부분만 추출합니다.

aaa.bbb.ccc.com

이 기능을 확실하게 하는 자바스크립트 함수가 있을 텐데 찾을 수가 없네요.

다음의 주소를 가지는 페이지가 있다고 가정합니다.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'

현재 페이지의 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"

사용하다document.location대상과 그 대상host또는hostname특성.

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

두 가지 방법이 있습니다.첫 번째 답변은 다른 답변의 변형이지만, 이 답변은 기본 포트가 아닙니다.

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");
}

해라

document.location.host

또는

document.location.hostname

사용하다

window.location.syslog

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

http://aaa.bbb.ccc.ddd.com/ 를 이용하실 수 있습니다.

다음과 같은 URL 경로가 있다고 가정합니다.

http://localhost: 4200/http?http=1#2

따라서 다음과 같이 위치 값을 사용할 수 있습니다.

window.location.hash: "#2"
​
window.location.host: "localhost:4200"
​
window.location.hostname: "localhost"
​
window.location.href: "http://localhost:4200/landing?query=1#2"
​
window.location.origin: "http://localhost:4200"
​
window.location.pathname: "/landing"
​
window.location.port: "4200"
​
window.location.protocol: "http:"

window.location.search: "?query=1"

이것으로, 이하에 대해 결론을 내릴 수 있습니다.

window.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 개발자 사이트를 참조하십시오.

조금 늦은 건 알지만 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는 IE를 지원하지 .Object.assign하지만 제 직업에서는 그건 중요하지 않아요

명기하고 싶은 것이 있습니다.필요한 경로로 전체 URL을 가져오려면 다음 명령을 사용합니다.

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

Regex는 훨씬 더 많은 유연성을 제공합니다.

    //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

이 솔루션은 Microsoft Internet Explorer를 포함한 모든 웹 브라우저에서 작동하며 정규 표현을 사용하지 않습니다.Noah Cardoza 및 Martin Konecny 솔루션에서 영감을 받았습니다.

function getHostname(href) {
    if (typeof URL === 'object') {
        // workaround for MS IE 11 (Noah Cardoza's solution but without using Object.assign())
        var dummyNode = document.createElement('a');
        dummyNode.href = href;
        return dummyNode.hostname;
    } else {
        // Martin Konecny's solution
        return new URL(href).hostname;
    }
}

은 URL을 사용하여 할 수 ./

const exampleURL = "Https://exampleurl.com/page1/etc/etc"
const URLsplit = exampleURL.split("/")
console.log(URLsplit)
console.log(URLsplit[2])

결과: exampleurl.com

언급URL : https://stackoverflow.com/questions/1368264/how-to-extract-the-hostname-portion-of-a-url-in-javascript

반응형