자바스크립트에서 문자열을 검색해서 변경할때에 변수를 이용하여 변경하는 방법, 정규식을 이용하여 모든 문자열을 검색하는 방법을 소개합니다.

아래의 스크립트 예제는 id 값이 orignText 라는 textarea 의 내용을 가져와서 transArray 에 있는 과일의 이름을 찾아서 해당 과일 이름에 * 표시를 추가하여 넣는 기능을 구연해 본 예제입니다. 여기에서 핵심은 테스트를 찾아서 변경하는 부분인데요. 일반적으로 하나의 텍스트만 변경을 하지만 텍스트의 모든 내용을 검색해서 변환하는 방법을 구현해 보았습니다. 또한 공백을 제외한 입력된 텍스트의 길이 계산하는 방법도 표현해 보았습니다. 자바스트립트 배열과 문자열을 찾아서 변경하는 부분과 정규식을 이용한 문자열 검색 부분에서 조금이나마 도움이 되셨으면 좋겠습니다.

<script type="application/javascript">
    $( document ).ready(function() {


        $('#orignText').keyup(function (event) {
           var data = $(this).val().replace(/ /g, '').replace(/\n/g, '');
           var length = data.length;
           $('.length').text(length);
           //console.log(data.length);

        });

        $('#TransBtn').click(function () {
            var char = '*';
            var transArray = Array( '수박', '딸기', '사과', '배', '토마토', '바나나');
            var newTransArray = Array();
            transArray.forEach(function(keyword){
                var newKeyword='';

               for(var i=0; i<keyword.length; i++){
                    if(i==0 || i==keyword.length)
                        newKeyword += keyword[i];
                    else
                        newKeyword += char + keyword[i];
               }
               //console.log(keyword);
               newTransArray.push(newKeyword);
            });
            //console.log(newTransArray);

            var originText = $('#orignText').val();
            var newOrignText= originText;
            for(var i=0; i<transArray.length; i++){
                var findStr = transArray[i];
                var toStr = newTransArray[i];
                var regExp = new RegExp(findStr, "g");
                newOrignText = newOrignText.replace(regExp, toStr);
                //console.log(findStr+','+toStr);
            }

            //console.log(newOrignText);

            $('#orignText').val(newOrignText);

        });

    });
</script>

위의 예제에서 처음에 나오는 부분은 아래와 같습니다.

$('#orignText').keyup(function (event) {

   // 이 부분에서 입력된 텍스트에서 공백을 찾아서 제거하고 그 다음에 엔터키 문자를 공백으로 만듭니다.

   var data = $(this).val().replace(/ /g, '').replace(/\n/g, ''); 

    // 아래는 모든 공백들이 제거된 문자열에서 길이는 구하는 부분입니다.

   var length = data.length;

   // 구해진 문자열 길이를 class 값이 length 인 부분에 텍스트 값으로 넣어줍니다.

   $('.length').text(length); 

});

그 다음으로 나오는 부분은 아래와 같은데요.. 우선 char 변수에 특수문자 * 을 넣었구요.  transArray 라고 선언하여 Array 타입으로 과일 이름들을 넣었습니다. 그리고 특수문자가 포함되어 들어가서 저장될 배열인 newTransArray 를 배열로 선언하였습니다.

 $('#TransBtn').click(function () {

    var char = '*';

    var transArray = Array( '수박', '딸기', '사과', '배', '토마토', '바나나');

    var newTransArray = Array();

    // transArray 를 모두 검색할때 forEach 를 쓰게 되는데요. 안에 있는 keyword 값이 해당 배열의 값이 됩니다.

    transArray.forEach(function(keyword){

var newKeyword='';

       // 아래는 과일의 이름의 길이만큼 for 문으로 돌면서 맨 처음과 맨 끝에는 특수문자가 없이 그 중간에만 넣도록 하는 부분입니다.

       for(var i=0; i<keyword.length; i++){

    if(i==0 || i==keyword.length)

newKeyword += keyword[i];

    else

newKeyword += char + keyword[i];

       }       

      // 아래의 push 는 새로 만들어진 문자열을 newTransArray 에 새로 추가하여 넣으라는 의미입니다.

       newTransArray.push(newKeyword);

    });

   

    // 아래의 부분은 원본 과일 이름을 특수문자가 포함된 과일 이름으로 변경하는 부분입니다. 우선은 입력된 텍스트 값을 읽어서 orignText 에 저장합니다. 그리고 그 값을 새로 저장되어 바뀔 newOrignText 에 넣어줍니다. 물론 orignText 에 넣어도 되지만 혹시나 원본 텍스트를 사용할지 몰라서 새로운 변수에 넣었습니다.

    var originText = $('#orignText').val();

    var newOrignText= originText;

    for(var i=0; i<transArray.length; i++){

var findStr = transArray[i];

var toStr = newTransArray[i];

        // 아래에 있는 부분은 정규화를 의미하는 데요. 보통은 string.replace(/찾는 문자/g, '변환될 문자'); 형식으로 사용합니다. 그런데 찾는 문자를 변수로 사용하게 될 경우에는 어떻게 해야하나 저도 고민을 했었는데요. 바로 정규식을 이용하면 됩니다. 참고로 g 는 모든 문자열을 검색할 수 있도록 도와줍니다.

var regExp = new RegExp(findStr, "g");

        // 아래의 부분은 위에서 설정한 정규식으로 과일이름 배열에 있는 문자를 찾아서 변경하는 부분입니다.

newOrignText = newOrignText.replace(regExp, toStr);

    }

     // 새롭게 변경되어진 텍스트를 다시 원본 텍스트인 teaxarea 에 넣어줍니다.

    $('#orignText').val(newOrignText);

});