자바스크립트는 대소문자를 엄격하게 구분(case sensitive)하는 언어입니다. 따라서 특정 단어를 다른 단어로 치환할 때는 해당 글자가 대문자인지 소문자인지까지 확인해야 합니다. 단어가 한두 개라면 수동으로 검사하는 것도 어렵지 않지만, 처리해야 할 단어가 많아지면 이야기가 달라집니다. 바로 이런 상황에서 "/i" 플래그가 유용하게 사용됩니다. "/i" 플래그를 사용하면 대소문자와 관계없이 일치하는 단어를 모두 찾아 다른 단어로 교체할 수 있습니다.
/i 플래그 없이 치환하는 경우
다음 예제에서는 문자열에 포함된 모든 "blue"를 "red"로 바꾸려고 합니다. 하지만 replace() 메서드에 전역 검색을 의미하는 /g 플래그만 사용했기 때문에, 대문자로 시작하는 "Blue"는 그대로 남고 소문자 "blue"만 "red"로 변경됩니다.
<html>
<body>
<script>
var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue/g, "red");
document.write(res);
</script>
</body>
</html>
출력 결과
Mr Blue has a red house and a red car
/i 플래그를 사용한 경우
"/i" 플래그(ignore case)를 함께 사용하면 단어의 대소문자와 관계없이 일치하는 모든 단어가 지정한 단어로 치환됩니다.
다음 예제에서는 대소문자를 무시하는 "/i" 플래그와 전역 검색을 수행하는 "/g" 플래그를 조합한 /blue/ig 패턴을 사용했습니다. 그 결과 대문자 "Blue"를 포함해 문자열 내 모든 "blue"가 "red"로 변경된 것을 확인할 수 있습니다.
<html>
<body>
<script>
var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue/ig, "red");
document.write(res);
</script>
</body>
</html>
출력 결과
Mr red has a red house and a red car
플래그 조합 팁
"i"와 "g" 플래그는 순서에 상관없이 /ig 또는 /gi처럼 자유롭게 조합할 수 있습니다. 여기서 "i"는 대소문자를 구분하지 않고(ignore case) 일치 여부를 검사하고, "g"는 문자열 전체에서 일치하는 모든 부분을 찾습니다(global). 만약 두 플래그를 모두 사용하지 않으면 문자열에서 가장 먼저 발견된 일치 항목 하나만 치환되므로 주의해야 합니다.