JavaScript-URL 경로 일부 가져 오기

JavaScript를 사용하여 URL에서 경로를 가져 오는 올바른 방법은 무엇입니까?

예 : http://www.somedomain.com/account/search?filter=a#top
URL이 있지만이 부분을 / account / search 로 가져 오려고합니다.

활용할 수있는 것이 있으면 jQuery를 사용하고 있습니다.

window.location현재 창에 제공 할 내장 객체 의 속성이 있습니다.

// If URL is http://www.somedomain.com/account/search?filter=a#top

window.location.pathname // /account/search

// For reference:

window.location.host     // www.somedomain.com (includes port if there is one)
window.location.hostname // www.somedomain.com
window.location.hash     // #top
window.location.href     // http://www.somedomain.com/account/search?filter=a#top
window.location.port     // (empty string)
window.location.protocol // http:
window.location.search   // ?filter=a  

모든 URL에 대해 동일한 속성을 사용하여 업데이트하십시오.

이 스키마는 URLUtils 라는 인터페이스로 표준화되고있는 것으로 나타났습니다 . 기존 window.location객체 와 앵커 요소 모두 인터페이스를 구현합니다.

따라서 모든 URL에 대해 위와 동일한 속성을 사용할 수 있습니다. URL 로 앵커를 만들고 속성에 액세스하십시오.

var el = document.createElement('a');
el.href = "http://www.somedomain.com/account/search?filter=a#top";

el.host        // www.somedomain.com (includes port if there is one[1])
el.hostname    // www.somedomain.com
el.hash        // #top
el.href        // http://www.somedomain.com/account/search?filter=a#top
el.pathname    // /account/search
el.port        // (port if there is one[1])
el.protocol    // http:
el.search      // ?filter=a

[1] : 포트를 포함하는 속성에 대한 브라우저 지원이 일관되지 않습니다. 참조 : http://jessepollak.me/chrome-was-wrong-ie-was-right

이것은 최신 버전의 Chrome 및 Firefox에서 작동합니다 . 테스트 할 Internet Explorer 버전이 없으므로 JSFiddle 예제를 사용하여 직접 테스트하십시오.

JSFiddle 예제

URLanchor 요소없이 URL 자체에 대한 이러한 지원을 제공 할 객체 도 있습니다 . 현재로서는 안정적인 브라우저가 지원하지 않는 것 같지만 Firefox 26에서 제공되고 있다고합니다 . 지원이 있다고 생각되면 여기에서 시도하십시오 .

window.location.href.split('/');

모든 URL 부분을 포함하는 배열을 제공하므로 일반 배열처럼 액세스 할 수 있습니다.

또는 @Dylan이 제안한 더 우아한 솔루션으로 경로 부분 만 있습니다.

window.location.pathname.split('/');

이것이 현재 URL 인 경우 window.location.pathname을 사용하고 그렇지 않으면이 정규식을 사용하십시오.

var reg = /.+?\:\/\/.+?(\/.+?)(?:#|\?|$)/;
var pathname = reg.exec( 'http://www.somedomain.com/account/search?filter=a#top' )[1];

URL 이라는 유용한 웹 API 메소드가 있습니다

const url = new URL('http://www.somedomain.com/account/search?filter=a#top');
console.log(url.pathname.split('/'));
const params = new URLSearchParams(url.search)
console.log(params.get("filter"))

변수에 저장된 URL의 일부를 얻으려면 URL-Parse를 권장 할 수 있습니다

const Url = require('url-parse');
const url = new Url('https://github.com/foo/bar');

설명서에 따르면 다음 부분을 추출합니다.

반환 된 url 인스턴스에는 다음 속성이 포함됩니다.

protocol : URL의 프로토콜 체계 (예 : http :). 슬래시 : 프로토콜 뒤에 두 개의 슬래시 (//)가 오는지 여부를 나타내는 부울입니다. 인증 : 인증 정보 부분 (예 : username : password) username : 기본 인증의 사용자 이름입니다. 비밀번호 : 기본 인증의 비밀번호입니다. 호스트 : 포트 번호가있는 호스트 이름. 호스트 이름 : 포트 번호가없는 호스트 이름. 포트 : 선택적 포트 번호. 경로 이름 : URL 경로. query : 구문 분석이 false로 설정되지 않은 경우 쿼리 문자열을 포함하는 구문 분석 된 오브젝트입니다. 해시 : 파운드 기호 (#)를 포함하여 URL의 "조각"부분. href : 전체 URL origin : URL의 출처.

현재 URL이 아닌 추상 URL 문자열 window.location이있는 경우이 트릭을 사용할 수 있습니다.

let yourUrlString = "http://example.com:3000/pathname/?search=test#hash";

let parser = document.createElement('a');
parser.href = yourUrlString;

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

jlong 덕분에