Javascript - replace, replaceAll [문자 치환하기]

replace()와 정규식(RegExp)을 활용해 replaceAll() 만들기

 

<script>   
     
    function insertdata()
     {    
        //Ajax를 이용하여 DB에서 json으로 값을 채움

        var arr = [       
                     {
                          "word" : "프레임워크",
                          "reword" : "FrameWork"
                     },
                     {
                          "word" : "노드",
                          "reword" : "NODE"
                     },
                     {
                          "word" : "모듈",
                          "reword" : "MODULE"
                     },
                     {
                          "word" : "Server",
                          "reword" : "서버"
                     },
                     {
                          "word" : "웹",
                          "reword" : "WEB"
                     }
                ];

         return arr;
     }

    const arr_json = insertdata();


    function change(id)
    {   
        for(i=0; i < arr_json.length; i++)
        {        
            var txt = id.value;                     //원본 문자(1개바꾼후 다시불러옴)
            var findText = arr_json[i].word;        //찾을 문자
            var replaceText = arr_json[i].reword;   //바꿀 문자             

            var changedText = txt.replace(new RegExp(`\\${findText}`, 'gi'), replaceText);

            id.value = changedText;                 //변환 문자(1개바꾼후 다시 바꿈)
        }
    }

</script>

<button onclick="change(text1)">바뀜</button>
<textarea id="text1" style="width: 300px; height: 200px;">웹 서버는 웹 브라우저에서 웹 문서를 요청할 때 필요한 기능을 수행합니다.
이 책에서는 노드를 사용해서 Server를 만들 것이므로 먼저 노드에서 제공하는 다향한 모듈을 사용하여 웹 서버를 만들어 볼 것입니다.
앞에서 살펴본 서버 유형을 다시 한 번 확인 다음 여러분이 언제, 어디에서, 무엇을 위해 웹 서버를 사용할지 스스로 체크해 보세요
여러분이 만들 웹 서버는 웹 프레임워크인 익스프레스로 기본구조를 만들고 데이터를 저장하거나 조회합니다.</textarea>

replace() 함수는 기본 동작은 매칭 대상이 되는 첫 번째 문자를 반환해 새로운 문자를 반환하는 것입니다. 그렇기 때문에 모든 문자 치환 같은 기능은 replace()의 옵션 중 정규식을 사용해서 만들어야 합니다.

 

 replace() 인자로 RegExp 식을 만들어 대상이 되는 모든 문자를 찾도록 합니다. 여기서 "g"를 쓰면 대소문자를 구분하고 "gi"를 사용하면 대소문자 구분을 하지 않습니다.

 

출처 : https://7942yongdae.tistory.com/47