웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

데이터베이스에 저장된 태그를 부등호가 보이도록 html 문서에 그대로 출력하는 방법

Last Modified : 2017-01-18 / Created : 2017-01-18
7,358
View Count

데이터베이스에 저장된 태그를 부등호가 보이도록 html 문서에 그대로 출력하는 방법에 대하여 알아보자! 사실 제목을 읽어보면 무슨 뜻인지 이해가 잘 되지 않을 수 있다... 쉽게 이해하기 위해서 아래와 같은 예를 들어보자. 만약 아래와 같은 일을 수행해야 한다면?

"<span> 태그를 배워보자!" 이 텍스트를 서버에 저장하고 나중에 불러와 제목 영역에 문자 그대로 출력할 수 있게한다. 우리는 다음과 같은 과정을 생각해볼 수 있다.

1. "<span> 태그를 배워보자!"를 인코딩한다.
2. 인코딩된 텍스트를 그래로 서버에 저장한다.
3. 클라이언트 요청에 의하여 인코딩된 텍스트를 데이터베이스에서 불러온다.
4. 불러온 데이터를 디코딩한다.
5. 이때 텍스트가진 html 태그 부등호(>, <)가 그대로 표현된다.


단순하게 인코딩, 디코딩하는 것만으로는 html 태그가 원하는 방식으로 표현되지 않는다. 만약 다음의 텍스트는 이렇게 보일 것이다.

<span> 태그를 배워보자!  -->  &lt;span&gt; 태그를 배워보자!

이렇게 되는 이유는 우리가 넣고자하는 html 태그 안에 텍스트 노드를 추가하는 경우 태그가 자동으로 변환되기 때문이다... 이 방법을 해결하기 위해 어떤 방법이 있을까?

가장 간단한 방법은 해당하는 요소의 텍스트값을 변환하는 방법이다. 자바스크립트의 정규표현식을 사용하거나 replace 함수를 사용하여 &lt를 <로 변경하는 등의 과정으로 해결할 수 있다. 물론 정규표현식을 사용하는 방법은 매우 간단하나 다른 방법도 존재한다.



# 제이쿼리를 사용한 꼼수


이 방법은 제이쿼리의 text() 그리고 html()을 함께 사용하는 방법이다. 이 메소드는 해당하는 요소가 가지는 값을 지정하거나 값을 불러올 수 있다. 우리는 값을 입력할 때 이 함수를 이용하여 위와 동일한 효과를 얻을 수 있다. 방법은 아래와 같다.

var response = '%3Cspan%3E%20%ED%83%9C%EA%B7%B8%EB%A5%BC%20%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90!';
인코딩된 값으로 '<span> 태그를 배워보자'와 같다. 받아온 값을 일단 아래처럼 디코딩하자.

var text = decodeURIComponent(response);
다시 디코딩한다.

var text1 = $('<span>').text(text).html();

만약 추가할 요소가 test 클래스를 가졌다고 한다면 다음과 같이 입력한다
$('.test').html(text1);

여기까지 제이쿼리를 사용한 방법 역시 알아보았다. 아래 방법 역시 매우 간단하지 않은가?

Previous

자바스크립트 코딩 스타일 중 알아두면 좋은 것들

Previous

자바스크립트 중단점을 활용한 디버깅 방법