Web에서 문자열 NFD -> NFC 로 변경하기

 

인터넷 Web브라우저로 복사하기를 했는데 한글이 늘어져 보이는 경우가 있다.

 

 

가령 같은 애국가를 타이핑했어도 실제 데이터는 다르다.

 

"NFC (윈도우 기본)" 으로 작성

동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세

"NFD (MacOS 기본)" 으로 작성

동해물과 백두산이 마르고 닳도록

하느님이 보우하사 우리나라 만세

 

Chrome같은 브라우저가 기본적으로 한글을 표기할 때, NFD 문자열을 자동으로 NFC 로 치환해주지만

이것을 웹상에서 Ctrl + C를 눌러서 복사하게 되면 다른값으로 보이게 된다.

 

클립보드에서 보이는 값

 

메모장에서 보이는 값

 

이 값을 NFD-> NFC 로 변경하는 방법은 여러방법이 있는데 Javascript 에서 할수 있는 방법을 적어보고자 한다.

 

String.prototype.normalize()

 

로 치환 가능하다.

Mdn Web Docs 예제

// 결합된 한글 문자열

// U+D55C: 한(HANGUL SYLLABLE HAN)
// U+AE00: 글(HANGUL SYLLABLE GEUL)
var first = "\uD55C\uAE00";

// 정규형 정준 분해 (NFD)
// 정준 분해 결과 초성, 중성, 종성의 자소분리가 일어납니다.
// 일부 브라우저에서는 결과값 '한글'이 자소분리된 상태로 보여질 수 있습니다.

// U+1112: ᄒ(HANGUL CHOSEONG HIEUH)
// U+1161: ᅡ(HANGUL JUNGSEONG A)
// U+11AB: ᆫ(HANGUL JONGSEONG NIEUN)
// U+1100: ᄀ(HANGUL CHOSEONG KIYEOK)
// U+1173: ᅳ(HANGUL JUNGSEONG EU)
// U+11AF: ᆯ(HANGUL JONGSEONG RIEUL)
var second = first.normalize("NFD"); // '\u1112\u1161\u11AB\u1100\u1173\u11AF'

// 정규형 정준 결합 (NFC)
// 정준 결합 결과 자소분리 되었던 한글이 결합됩니다.

// U+D55C: 한(HANGUL SYLLABLE HAN)
// U+AE00: 글(HANGUL SYLLABLE GEUL)
var third = second.normalize("NFC"); // '\uD55C\uAE00'

console.log(second === third); // 같은 글자처럼 보이지만 false를 출력합니다.

 

 

웹상에서는 이런식으로 치환할 수도 있다.

 

// 모든 "tile-text" 클래스를 가진 <p> 요소를 선택합니다.
const elements = document.querySelectorAll('.tile-text');

// 각 요소의 텍스트 내용을 NFC로 normalize합니다.
elements.forEach(element => {
    // 현재 요소의 텍스트를 가져옵니다.
    const originalText = element.textContent;

    // NFC 방식으로 normalize한 후 다시 설정합니다.
    element.textContent = originalText.normalize('NFC');
});