본문 바로가기
programming/javascript

자바스크립트 문자열 변환 replace 함수와 정규식 사용 javascript replace and regular expresstion

by 개코 - 개발과 코딩 2021. 11. 8.

replace 메서드는 자바스크립트 문자열을 변환하는 대표적인 메서드이다. replace 메서드의 몇가지 단점이 있는데 이것을 보완하기 위해 사용되는 것이 replaceAll 메서드를 사용하거나 혹은 정규식을 이용하는 방법이다.

자바스크립트 문자열 변환 replace 함수와 정규식 사용
javascript replace and regular expresstion

replace 함수를 사용하면 자바스크립트의 문자열의 일부분을 변환할 수 있다.

하지만 이런 replace 함수에도 단점은 존재한다.

대소문자를 구분하고, 중복된 문자열이 있을 경우 첫번째로 발견한 문자열만 변환된다.

그렇기에 나온 추가적인 방법은 replaceAll 이다.

뿐만 아니라 정규식을 사용하면 replace의 단점을 해소할 수 있다.

replace와 정규식

정규식은 자바스크립트에서 문자열의 규칙을 지정하는 것이기도 하다.

이 정규식을 사용하는 방법은 검색하면 많이 있으니 검색해 보자.

여기서 다루기에는 양이 많다.

replace 의 단점을 해소할 수 있는 것만 다룬다.

replace 의 단점은 대소문자를 구분하고 첫번째로 발견한 문자열만 변환할 수 있다고 했다.

대소문자를 구분하지 않고 문자열을 변환하고자 한다면 정규식 옵션 /i 을 사용한다.

검색된 전체 문자열을 변환하고자 한다면 정규식 옵션 /g 를 사용한다.

그냥 검색되 단어 모두 바꾸고자 한다면 replaceAll 메서드를 사용한다.

사용법은 아래와 같다.

String.replace(정규식문자열, "변경할 문자열")

샘플코드

이제 위에서 제시한 정규식을 사용하여 replace 메서드를 사용해 본다.

원본 문자열을 화면에 출력한 후에 replace 를 사용하고 replaceAll 메서드와 정규식을 사용한 문자열 변환 결과를 확인해 볼 것이다.

<!DOCTYPE html>
<html>
    <body>

        <h1>자바스크립트 문자열 자르기</h1>

        <script>

            console.log("----------");

            let vStr = "JAVASCRIPT, JAVASCRIPT, javascript, javascript, 웹프로그래밍";
            console.log(typeof(vStr), vStr);

            let vStr1 = vStr.replace("javascript", "자바스크립트");
            console.log(typeof(vStr1), vStr1);

            let vStr4 = vStr.replaceAll("javascript", "자바스크립트");
            console.log(typeof(vStr4), vStr4);

            let vStr2 = vStr.replace(/javascript/i, "자바스크립트");
            console.log(typeof(vStr2), vStr2);

            let vStr3 = vStr.replace(/javascript/g, "자바스크립트");
            console.log(typeof(vStr3), vStr3);

            let vStr31 = vStr.replace(/javascript/ig, "자바스크립트");
            console.log(typeof(vStr31), vStr31);
            
            console.log("----------");

        </script>
        
    </body>
</html>

결과화면을 보자.

첫번째 줄은 원본 문자열을 출력한 것이다.

replace 메서드를 사용하여 출력했을 때의 단점을 알 수 있다.

이 단점을 보완하여 replaceAll 과 정규식을 사용하여 replace 의 단점을 보완해 주었다.

자주 사용될 수 있으니 눈으로 많이 봐두자.

반응형

댓글