sourcecode

JavaScript를 사용하는 URL의 마지막 세그먼트

copyscript 2022. 9. 6. 22:27
반응형

JavaScript를 사용하는 URL의 마지막 세그먼트

URL의 마지막 세그먼트를 얻으려면 어떻게 해야 하나요?앵커 태그의 전체 URL을 표시하는 다음 스크립트가 있습니다.

$(".tag_name_goes_here").live('click', function(event)
{
    event.preventDefault();  
    alert($(this).attr("href"));
});

URL이 다음과 같은 경우

http://mywebsite/folder/file

알림 상자에 URL의 "파일" 부분만 표시되도록 하려면 어떻게 해야 합니까?

또한 lastIndexOf() 함수를 사용하여 마지막으로 발생한 데이터를 찾을 수도 있습니다./다음 서브스트링() 함수를 사용하여 해당 위치에서 시작하는 서브스트링을 반환합니다.

console.log(this.href.substring(this.href.lastIndexOf('/') + 1));

그런 식으로 하면 당신,이렇게 하면 모든 URL필요가 없습니다 만들포함하는 배열을 세그먼트를로 배열 모두 당신의 URL부분을 포함하는을 만드는 것을 피할 것입니다.split()does.한다.

var parts = 'http://mywebsite/folder/file'.split('/');
var lastSegment = parts.pop() || parts.pop();  // handle potential trailing slash

console.log(lastSegment);

window.location.pathname.split("/").pop()

다른 응답은 경로가 단순하고 단순한 경로 요소로만 구성된 경우 작동할 수 있습니다.그러나 쿼리 매개 변수도 포함되면 매개 변수가 끊어집니다.

보다 견고한 솔루션을 얻으려면 대신 URL 개체를 사용하는 것이 좋습니다.이것은 현재 URL을 해석한 것입니다.

입력: const href = 'https://stackoverflow.com/boo?q=foo&s=bar'

const segments = new URL(href).pathname.split('/');
const last = segments.pop() || segments.pop(); // Handle potential trailing slash
console.log(last);

출력: 'boo'

이것은 모든 일반적인 브라우저에서 작동합니다.폐사하는 IE만이 그것을 지원하지 않습니다(지원하지 않습니다).IE의 경우 폴리 매립지를 사용할 수 있습니다(관심이 있는 경우).

regex를 사용한 또 다른 솔루션일 뿐입니다.

var href = location.href;
console.log(href.match(/([^\/]*)\/*$/)[1]);

Javascript에는 문자열 객체와 관련된 함수 분할이 있어 다음을 지원합니다.

var url = "http://mywebsite/folder/file";
var array = url.split('/');

var lastsegment = array[array.length-1];

또는 정규 표현을 사용할 수도 있습니다.

alert(href.replace(/.*\//, ''));
var urlChunks = 'mywebsite/folder/file'.split('/');
alert(urlChunks[urlChunks.length - 1]);
// https://x.com/boo/?q=foo&s=bar = boo
// https://x.com/boo?q=foo&s=bar = boo
// https://x.com/boo/ = boo
// https://x.com/boo = boo

const segment = new 
URL(window.location.href).pathname.split('/').filter(Boolean).pop();
console.log(segment);

저는 좋아요.

후행 슬래시에 관계없이 마지막 세그먼트를 반환합니다.

var val = 'http://mywebsite/folder/file//'.split('/').filter(Boolean).pop();

console.log(val);

알아요, 너무 늦었지만 다른 사람들에게는요PURL jquery 플러그인 사용강력히 추천합니다.PURL의 동기는 url이 '#'으로도 분할될 수 있다는 것입니다(예: angular.js links). 즉, url은 다음과 같이 보일 수 있습니다.

    http://test.com/#/about/us/

또는

    http://test.com/#sky=blue&grass=green

또한 PURL을 사용하면 원하는 세그먼트를 쉽게 결정할 수 있습니다(세그먼트/f세그먼트).

「클래식」의 마지막 세그먼트에 대해서는, 다음과 같이 기술할 수 있습니다.

    var url = $.url('http://test.com/dir/index.html?key=value');
    var lastSegment = url.segment().pop(); // index.html

RegEx를 사용하여 마지막 세그먼트 가져오기

str.replace(/.*\/(\w+)\/?$/, '$1');

$1은 캡처 그룹을 사용하는 것을 의미합니다.RegEx(\w+)에서 를 사용하여 첫 번째 그룹을 만든 후 문자열 전체를 캡처 그룹으로 바꿉니다.

let str = 'http://mywebsite/folder/file';
let lastSegment = str.replace(/.*\/(\w+)\/?$/, '$1');
console.log(lastSegment);

또한.

var url = $(this).attr("href");
var part = url.substring(url.lastIndexOf('/') + 1);

Javascript만을 사용하여 Frédéric의 답변을 기반으로 합니다.

var url = document.URL

window.alert(url.substr(url.lastIndexOf('/') + 1));

분할을 사용하여 추가 요소를 생성하는 것이 걱정되지 않는 경우 필터는 사용자가 언급한 후행 슬래시 문제를 처리할 수 있습니다(필터에 대한 브라우저 지원이 있다고 가정).

url.split('/').filter(function (s) { return !!s }).pop()
window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1));

네이티브 네이티브 사용 사용하라pathname부동산고 이미 브라우저에 의해 해결되는 구문 분석해 왔다 단순한 있다.가장 단순하고 브라우저에서 이미 구문 분석 및 해결되었기 때문입니다. $(this).attr("href")같은 값을 반환할 수 있다 같은 가치들 반환할 수 있../..너는 정확한 결과를 내주지 않았습니다.수 없습니다 얻을정확한 결과를.

만약 당신이 보관해야 할 경우를 유지할 필요가 있다.search ★★★★★★★★★★★★★★★★★」hash(예:(예:foo?bar#baz부터에서http://quux.com/path/to/foo?bar#baz)사용 이:)사용방법:

window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1) + this.search + this.hash);

현재 창의 마지막 세그먼트를 가져오려면:

window.location.href.substr(window.location.href.lastIndexOf('/') +1)

마지막에 /가 있는 경우 먼저 삭제하고 url의 마지막 부분을 가져올 수 있습니다.

let locationLastPart = window.location.pathname
if (locationLastPart.substring(locationLastPart.length-1) == "/") {
  locationLastPart = locationLastPart.substring(0, locationLastPart.length-1);
}
locationLastPart = locationLastPart.substr(locationLastPart.lastIndexOf('/') + 1);
var pathname = window.location.pathname; // Returns path only
var url      = window.location.href;     // Returns full URL

이 답변에서 복사했습니다.

// Store original location in loc like: http://test.com/one/ (ending slash)
var loc = location.href; 
// If the last char is a slash trim it, otherwise return the original loc
loc = loc.lastIndexOf('/') == (loc.length -1) ? loc.substring(0,loc.length-1) : loc.substring(0,loc.lastIndexOf('/'));
var targetValue = loc.substring(loc.lastIndexOf('/') + 1);

targetValue = 1

URL이 다음과 같은 경우:

http://test.com/one/

또는

http://test.com/one

또는

http://test.com/one/index.htm

loc는 http://test.com/one과 같이 표시됩니다.

마지막 항목을 원하기 때문에 다음 단계를 실행하여 원래 원하는 값(targetValue)을 로드합니다.

var targetValue = loc.substr(loc.lastIndexOf('/') + 1);

// Store original location in loc like: http://test.com/one/ (ending slash)
    let loc = "http://test.com/one/index.htm"; 
   console.log("starting loc value = " + loc);
    // If the last char is a slash trim it, otherwise return the original loc
    loc = loc.lastIndexOf('/') == (loc.length -1) ? loc.substring(0,loc.length-1) : loc.substring(0,loc.lastIndexOf('/'));
    let targetValue = loc.substring(loc.lastIndexOf('/') + 1);
console.log("targetValue = " + targetValue);
console.log("loc = " + loc);

raddevus 응답 업데이트:

var loc = window.location.href;
loc = loc.lastIndexOf('/') == loc.length - 1 ? loc.substr(0, loc.length - 1) : loc.substr(0, loc.length + 1);
var targetValue = loc.substr(loc.lastIndexOf('/') + 1);

url의 마지막 경로를 문자열로 인쇄합니다.

test.com/path-name = path-name

test.com/path-name/ = path-name

regex 및 split을 사용하고 있습니다.

var last_path = location.href.match(/.[\w]/)[1].par #"[0.par])[0]

최종적으로 #?&/엔딩 URL은 무시됩니다.이것은 자주 발생합니다.예:

https://cardsrealm.com/profile/cardsRealm -> 카드 레름을 반환합니다.

https://cardsrealm.com/profile/cardsRealm#hello -> 카드 레름을 반환합니다.

https://cardsrealm.com/profile/cardsRealm?hello -> 카드 레름을 반환합니다.

https://cardsrealm.com/profile/cardsRealm/ -> 카드 레름을 반환합니다.

만약 regex은 옳은 방향 이 문제를 해결하면 당신의 코드의 효율에 영향을 미칠 수 있지만, 아래의 regex 지난 부분 낙찰을 할 수 있게, 심지어는 URL 빈 regex가 코드 효율에 실제로 영향을 미칠 수 있기 때문에 이 문제를 해결하는 올바른 방법인지는 잘 모르겠습니다만,아래의 regex는 마지막세그먼트를 가져오는 데가 일어난다 아직도 당신은 지난 세그먼트를 줄지 모르겠다. 도움이 됩니다.또, URL공백이 붙어 있어도,마지막 세그먼트가 표시됩니다 뒤에./제가 생각해낸 정규식은 다음과 같습니다.

[^\/]+[\/]?$

오래된 것은 알지만 URL에서 가져오려면 다음 항목을 사용하십시오.

document.location.pathname.substring(document.location.pathname.lastIndexOf('/.') + 1);

document.location.pathnameURL에서 .「 URL 」 。lastIndexOf다음 Regex의 마지막 발생 인덱스를 얻습니다.다음 중 하나:/.이란 임의의, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점, 점/입니다. URL 입니다.substring는 두 인덱스 사이의 문자열을 잘라냅니다.

이 URL인 http://localhost/madukaonline/shop.php?shop=79

console.log(location.search); 가져오다?shop=79

그래서 가장 간단한 방법은 위치를 이용하는 것입니다.검색

자세한 내용이쪽과 이쪽에서 확인하실 수 있습니다.

이는 단순한 경로(w/0) 쿼리 스트링 등을 사용하여 수행할 수 있습니다.

가 없을지도 , 는 '무엇보다 더 좋다', '무엇보다 더 좋다'를하고 싶었습니다.reduce재미 삼아서.

  "/foo/bar/"
    .split(path.sep)
    .filter(x => x !== "")
    .reduce((_, part, i, arr) => {
      if (i == arr.length - 1) return part;
    }, "");
  1. 경로 구분 기호로 문자열을 분할합니다.
  2. 빈 문자열 경로 부분을 필터링합니다(이 문제는 경로의 후행 슬래시에 발생할 수 있습니다).
  3. 경로 부품의 배열을 마지막 패스로 줄입니다.

세바스찬 바트의 훌륭한 답변에 더해서.

한다면href해석하는 변수입니다.new URL을 던지다TypeError그러니 안전한 곳에 있으려면try - catch

try{    
    const segments = new URL(href).pathname.split('/');
    const last = segments.pop() || segments.pop(); // Handle potential trailing slash
    console.log(last);
}catch (error){
    //Uups, href wasn't a valid URL (empty string or malformed URL)
    console.log('TypeError ->',error);
}

서브스트링을 하기 전에 테일슬래시('/')를 제거하는 것이 안전하다고 생각합니다.시나리오에 빈 문자열이 나왔기 때문입니다.

window.alert((window.location.pathname).replace(/\/$/, "").substr((window.location.pathname.replace(/\/$/, "")).lastIndexOf('/') + 1));

URL 마지막 세그먼트 제거(-) 및 (/)를 가져오는 가장 좋은 방법

 jQuery(document).ready(function(){
        var path = window.location.pathname;
        var parts = path.split('/');
        var lastSegment = parts.pop() || parts.pop();  // handle potential trailing slash
        lastSegment = lastSegment.replace('-',' ').replace('-',' ');
        jQuery('.archive .filters').before('<div class="product_heading"><h3>Best '+lastSegment+' Deals </h3></div>');
    
    }); 

쿼리 매개 변수를 피하는 방법

const urlString = "https://stackoverflow.com/last-segment?param=123"
const url = new URL(urlString);
url.search = '';
const lastSegment = url.pathname.split('/').pop();

console.log(lastSegment)

언급URL : https://stackoverflow.com/questions/4758103/last-segment-of-url-with-javascript

반응형