본문 바로가기
programming/javascript

자바스크립트 문자열 변환 replace 함수 사용 javascript replace method

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

자바스크립트의 replace 메서드는 문자열을 변환하는 대표적인 메서드이다. 어떤 문자열에서 변환할 문자열을 찾아 다른 문자열로 변환을 할 수 있다. 규칙적인 문서를 가공할 필요가 있을 때 replace 메서드는 유용하다. 문서양식이나 서식 등의 프로그램에 자주 사용되기도 한다.

자바스크립트 문자열 변환 replace 함수 사용
javascript replace method

자바스크립트에서 문자열을 변환하고 수정할 떄 replace 메서드를 사용한다.

replace 메서드는 특정 문자열을 다른 문자열로 바꿔주는 대표적인 메서드이다

자주 사용되고 많이 사용된다.

하지만, replace 메서드라 해도 만능은 아니다.

단점 또한 존재한다.

replace 사용 문자열 변환

replace 메서드를 사용하여 문자열을 변환하려면 인자값에 원본문자열과 바꿀문자열이 들어간다.

어렵지 않은 구조이다.

아래처럼 작성하면 긴 문자열에서 원본문자열을 찾아 바꿀문자열로 변환된다.

편한만큼 많이 사용된다.

string.replace("원본문자열", "바꿀문자열")

replace 주의사항

replace 메서드라고 해서 만능은 아니다.

몇가지 단점이 있다.

문자열 변환의 대표적인 메세드지만 몇가지 단점 때문에 곤혹을 치를 수 있다.

  • 대소문자를 구분한다.
  • 중복되는 단어일 경우 첫번째에 나오는 단어만 변환된다.

대소문자를 구분하는 것은 당연할 수 있다.

하지만, 중복되는 단어에 대해 자바스크립트의 replace 메서드는 첫번째로 발견된 단어만 변환한다.

이것 때문에 다른 정규식을 사용할 수도 있고, replaceAll 메서드를 사용할 수 있다.

replaceAll 또한 replace 메서드와 사용법은 같다.

샘플코드

직접 코드를 만들고 결과화면을 확인해 보자.

위에서 언급한 내용들에 대해 replace 메서드를 사용해 본다.

replace 문자열 변환의 단점을 보완한 replaceAll 메서드를 사용하고 비교해 보면 된다.

<!DOCTYPE html>
<html>
    <body>

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

        <script>

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

            let vStr = "web, python, 파이썬, 자바스크립트, 파이썬, 웹프로그래밍";

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

            let vStr2 = vStr.replace("파이썬", "Python");
            console.log(typeof(vStr2), vStr2);

            let vStr4 = vStr.replaceAll("파이썬", "Python");
            console.log(typeof(vStr4), vStr4);

            let vStr3 = vStr.replace("Web", "웹");
            console.log(typeof(vStr3), vStr3);
            
            console.log("----------");

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

결과화면과 위의 코드를 비교해 보면 알겠지만

자바스크립트의 replace 메서드는 대소문자를 구분하고 중복되는 문자열에 대해선 첫번째로 발견한 문자열만 변환한다.

어떤 문자열에서 특정 문자열을 모두 변환하려면 replaceAll 을 사용하여 모두 변환하면 된다.

반응형

댓글