Javascript에서 눈에 보이지 않는 특수문자를 처리하기

눈에 보이지 않는 문자로 인해 TTS(Text-To-Speech), 문자열 처리 등을 작업할때 애러가 뜨거나 고통받는 경우가 있습니다.

대표적으로 ZERO_WIDTH_SPACE (​), BACKSPACE_CHARACTER() 등이 있습니다.

이러한 문자들은 유저의 입력을 받을 때 항상 escape해서 제거해야 합니다.

JavaScript 문자열에서 제거해야 할 문자들은 주로 제어 문자(Control Characters)와 일반적으로 사용되지 않는 특수 문자들입니다.

주요 제거 대상 문자

1. 제어 문자 (Control Characters)

ASCII 코드 0~31번, 그리고 127번에 해당하는 문자들은 텍스트 표현에 영향을 미치는 제어 문자입니다. 이들은 일반적으로 텍스트 처리에서 필요하지 않으므로 제거하는 것이 좋습니다.

제어 문자 이름	설명	ASCII	Unicode
Null	Null 문자	0	\u0000
Start of Header (SOH)	헤더 시작	1	\u0001
Start of Text (STX)	텍스트 시작	2	\u0002
End of Text (ETX)	텍스트 끝	3	\u0003
End of Transmission (EOT)	전송 종료	4	\u0004
Enquiry (ENQ)	문의 문자	5	\u0005
Acknowledge (ACK)	수신 확인	6	\u0006
Bell (BEL)	벨 소리	7	\u0007
Backspace (BS)	백스페이스	8	\u0008
Horizontal Tab (TAB)	수평 탭	9	\u0009
Line Feed (LF)	줄 바꿈	10	\u000A
Vertical Tab (VT)	수직 탭	11	\u000B
Form Feed (FF)	페이지 넘김	12	\u000C
Carriage Return (CR)	캐리지 리턴	13	\u000D
Escape (ESC)	이스케이프	27	\u001B
Delete (DEL)	삭제 문자	127	\u007F

2. 비가시 문자 (Non-Visible Characters)

• Zero Width Characters
  Zero-width 문자들은 텍스트에 영향을 미치지 않으나, 의도치 않게 삽입되거나 악의적인 목적으로 사용될 수 있습니다.
  • \u200B (Zero Width Space)
  • \u200C (Zero Width Non-Joiner)
  • \u200D (Zero Width Joiner)
  • \u2060 (Word Joiner)
• BOM (Byte Order Mark)
  파일 시작에 나타날 수 있는 BOM은 가끔 텍스트 내에 혼입될 수 있습니다.
  • \uFEFF (Byte Order Mark)

---

전체 문자 제거 정규식

다음 정규식을 사용하면 위에서 언급한 문자들을 한 번에 제거할 수 있습니다.

const removeUnwantedChars = (str) => {
    return str.replace(/[\u0000-\u001F\u007F\u200B-\u200D\u2060\uFEFF]/g, '');
};

// 예제
const input = 'Hello\u0008World\u200B\uFEFF!';
console.log(removeUnwantedChars(input)); // "HelloWorld!"

정규식 설명

• [\u0000-\u001F]: ASCII 제어 문자(0~31).
• \u007F: Delete 제어 문자.
• \u200B-\u200D: Zero-width 관련 문자.
• \u2060: Word Joiner.
• \uFEFF: BOM.

---

추가적으로 고려할 문자

• Soft Hyphen (\u00AD): 텍스트 줄바꿈을 위한 하이픈, 렌더링되지 않을 수 있음.
• Non-breaking Space (\u00A0): 일반 공백과 다르며, 종종 혼동을 일으킴.

const removeAdditionalChars = (str) => {
    return str.replace(/[\u0000-\u001F\u007F\u200B-\u200D\u2060\uFEFF\u00AD\u00A0]/g, '');
};

// 예제
const input = 'Hello\u00ADWorld\u00A0!';
console.log(removeAdditionalChars(input)); // "HelloWorld!"

---

최종 정리

위 코드와 정규식을 활용하면 제어 문자, 비가시 문자, 기타 특수 문자들을 효과적으로 제거할 수 있습니다. 처리 대상 문자는 필요에 따라 추가하거나 제거하면 됩니다.