[javascript] emoji 입력값 필터링 치환 삭제 정규식 regexp

모바일이 더 주류가 된 세상이다.
아니 이미 모바일이 주류가 된 지는 오래긴 하지,,,

점차적으로 사용자가 입력하는 값에 이모지 emoji 를 입력하는 경우가 왕왕 발생하고 있다.

모바일에서 만나볼 수 있는 이모지

상품명 등에 고객에게 어필하기 위한 문구를 만드는 과정에서 좀 더 돋보기게 하기 위해 사용할 수도 있다.

최근에 본 것 중에 가장 인상깊었던건 상품명에 쿨링감🧊 이라고 적어둔 업체가 있었는데 확실히 이모지가 있으면 색감도 있고 일반 글씨만 나열했을 때보다는 더 눈길이 가긴 한다.




하지만 제약이 필요한 경우도 있다.
외부와 인터페이스하는 값이나 이름, 이메일 주소 등에는 입력이 불가하도록 처리하는게 좋다.

물론 그런 값들에는 별도로 한글이나 영어만 입력가능하도록 하거나 입력값에 맞는 별도의 정규식을 적용하는 것이 가장 좋은 방법이지만, 본 포스팅은 모든 입력값에 대해 emoji 이모지 입력을 막고자 하는 경우에 공통 함수로 선언해서 호출하면 깔끔하게 처리가 가능한 함수를 소개하고자 한다.

물론 나의 빠른 퇴근을 위한 기록임 ^_^,,,
오늘의 나야 고생했어
미래의 내가 언젠가 또 일찍 퇴근할거란다

---

emoji 입력값 치환 function

function emojiReplace() {
	$(document).find("input[type=text], input[type=hidden], textarea").each(function(e) {
		var emojiPattern = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;
		if (emojiPattern.test($(this).val())) {
			$(this).val(($(this).val().replace(emojiPattern, "")).trim());
		}
	});
}

일단 완성형으로 내가 사용한 function부터 쓰고 내용을 설명하자면

• 이모지를 확인하기 위한 정규식을 선언하고
• 해당 정규식을 이용해서 화면 내 input text, hidden 및 textarea 값에 대해서 일치하는 값이 있는지를 test 함수를 통해 체크한다
• 물론 변형해서 원하는 element에만 적용시키거나 함수 전달인자로 특정값을 전달하는 방식으로도 응용하면 된다
• 정규식과 일치하는 값이 있다면 (=이모지가 포함된 문자열이라면) 값을 빈값으로 치환하고 반환한다

제일 먼저 해야할 일은 정규식을 서칭하는 일이라 구글링을 통해 여러 정규식을 혼합해서 후보군으로 처음에 도입했던 정규식

var emojiPattern1 = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gi;

잘 되는 것처럼 보였지만 숫자패드 모양의 이모지가 안걸러지는 문제가 있었다. 대신 그냥 숫자로 변환되어 나옴.
이걸 원한다면야 문제가 없지만 다른 문제도 있음.

한글 자음 또는 모음만 입력한 경우도 걸러내버린다.
ㅇㄴㅂㅂㅁㄴㄷㄹㅏㅑㅕㅓㅡㅏㅐㅠ 이런식으로 쓰면 이것도 이모지랑 같이 다 지워버린다
완성형 문자인 경우에만 살아남는 정규식임




결국 최종적으로 적용한 정규식

emoji 필터링을 위한 정규식 regulation expression for emoji filtering

var emojiPattern = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;

모든 이모지를 잘 걸러내주는데 이 정규식을 사용하는 경우 추가적인 처리가 필요하다.

$(this).val(($(this).val().replace(emojiPattern, "")).trim());

해당 정규식을 이용해서 replace 처리해 준 값을
한 번 더 감싸서 trim 처리해주는 것임,,,

이걸 안하면 의문의 공백이 하나 생겨서 기존에 처리하던 다른 정규식에서 올바른 값이 아니라고 나와버림
저걸 안감싸고 chain 형태로 연이어서 사용하면 replace 된 다음에 trim 될 줄 알았는데,,, 감싸야 제대로 적용된다


여튼 이렇게 이모지 입력값을 방지하기위한
정규식 적용 방법과 이모지 필터링 함수 예시까지
정리 끝!




아래의 링크 내용들을 참고하여 개발하였습니다

참고 링크

이모지 regexp
https://stackoverflow.com/questions/10992921/how-to-remove-emoji-code-using-javascript

입력가능한 이모지 목록 (Android, iOS 통합)
https://kr.piliapp.com/emoji/list/