JavaScript (또는 jQuery)를 사용하여 문자열 변수에서 기본 URL을 추출하는 비교적 쉽고 안정적인 방법을 찾으려고합니다.

예를 들어, 다음과 같은 것이 주어집니다 :

http://www.sitename.com/article/2009/09/14/this-is-an-article/

나는 얻고 싶다 :

http://www.sitename.com/

정규식이 최선의 방법입니까? 그렇다면 주어진 문자열에서 추출한 기본 URL을 새 변수에 할당하기 위해 어떤 문장을 사용할 수 있습니까?

나는 이것에 대해 약간의 검색을했지만 JavaScript 세계에서 찾은 모든 것은 location.host 또는 유사한 것을 사용하여 실제 문서 URL 에서이 정보를 수집하는 것과 관련이있는 것 같습니다 .

답변

편집 : 일부는 프로토콜을 고려하지 않는다고 불평합니다. 그래서 코드가 답변으로 표시되어 있기 때문에 코드를 업그레이드하기로 결정했습니다. 한 줄 코드를 좋아하는 사람들에게는 … 우리가 왜 코드 최소화기를 사용하는지 유감스럽게 생각합니다. 코드는 사람이 읽을 수 있어야 하며이 방법은 더 좋습니다 … 내 의견으로는.

var pathArray = "https://somedomain.com".split( '/' );
var protocol = pathArray[0];
var host = pathArray[2];
var url = protocol + '//' + host;

또는 아래에서 Davids 솔루션 을 사용하십시오 .

답변

WebKit 기반 브라우저, 버전 21의 Firefox 및 최신 버전의 Internet Explorer (IE 10 및 11)가 구현 location.origin됩니다.

location.origin포함 프로토콜 의 도메인 선택적와 포트 의 URL을.

예를 들어 location.originURL http://www.sitename.com/article/2009/09/14/this-is-an-article/은 http://www.sitename.com입니다.

지원하지 않고 브라우저를 대상으로하려면 location.origin다음과 같은 간결한 폴리 필 을 사용하십시오.

if (typeof location.origin === 'undefined')
    location.origin = location.protocol + '//' + location.host;

답변

jQuery를 사용할 필요가 없습니다.

location.hostname

답변

링크 인 문자열에서 경로, 호스트 이름 등을 얻기 위해 분할을 수행 할 이유가 없습니다. 당신은 단지 링크를 사용해야합니다

//create a new element link with your link
var a = document.createElement("a");
a.href="http://www.sitename.com/article/2009/09/14/this-is-an-article/";

//hide it from view when it is added
a.style.display="none";

//add it
document.body.appendChild(a);

//read the links "features"
alert(a.protocol);
alert(a.hostname)
alert(a.pathname)
alert(a.port);
alert(a.hash);

//remove it
document.body.removeChild(a);

jQuery를 사용하여 요소를 추가하고 속성을 읽으면 쉽게 할 수 있습니다.

답변

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

답변

String.prototype.url = function() {
  const a = $('<a />').attr('href', this)[0];
  // or if you are not using jQuery ??
  // const a = document.createElement('a'); a.setAttribute('href', this);
  let origin = a.protocol + '//' + a.hostname;
  if (a.port.length > 0) {
    origin = `${origin}:${a.port}`;
  }
  const {host, hostname, pathname, port, protocol, search, hash} = a;
  return {origin, host, hostname, pathname, port, protocol, search, hash};

}

그런 다음 :

'http://mysite:5050/pke45#23'.url()
 //OUTPUT : {host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050", protocol: "http:",hash:"#23",origin:"http://mysite:5050"}

요청하려면 다음이 필요합니다.

 'http://mysite:5050/pke45#23'.url().origin

Review 07-2017 : 더 우아하고 더 많은 기능이 있습니다.

const parseUrl = (string, prop) =>  {
  const a = document.createElement('a');
  a.setAttribute('href', string);
  const {host, hostname, pathname, port, protocol, search, hash} = a;
  const origin = `${protocol}//${hostname}${port.length ? `:${port}`:''}`;
  return prop ? eval(prop) : {origin, host, hostname, pathname, port, protocol, search, hash}
}

그때

parseUrl('http://mysite:5050/pke45#23')
// {origin: "http://mysite:5050", host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050"…}


parseUrl('http://mysite:5050/pke45#23', 'origin')
// "http://mysite:5050"

멋있는!

답변

jQuery를 사용하는 경우 이는 DOM에 요소를 추가하지 않고 자바 스크립트에서 요소를 조작하는 멋진 방법입니다.

var myAnchor = $("<a />");

//set href    
myAnchor.attr('href', 'http://example.com/path/to/myfile')

//your link's features
var hostname = myAnchor.attr('hostname'); // http://example.com
var pathname = myAnchor.attr('pathname'); // /path/to/my/file
//...etc