특정 문자열을 원하는 문자열로 변경하기

카카오톡 알림톡 보낼때 템플릿에 #{이름} 이런식으로 변수를 설정할 수 있는데,

텍스트박스에 입력할때마다 #{이름} 이 홍길동 이런식으로 바뀌는것을 하고자 한다.

 

#{이름} 님 안녕하세요~ #{판매자} 입니다.

 

라고 되어있고 텍스트박스에 입력을 해서 내용을 바꾸려고 하는데,

홍길동의 ㅎ 을 누르자마자 ㅎ 님 안녕하세요~ 라고 바로 바뀌어버려서 원하는대로 되지않았다. (키보드의 keyup이벤트)

 

우선 변수형태인 #{이름} 과 #{판매자} 를 뽑아오기 위해 다음과 같이 선언한다.

변수형태가 2개 이상이기 때문에 matchAll 을 사용했다.

 

templateContent = 템플릿 내용 = #{이름} 님 안녕하세요~ #{판매자} 입니다.

var regex = new RegExp("#{(.*?)}", "g");//변수찾기 ex.#{이름}
var matches = templateContent.matchAll(regex);//모든 변수 찾기

 

for (let m of matches) {
        var cnt = 0;
        rules.find((element, index, array) => {
            if (element['key'] == m[1])//변수가 이미 배열에 담겨있으면 화면에 그려주지 않기
                cnt++;
        });
        if (cnt == 0) {
            html = "<tr>";
            html += "<th>" + m[1] + "</th>";
            html += "<td>" + "<input type='text' class='input-large' id='" + "txt" + m[1] + "'></td>";
            html += "</tr>";
            $("#variableList").append(html);
            var rule = {};
            rule['key'] = m[1];
            rules.push(rule);
        }
    }

for문을 처음 들어왔을 때 m은 이름에 대한 정보이고 m[1] 로 할시에 "이름" 이라는 텍스트를 얻을 수 있다.

ruels 는 변수들이 담겨있는 배열이며, 이미 텍스트박스가 그려진 변수라면 더이상 추가되지 않도록 하는것이다.

 

ruels.find((element, index, array) => 배열을 돌면서 = for문과 같이 동작하는것같다.

 

 

 

이제 키보드에서 손을 뗄때마다 템플릿 내용이 바뀌도록 해보자.

 

 

function insert(matches) {
    for (let m of matches) {
        var doc = document.getElementById("txt" + m);
        doc.addEventListener('keyup', function (e) {
            var changeContent = tempMsg;//원본 
            for (var i = 0; i < rules.length; i++) {
                var regex = new RegExp("#{" + rules[i]['key']+ "}", "g");
                var value = $("#txt" + rules[i]['key']).val();
                if (value != '') {
                    changeContent = changeContent.replace(regex, value);
                }
            }
            $("#sms_field").val(changeContent);
        });
    }
 
}

matches 에는 이름, 판매자가 들어있다. (m[1] 들을 저장했다.)

var doc = document 노드에서 id 가 "txt이름" 인 텍스박스를 찾는다.

doc.addEventListener keyup => 키보드에서 손을 뗄때 이벤트를 추가한다.

tempMsg 에는 템플릿의 내용 원본을 저장해놓는다. (#{이름} 님 안녕하세요~ #{판매자} 입니다.)

그리고 changeContent 에 원본내용을 담는 변수를 선언한다.

그러면 키보드에서 손을땔때마다 원본 내용을 다시 읽어들여서 내용을 바꾸기 때문에,

홍길동이라는 글자를 입력해도 ㅎ 만 입력해서 #{이름} 이 리플레이스 되는것이 아니라

#{이름} 이 계속해서 ㅎ, 호, 홍 홍길동 이렇게 리플레이스 될수가 있게된다.