HTML entity와 변환

HTML entity란?

API 응답을 받다보면 간혹 <이나   처럼 이상한 문자가 포함되는 경우가 있습니다.

HTML 예약어라고도 하는데 이는 일부 특수문자가 HTML 문법과 충돌할 수 있어 변환시켜 전송하는 것입니다.

<, >와 같은 특수문자가 해당합니다.

해당하는 특수문자의 종류

• 자주 사용되는 특수문자

기호	Entity Name	Entity Number
<	&lt;	&#60;
>	&gt;	&#62;
&	&amp;	&#38;
"	&quot;	&#34;
'	&apos;	&#39;

• 그 외의 특수문자

기호	Entity Name	Entity Number
(공백)	 	 
¢	¢	¢
£	£	£
¥	¥	¥
€	€	€
©	©	©
®	®	®

이 외에도 불어, 포르투갈어등에서 사용되는 Õ, à과 같은 글자도 해당됩니다.

변환 방법

HTML entity로 표현된 특수문자를 원래대로 다시 변환하기 위해서는 라이브러리를 사용하거나 직접 함수를 작성할 수 있습니다.

JS의 내장 메소드로 있던 unescape 메소드는 16진수로 표현된 특수문자를 변환하는것이기 떄문에 HTML entity와는 관련이 없습니다.

대표적인 라이브러리는 Lodash, unescape js와 같은 라이브러리가 있습니다.

// Lodash
import _ from 'lodash';

console.log(_.unescape("<"));

// unescape js
const decode = require('unescape');

console.log(decode("<"));

함수를 직접 작성한다면 아래와 같이 작성할 수 있습니다.

const regex = /&(amp|lt|gt|quot|#39);/g;
const chars = {
    '&': '&',
    '&lt;': '<',
    '&gt;': '>',
    '&quot;': '"',
    '&#39;': "'"
}  

function unescape(str) {
    if(regex.test(str)) {
        return str.replace(regex, (matched) => chars[matched] || matched);
    }
}

다만, 이 함수는 자주 사용되는 5개 특수문자만 포함시킨것이고 다른 특수문자도 원한다면 로직에 추가해주어야 합니다.