문제
여러 페이지별로 url 있고 이 url은 동작에 따라 유동적인데
현재있는 페이지의 url 에서 특정 유니크한 이름을 뽑아야 할 일이 있었다.
/contract => /contract
/contract/2091 => /contract
/contract?page=2&status=finished... => /contract
/logistics/release => /logistics/release
/logistics/release/5279 => /logistics/release
/logistics/release?page=2&status=finished... => /logistics/release예를들어 위와 같이 특정한 페이지에서
- 필터 조건들을 추가할때
?이후로 쿼리 스트링이 붙는 경우가 있고 - 상세 페이지로 들어갈때에
/이후로 숫자들이 붙는 경우가 있다.
이러한 유동적인 url에서 "특정 페이지임을 알 수 있는 유니크한 문자열" 을 뽑아내야되는 상황이었다.
split
? 이후의 문자열을 제거하는 경우는 split을 사용하면 쉽다.
const url = '/logistics/release?page=2&status=finished';
url.split('?')[0]; // /logistics/release정규표현식
정규표현식 을 통해서도 해결이 가능하다. replace 와 같이 사용해주면 된다.
str.replace(
바꾸고싶은문자,바꿀문자);
str.replace(regexp|substr, newSubstr|function)
case1) ? 이후 쿼리 스트링 제거하기
const url = '/logistics/release?page=2&status=finished';
url.replace(/\?.+$/, ''); // /logistics/release. 은 한개의 모든 문자를 의미한다. +는 한번이상의 발생을 의미한다.
참고로 역슬래쉬가 붙은\.은 그냥 .점 을 의미한다.
case2) / 이후 붙는 숫자 제거하기
const url = '/logistics/release/5279';
url.replace(/\/\d+$/, ''); // /logistics/release
url.replace(/\/\d{1,}$/, ''); // /logistics/release
url.replace(/\/[0-9]{1,}$/, ''); // /logistics/release\d 는 숫자를 의미한다.$은 문자열이 끝났음을 의미한다. 반대로 ^은 처음을 의미한다.
case1 과 case2 동시에 적용하기
url.replace(/(\?.+)|(\/\d+)/, '');() 는 그룹으로 묶어주는 역할을 하고 | 는 "or" "또는" 을 의한다.
정규표현식 기본 문법
불리언 "또는"
수직선은 여러 항목 중 선택을 하기 위해 구분한다. 이를테면 gray|grey는 "gray" 또는 "grey"와 일치한다.
그룹 묶기
괄호를 사용하면 연산자의 범위와 우선권을 정의할 수 있다. 이를테면 gray|grey와 gr(a|e)y는 "gray"나 "grey" 집합을 둘 다 기술하는 동일 패턴이다.
양의 지정
? 물음표는 0번 또는 1차례까지의 발생을 의미한다. 이를테면 colou?r는 "color"와 "colour"를 둘 다 일치시킨다.
* 별표는 0번 이상의 발생을 의미한다. 이를테면 ab*c는 "ac", "abc", "abbc", "abbbc" 등을 일치시킨다.
+ 덧셈 기호는 1번 이상의 발생을 의미한다. 이를테면 ab+c는 "abc", "abbc", "abbbc" 등을 일치시키지만 "ac"는 일치시키지 않는다.
{n} 정확히 n 번만큼 일치시킨다.
{min,} "min"번 이상만큼 일치시킨다.
{min,max} 적어도 "min"번만큼 일치시키지만 "max"번을 초과하여 일치시키지는 않는다.
문자 [] 추가설명
[] 안에 문자를 넣으면 []사이에 넣은 문자들중에서 한개의 문자로 인식한다. | 를 여러 번 쓴 것과 같은 의미이다.
[] 와 -를 같이 사용하면 [a-z], [0-9] 처럼 범위를 지정할 수도 있다.
=> /[abc]/ 는 a|b|c이다. /[0-9]/ 는 0부터 9까지 숫자중 하나다.
[] 없이 문자를 여러개를 작성하면 그냥 하나의 묶음으로 인식한다.
=> /abc/ 는 그냥 'abc'이다. /0-9/ 는 그냥 '0-9' 문자 그 자체이다.
참고
정규 표현식 위키백과
정규 표현식 (좀 더) 깊이 알아보기
알고 있어야 할 8가지 정규식 표현 from nettuts+
[JavaScript] replace(치환) 및 정규식
