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

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

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

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

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

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

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

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

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

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

1 2 var regex = new RegExp ( "#{(.*?)}" , "g" ); //변수찾기 ex.#{이름} var matches = templateContent.matchAll(regex); //모든 변수 찾기 #{(.*?)} 는 #{ } 의 형식으로 되어있으면서 { } 안에 아무 내용이 들어가있는 것을 모두 찾겠다는 뜻이다. g 는 모든 문자열 전체를 찾겠다는 뜻이다. matchAll 을 하면 템플릿 내용 중 위의 정규표현식에 해당하는 모든 문자를 찾겠다는것이다. 위의 템플릿 내용으로 예시를 들면 matches 변수에는 #{이름} , #{판매자} 가 들어가게 된다. 이제 변수명의 갯수만큼 텍스트박스를 그려주도록 하자.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 for ( let m of matches) { var cnt = 0 ; rules.find((element, index, array) = > { if (element[ 'key' ] = = m[ 1 ]) //변수가 이미 배열에 담겨있으면 화면에 그려주지 않기 cnt + + ; }); if (cnt = = 0 ) { html = "" ; html + = "" + m[ 1 ] + "" ; html + = "" + "" ; html + = "" ; $( "#variableList" ).append(html); var rule = {}; rule[ 'key' ] = m[ 1 ]; rules.push(rule); } }

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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 에 원본내용을 담는 변수를 선언한다.

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

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

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

from http://jylee-dev.tistory.com/11 by ccl(A) rewrite - 2021-10-08 12:00:20