[정규표현식] [javascript] 이미지 URL에서 이미지 명만 뽑아내기

잡설이 길게 나오므로 귀찮으신 분은 바로 아래 예제로 가자.

오래 간만에 올리는 정규식 예제이다.

이미지 경로에서 이미지명만 뽑아내려고
후방탐색을 먼저 생각해봤는데, 자바스크립트의 정규표현식에서는 후방탐색을
지원하지 않는것 같다.

없어서 누군가 후방탐색을 가능하도록 구현해 놓은 사람이 있었다.
여기 참고
http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript

그렇지만, 겨우 이미지명 가져오는데 이렇게 고생을 해야되나 싶어서 접고
그냥 제공되는 것으로 할려고 하니
스택 오버플로우에 누군가 이미지 명이아니라 base 명을 받아오는 걸 만들어 놨다.
http://stackoverflow.com/questions/1991608/find-base-name-in-url-in-javascript

요걸 살짝 바꾸니 이미지명을 받아오는게 되더군.

예제)

아래와 같은 이미지 경로가 있다고 치자.

http://userimg.site.com/img/banner/111.JPG
http://userimg.site.com/img/banner/image.gif
http://userimg.site.com/img/banner/itsimage.png

여기서 이미지명만 뽑아내고 싶다.
요렇게

111.JPG
image.gif
itimage.png

정규식은 어떻게 하면 될까?

자바스크립트로 작성해본 소스는 이렇다.

var imgsrc = "http://userimg.site.com/img/banner/111.JPG";
alert(imgsrc.replace(/^.*\//, '')));

중요한 부분은 /^.*\// 이부분인데

^. :  문자열로 시작함 (콤마)로 시작하지 않음
* : 0개 이상의 문자들
\/ 요거는 슬래쉬 

즉... 콤마로 시작하지 않는 문자열을 /(슬래쉬)가 있는곳 까지 찾는다 이다.
여기서 *요거를 썻기때문에 마구마구 찾는다. 결국 끝까지 찾아준다.

그래서 위와 같이 코드를 작성하면

111.JPG 라고 아주 간단하게 이미지 파일명만 받아 올 수 있다.

반대로 이미지의 패스경로를 가져오고  싶다면
아래와 같이하자.

var imgsrc = "http://userimg.site.com/img/banner/111.JPG";
alert(imgsrc.match(/^.*\//)));

이때에 정규식은 변경되지 않고 replace 함수가 match라는 함수로 대체될 뿐이다.

정규식 쓰면서 스트레스 받지 않길 바라며...