안녕하세요. 루미오입니다.
JavaScript에서 문자열을 찾아야 할 때 어떤 함수를 사용할까요? 가장 많이 쓰는 함수는 indexOf(), lastIndexOf() 함수가 아닐까 생각합니다. 익숙한 함수입니다. 사실 정규식을 안 쓰면 선택의 여지가 없었습니다. 하지만 ES6부터는 startsWith(), endsWith(), includes() 함수를 제공하기 때문에 용도에 따라 선택할 수 있게 되었습니다. 물론 복잡한 검색은 여전히 정규식을 사용하는 search(), march() 함수를 사용하면 됩니다. 이제 하나씩 알아보겠습니다.
순서
● indexOf() : 문자열 앞에서부터 특정 문자열 위치 찾기
● lastIndexOf() : 문자열 뒤에서부터 특정 문자열 위치 찾기
● startsWith() : 특정 문자열로 시작하는지 확인하기
● endsWith() : 특정 문자열로 끝나는지 확인하기
● includes() : 특정 문자열이 포함되었는지 확인하기
● search(regExp) : 정규식을 이용한 특정 문자열의 위치 찾기
● match(regExp) : 정규식을 이용한 특정 문자열 찾기
하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다.
현재 startsWith(), endsWith(), includes() 함수를 사용하기 위해서는 폴리필을 적용해야 합니다. 폴리필을 확인하시려면 아래 링크를 확인하세요.
[String.prototype.startsWith() 폴리필]
[String.prototype.endsWith() 폴리필]
[String.prototype.includes() 폴리필]
indexOf() : 문자열 앞에서부터 특정 문자열 위치 찾기
/* indexOf() : 문자열 앞에서부터 특정 문자열 위치 찾기 */
var result = -1;
var str = 'foo 123 bar'; // str.length : 11
result = str.indexOf('foo'); // 0
result = str.indexOf('bar'); // 8
result = str.indexOf('BAR'); // -1 : 대소문자 구분
result = str.indexOf('hoho'); // -1 : 'hoho'는 없음
result = str.indexOf('bar', 7); // 8 : 8 index부터 'bar' 시작
result = str.indexOf('bar', 8); // 8 : 8 index부터 'bar' 시작
result = str.indexOf('bar', 9); // -1 : 8 index부터 'bar' 시작
result = str.indexOf('123', 4); // 4 : 4 index부터 '123' 시작
result = str.indexOf(123, 4); // 4 : 숫자도 문자로 동일하게 처리함.
문자열의 앞에서부터 뒤로 특정 문자열의 index를 찾아주는 indexOf()함수입니다. JavaScript에서 index는 0부터 시작합니다. return 값은 정수이고, 첫 번째 파라미터는 검색할 문자열을 입력하고, 두 번째 파라미터는 검색을 시작할 index를 지정합니다. 찾는 문자열이 없으면 -1을 return 하고, 대소문자를 구분하며, 검색을 시작할 index를 지정할 수 있습니다. 그리고 특이한 것은 숫자도 문자로 바꿔서 찾아줍니다. 하지만 존재 여부만 확인하고 싶을 때도 boolean이 아니 -1인지를 비교해야 하므로 가독성이 약간 떨어지지만 여태껏 선택의 여지가 없었습니다. 아무튼, 자주 사용하고 유용한 함수임에는 틀림이 없는 것 같습니다.
lastIndexOf() : 문자열 뒤에서부터 특정 문자열 위치 찾기
/* lastIndexOf() : 문자열뒤에서 부터 특정 문자열 위치 찾기 */
var result = -1;
var str = 'foo 123 bar'; // str.length : 11
result = str.lastIndexOf('bar'); // 8
result = str.lastIndexOf('BAR'); // -1 : 대소문자 구분
result = str.lastIndexOf('foo'); // 0
result = str.lastIndexOf('hoho'); // -1 : 'hoho'는 없음
result = str.lastIndexOf('bar', 7); // -1 : 8 index부터 'bar' 시작
result = str.lastIndexOf('bar', 8); // 8 : 8 index부터 'bar' 시작
result = str.lastIndexOf('bar', 9); // 8 : 8 index부터 'bar' 시작
result = str.lastIndexOf('123', 4); // 4 : 4 index부터 '123' 시작
result = str.lastIndexOf(123, 4); // 4 : 숫자도 문자로 동일하게 처리함.
문자열의 뒤에서부터 앞으로 특정 문자열의 index를 찾아주는 lastIndexOf()함수입니다. return값은 정수이고, 첫 번째 파라미터는 검색할 문자열을, 두 번째 파라미터는 검색을 시작할 index를 지정합니다. 찾는 문자열이 없으면 -1을 반환하고, 대소문자를 구분합니다. 또한, 숫자를 입력해도 잘 찾아줍니다. 파일의 확장자를 찾을 때 사용하면 유용할 것 같습니다.
startsWith() : 특정 문자열로 시작하는지 확인하기
/* startsWith() : 특정 문자열로 시작하는지 확인하기 */
var result = false;
var str = 'foo 123 bar'; // str.length : 11
result = str.startsWith('foo'); // true : 'foo'로 시작함.
result = str.startsWith('FOO'); // false : 대소문자 구분
result = str.startsWith('bar'); // false : 'bar'로 시작하지 않음
result = str.startsWith('hoho'); // false : 'hoho'로 시작하지 않음
result = str.startsWith('bar', 8); // true : 8 index부터 'bar' 시작
result = str.startsWith('123', 4); // true : 4 index부터 '123' 시작
result = str.startsWith(123, 4); // true : 숫자도 문자로 동일하게 처리함.
startsWith()함수는 문자열이 특정 문자열로 시작하는지 확인하는 함수입니다. return 값은 boolean값으로 특정 문자열로 시작하면 true를 반환합니다. 첫 번째 파라미터로 검색할 문자열을 입력하고, 두 번째 파라미터로 검색을 시작할 index를 지정합니다. 대소문자를 구분하며, 숫자를 입력해도 잘 찾아줍니다.
endsWith() : 특정 문자열로 끝나는지 확인하기
/* endsWith() : 특정 문자열로 끝나는지 확인하기 */
var result = false;
var str = 'foo 123 bar'; // str.length : 11
result = str.endsWith('bar'); // true : 'bar'로 끝남
result = str.endsWith('BAR'); // false : 대소문자 구분
result = str.endsWith('foo'); // false : 'foo'로 시작하지 않음
result = str.endsWith('hoho'); // false : 'hoho'는 없음
result = str.endsWith('foo', 3); // true : 앞에서 3개의 문자(2 index)부터 시작해서 뒤에서 앞으로 찾는다.
result = str.endsWith('123', 7); // true : 앞에서 7개의 문자(6 index)부터 시작해서 뒤에서 앞으로 찾는다.
result = str.endsWith(123, 7); // true : 숫자도 문자로 동일하게 처리함.
문자열이 특정 문자열로 끝나는지 확인하는 endsWith()함수입니다. return값은 boolean이며, 첫 번째 파라미터는 검색할 문자열을 두 번째 파라미터는 검색을 시작할 index를 지정합니다. 마찬가지로 대소문자를 구분하며, 숫자도 문자로 취급합니다. 물론 찾는 특정 문자열이 없으면 false를 반환합니다.
includes() : 특정 문자열이 포함되었는지 확인하기
/* includes() : 특정 문자열이 포함되었는지 확인하기 */
var result = false;
var str = 'foo 123 bar'; // str.length : 11
result = str.includes('foo'); // true
result = str.includes('bar'); // true
result = str.includes('BAR'); // false : 대소문자 구분
result = str.includes('hoho'); // false : 'hoho'는 없음
result = str.includes('bar', 7); // true : 8 index부터 'bar' 시작
result = str.includes('bar', 8); // true : 8 index부터 'bar' 시작
result = str.includes('bar', 9); // false : 8 index부터 'bar' 시작
result = str.includes('123', 4); // true : 4 index부터 '123' 시작
result = str.includes(123, 4); // true : 숫자도 문자로 동일하게 처리함.
includes() 함수는 문자열에 특정 문자열의 포함 여부를 판별하는 함수입니다. 이미 소개한 4개 함수와 마찬가지로 2개의 파라미터로 검색할 문자열과 시작 index를 받으며 return값은 boolean입니다. 대소문자를 구분하고, 숫자도 문자로 취급하여 검색해 줍니다.
startsWith(), ensdWith(), includes() 3개의 함수는 ES6부터 지원합니다. 현재로서는 폴리필을 적용해야 웹브라우저에서 사용할 수 있습니다. 주의하세요.
search(regExp) : 정규식을 이용한 특정 문자열의 위치 찾기
/* search(regExp) : 정규식을 이용한 특정 문자열의 위치 찾기 */
var result = -1;
var str = 'foo 123 bar'; // str.length : 11
result = str.search(/foo/); // 0 : 정규식 사용
result = str.search('/foo/'); // -1 : 정규식이 아님 : new RegExp('/foo/')로 변환됨
result = str.search('foo'); // 0 : 정규식 아님 : new RegExp('foo')로 변환됨
result = str.search(new RegExp('foo')); // 0 : RegExp object 사용 가능
result = str.search(/[a-z]/); // 0 :
result = str.search(/FOO/); // -1 : 대소문자 구분
result = str.search(/FOO/i); // 0 : i flag : 대소문자 구분하지 않음.
result = str.search(/FOO/gi); // 0 : g flag : 일치하는 첫번재 문자에서 멈추지 않고 전체에서 검색함(search에서는 의미 없음.)
result = str.search(/hoho/); // -1 : 'hoho'는 없음
복잡하고 헷갈리고 어렵지만 마법 같은 일들을 너무나도 쉽게 처리해주는 정규식, 그 정규식을 사용하는 search()함수입니다. 이 함수는 문자열에서 특정 문자열을 찾아서 특정 문자열의 시작 index를 return 합니다. 파라미터는 하나를 받으며 정규식 또는 정규식으로 변환될 문자열을 받습니다. 문자열로 입력되면 new RegExp('param')으로 변환됩니다. 정규식의 g flag는 검색을 끝가지 계속하도록 하는 명령입니다. 하지만 search()함수는 첫 번째 index를 반환하기 때문에 의미가 없습니다. 여기서 정규식을 다루기에는 너무 길어지기 때문에 정규식에 대한 포스트는 조만간 다루는 걸로 하고 오늘은 패스하겠습니다.
match(regExp) : 정규식을 이용한 특정 문자열 찾기
/* match(regExp) : 정규식을 이용한 특정 문자열 찾기 */
var result = -1;
var str = 'foo 123 bar'; // str.length : 11
result = str.match(/foo/); // ['foo'] : 정규식 사용
result = str.match('/foo/'); // null : 정규식이 아님 : new RegExp('/foo/')로 변환됨
result = str.match('foo'); // ['foo'] : 정규식 아님 : new RegExp('foo')로 변환됨
result = str.match(new RegExp('foo')); // ['foo'] : RegExp object 사용 가능
result = str.match(/[a-z]/); // ['f'] : a부터 z까지 문자중 첫번째 문자를 찾아 Array로 반환함.
result = str.match(/[A-Z]/); // null : 대소문자를 구분함.
result = str.match(/[A-Z]/i); // ['f'] : i flag : 대소문자 구분하지 않음.
result = str.match(/[a-z]/g); // ['f','o','o','b','a','r'] : g flag : 일치하는 첫번재 문자에서 멈추지 않고 전체에서 검색함.
result = str.match(/[A-Z]/gi); // ['f','o','o','b','a','r'] : gi flag : 일치하는 모든 문자를 찾고 , 대소문자를 구분하지 않음.
result = str.match(/hoho/); // null : 'hoho'는 없음
match()함수입니다. 파라미터로 정규식 또는 정규식으로 변환될 문자열을 받습니다. 이 함수는 검색된 특정 문자열의 Array를 return합니다. 특정한 패턴이 있는 문자열을 한 번에 모두 찾을 때 유용합니다. 예를 들면 문자열에서 e-mail 주소만 모두 찾거나, 계좌번호, 주민번호 같은 개인정보 관련 문자열을 찾을 수 있습니다. i flag를 지정하면 대소문자를 구분하지 않으며, g flag를 지정하면 문자열의 끝까지 검색을 합니다.
지금까지 JavaScript에서 특정 문자열을 찾는 7개의 함수를 살펴봤습니다. 조금이나마 개발에 도움이 되었으면 합니다.
감사합니다.
- 루미오 . LOOMIO -
