본문 바로가기
Javascript/Node.js

[Nodejs][ejs] HTML 이스케이프 문자 파싱, HTML 태그 적용

by 오늘의개발부 2019. 7. 24.
반응형

에디터를 사용해서 작성한 게시글이나 댓글의 내용은 디비에 저장될 때

안녕하세요 반갑습니다.

다음에 또 올게요.

요렇게 입력한 게

<p>안녕하세요 반갑습니다.</p>
<br/>
<p>다음에 또 올게요.</p>

이렇게 저장된다. 그러면 다시 이 게시글의 내용을 가져와 화면에 뿌려줄 때, html 태그를 바탕으로 게시글 작성 당시의 형식을 그대로 보여줄 수 있다.
하지만 막상 ejs에 넣어보니

&lt;p&gt;안녕하세요 반갑습니다.&lt;/p&gt;
&lt;br/&gt;
&lt;p>다음에 또 올게요.&lt;/p&gt;

이런 식으로 뿌려지는 모습을 확인했다. 태그들이 이스케이프 문자로 변환된 것이다. 물론 태그 적용도 당연히 안 된다. 그래서 부랴부랴 이스케이프 문자를 다시 태그로 되돌리기 위해 아주 직관적이고 간단한 함수를 만들었다.

function escapeParsr(a){
    var b = '';

    b = a.replace(/&lt;/g, '<');
    b = b.replace(/&gt;/g,'>');
    b = b.replace(/&nbsp;/g,' ');
    b = b.replace(/&amp;/g, '&');
    b = b.replace(/&quot;/g, '"');

    return b;
}

자, 이렇게 만들어놓고 적용을 앞두고 또다시 생기는 의문. 분명히 DB에는 태그형태로 잘 들어갔는데 언제 태그가 이스케이프 문자가 된 거지?
디버깅 모드로 돌려보니 resultJson에 담아 ejs로 보내기 전까지만 해도 멀쩡한 태그모양이다. 그럼 뭐가 문제였는가.

ejs 기본 사용법

<% %> : JS 코드 작성
<%_ _%> : 태그 내부 공백 제거 
<%# %> : 주석
<%= %> : 변수 출력(html escape 처리)
<%- %> : html escape 처리 없이 출력

사실 ejs에 대해서 한 번도 안 찾아보고 사용하기 시작했다.

jsp할 때 봤던 스크립트릿이랑 똑같구나! 그냥 쓰자!

그랬다. 이스케이프는 <%= %> 때문이었구나. 하하. 직접 함수 써서 어쩌고 할 거 없이 <%- %> 이렇게 간단하게 해결!

역시 기본이 중요해

반응형