html 특수 문자 (> < &) 자바스크립트로 치환하기

개발을 하다보면 특수문자가 HTML 엔티티로 표기되어 치환이 필요한 경우가 있습니다.

 

아래 처럼 간단하게 Jquery를 사용해서 처리하는 방법이 있는데 이 방법은 XSS공격에 취약해서 다른 방식을 사용해야 합니다.

 

1. jquery를 이용한 변환 방법 (XSS 공격에 취약함)

$('<div/>').text('&gt; 특수문자 처리 &lt;').html();

2. 안전한 변환 방법

function decodeHTMLEntities (str) {
            if(str !== undefined && str !== null && str !== '') {
                str = String(str);

                str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
                str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
                var element = document.createElement('div');
                element.innerHTML = str;
                str = element.textContent;
                element.textContent = '';
            }

            return str;
        }

 

* HTML 엔티티 정보 (이외에도 많이 있음)

표시되는 문자	숫자 표현	문자 표현
-	�-	-
space			-
space	
	-
-	-	-
space	 	-
!	!	-
"	"	"
#	#	-
$	$	-
%	%	-
&	&	&
'	'	-
(	(	-
)	)	-
*	*	-
+	+	-
,	,	-
-	-	-
.	.	-
/	/	-
0 - 9	0-9	-
:	:	-
;	&#59;	-
<	&#60;	&lt;
=	&#61;	-
>	&#62;	&gt;
?	&#63;	-
@	&#64;	-
A - Z	&#65;-&#90;	-
[	&#91;	-
\	&#92;	-
]	&#93;	-
^	&#94;	-
_	&#95;	-
`	&#96;	-
a - z	&#97;-&#122;	-
{	&#123;	-
|	&#124;	-
}	&#125;	-
~	&#126;	-
-	&#127;-&#159;	-
	&#160;	&nbsp;
¡	&#161;	&iexcl;
￠	&#162;	&cent;
￡	&#163;	&pound;
¤	&#164;	&curren;
￥	&#165;	&yen;
|	&#166;	&brvbar;
§	&#167;	&sect;
¨	&#168;	&uml;
ⓒ	&#169;	&copy;
ª	&#170;	&ordf;
≪	&#171;	&laquo;
￢	&#172;	&not;
	&#173;	&shy;
?	&#174;	&reg;
&hibar;	&#175;	&macr;
°	&#176;	&deg;
±	&#177;	&plusmn;
²	&#178;	&sup2;
³	&#179;	&sup3;
´	&#180;	&acute;
μ	&#181;	&micro;
¶	&#182;	&para;
·	&#183;	&middot;
¸	&#184;	&cedil;
¹	&#185;	&sup1;
º	&#186;	&ordm;
≫	&#187;	&raquo;
¼	&#188;	&frac14;
½	&#189;	&frac12;
¾	&#190;	&frac34;
¿	&#191;	&iquest;
A	&#192;	&Agrave;
A	&#193;	&Aacute;
A	&#194;	&Acirc;
A	&#195;	&Atilde;
A	&#196;	&Auml;
A	&#197;	&Aring;
Æ	&#198;	&AElig;
C	&#199;	&Ccedil;
E	&#200;	&Egrave;
E	&#201;	&Eacute;
E	&#202;	&Ecirc;
E	&#203;	&Euml;
I	&#204;	&Igrave;
I	&#205;	&Iacute;
I	&#206;	&Icirc;
I	&#207;	&Iuml;
Ð	&#208;	&ETH;
N	&#209;	&Ntilde;
O	&#210;	&Ograve;
O	&#211;	&Oacute;
O	&#212;	&Ocirc;
O	&#213;	&Otilde;
O	&#214;	&Ouml;
×	&#215;	&times;
Ø	&#216;	&Oslash;
U	&#217;	&Ugrave;
U	&#218;	&Uacute;
U	&#219;	&Ucirc;
U	&#220;	&Uuml;
Y	&#221;	&Yacute;
Þ	&#222;	&THORN;
ß	&#223;	&szlig;
a	&#224;	&agrave;
a	&#225;	&aacute;
a	&#226;	&acirc;
a	&#227;	&atilde;
a	&#228;	&auml;
a	&#229;	&aring;
æ	&#230;	&aelig;
c	&#231;	&ccedil;
e	&#232;	&egrave;
e	&#233;	&eacute;
e	&#234;	&ecirc;
e	&#235;	&euml;
i	&#236;	&igrave;
i	&#237;	&iacute;
i	&#238;	&icirc;
i	&#239;	&iuml;
ð	&#240;	&eth;
n	&#241;	&ntilde;
o	&#242;	&ograve;
o	&#243;	&oacute;
o	&#244;	&ocirc;
o	&#245;	&otilde;
o	&#246;	&ouml;
÷	&#247;	&divide;
ø	&#248;	&oslash;
u	&#249;	&ugrave;
u	&#250;	&uacute;
u	&#251;	&ucirc;
u	&#252;	&uuml;
y	&#253;	&yacute;
þ	&#254;	&thorn;
y	&#255;	&yuml;