Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 URL에서 마지막 파일명만 추출하는 방법 – 정규식 활용법

웹 개발을 하다 보면 URL 문자열에서 불필요한 경로 부분을 잘라내고, 마지막 파일명이나 값만 남겨야 하는 경우가 자주 발생합니다. 예를 들어 다음과 같은 URL이 있다고 가정해 보겠습니다.

https://www.tutorialspoint.com/advanced_microsoft_word_2013_tutorial/index.asp

여기서 우리가 원하는 것은 마지막 값인 index.asp뿐입니다. 즉, 슬래시(/) 앞의 모든 텍스트를 삭제하고 아래와 같은 결과를 얻어야 합니다.

index.asp

해결 방법: replace()와 정규식 활용

이 문제는 JavaScript의 replace() 메서드와 정규 표현식(Regular Expression)을 함께 사용하면 간단하게 해결할 수 있습니다. 핵심은 /^.*\//라는 정규식 패턴으로, 이 패턴은 문자열 시작부터 마지막 슬래시까지의 모든 문자를 매칭합니다.

  • ^ : 문자열의 시작을 의미합니다.
  • .* : 임의의 문자가 0번 이상 반복되는 부분을 의미합니다.
  • \/ : 마지막 슬래시 기호를 의미하며, 탐욕적(greedy) 매칭에 의해 가장 뒤에 있는 슬래시까지 포함됩니다.

예제 코드

다음은 전체 코드입니다.

var url = "https://www.tutorialspoint.com/advanced_microsoft_word_2013_tutorial/index.asp";
var getValues = url.replace(/^.*\//, '');
console.log("원본 값 = " + url);
console.log("새로운 값 = " + getValues);

위 코드에서는 replace(/^.*\//, '')를 통해 슬래시 이전의 모든 내용을 빈 문자열('')로 대체하여 마지막 파일명만 남기게 됩니다.

프로그램 실행 방법

Node.js 환경에서 위 프로그램을 실행하려면 터미널에서 다음 명령어를 입력하세요.

node fileName.js

여기서는 파일 이름이 demo258.js라고 가정하겠습니다.

실행 결과

위 프로그램을 실행하면 콘솔에 다음과 같은 출력 결과가 나타납니다.

PS C:\Users\Amit\javascript-code> node demo258.js
원본 값 = https://www.tutorialspoint.com/advanced_microsoft_word_2013_tutorial/index.asp
새로운 값 = index.asp

추가 팁: split() 메서드 대안

정규식 외에도 split() 메서드를 사용해 같은 결과를 얻을 수 있습니다.

var getValues = url.split('/').pop();
console.log(getValues); // index.asp

split('/')은 URL을 슬래시 기준으로 배열로 나눈 후, pop()으로 마지막 요소를 가져오는 방식입니다. 상황에 따라 더 직관적으로 사용할 수 있으니 참고하세요.