티스토리 뷰

Javascript

Javascript에서 윈도우 이모지(Windows Emoji) 체크하는 방법

travelpark 2023. 6. 9. 10:15
반응형

최근에 설계된 사이트들에서는 대부분 일어나지 않을 일이지만 오래된 사이트의 경우 문자열 저장 시 DB 컬럼 타입 문제로 특수문자가 제대로 저장되지 않는 경우가 있습니다. 윈도우 이모지도 그 중 하나인데 사용자가 입력하는 게시판이나 페이지 같은 경우 별도 체크를 하지 않으면 문자열이 깨진 상태로 저장되기도 합니다.

 

보통 특수문자의 경우 정규식이나 기타 방법을 사용해 입력할 수 없도록 체크하고 있지만 윈도우 이모지의 경우는 일반적으로 체크하지 않는 경우가 많은 것 같습니다. 가장 좋은 방법은 입력란에 맞는 특정 문자열 말고는 입력을 못하도록 막는 방법일 수 있겠지만 그렇지 않은 경우 javascript로 이모지를 체크하는 방법에 대해 알아보겠습니다.

function containsWindowsEmoji(text) {
  const windowsEmojiRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
  return windowsEmojiRegex.test(text);
}

// 테스트 예시
console.log(containsWindowsEmoji("Hello World!")); // false
console.log(containsWindowsEmoji("Hello! 😊🌍")); // true

위의 예제에서 보이는 정규식 [\uD800-\uDBFF][\uDC00-\uDFFF]는 윈도우 이모지를 나타내는 유니코드 범위입니다. 이 정규식을 사용하면 특정 텍스트에 윈도우 이모지의 존재 여부를 확인할 수 있습니다.

 

containsWindowsEmoji 함수를 사용하면 "Hello World!" 에는 윈도우 이모지가 포함되어 있지 않으므로 false가 반환되지만 "Hello! 😊🌍"에는 윈도우 이모지가 포함되어 있기 때문에 true가 반환됩니다.

 

다음은 해당 함수를 간단히 테스트해볼 수 있는 Html 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Windows Emoji Test</title>
  <script>
    function containsWindowsEmoji(text) {
      const windowsEmojiRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
      return windowsEmojiRegex.test(text);
    }

    function testContainsWindowsEmoji() {
      const inputText = document.getElementById("inputText").value;
      const result = containsWindowsEmoji(inputText);
      document.getElementById("result").innerHTML = `Contains Windows Emoji: ${result}`;
    }
  </script>
</head>
<body>
  <h1>Windows Emoji Test</h1>
  <label for="inputText">Input Text:</label>
  <input type="text" id="inputText" />
  <button onclick="testContainsWindowsEmoji()">Test</button>
  <p id="result"></p>
</body>
</html>

위 코드로 html 파일 만들어 실행하시면 직접 문자열에 윈도우 이모지를 넣어보시고 true, false를 체크해보실 수 있습니다. 참고로 이 페이지에서는 윈도우 이모지만을 체크해볼 수 있고 다른 이모지까지는 체크할 수 없습니다. 감사합니다.

반응형

'Javascript' 카테고리의 다른 글

Javascript와 JQuery로 체크박스 전체선택해제 하기  (0) 2023.06.20
Javascript와 JQuery로 체크박스 선택된 값 가져오기  (0) 2023.06.14
Javascript로 모바일 체크 하는 법(navigator.userAgent)  (0) 2023.06.10
Javascript로 iframe에서 부모창 함수 제어하기  (0) 2022.06.16
Javascript 와 JQuery에서 iframe 내부 함수 접근 방법  (0) 2022.06.14
Javascript 와 JQuery 에서 focus()로 포커스 이동하기  (0) 2022.05.24
Javascript로 Html Title 변경해주기  (0) 2022.05.22
공유하기 링크
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함