text()를 이용한 html 제거

홈페이지를 제작하다보면 DB상에 있는 컨텐츠의 값을 가져올때 해당 내용안의 모든 html 태그 

ex) h1, a, p, span등을 가져올 경우가있다.

물론 상황에 따라 다르긴하지만 가져온후에 html를 제거하는법에 대해 생각해보다가

jquery의 text를 통해서 간단하게 삭제할수있어서 포스팅 해둔다.

 

일단은 text() 함수는

 

https://api.jquery.com/text/

.text() | jQuery API Documentation

html() 함수와는 다르게 모든 html태그를 통채로 가지고오는것이 아니라 각각의 html태그에 들어있는 내용들만 가지고 온다. 따라서 해당영역의 text를 each함수를 통해서 불러 오고 그것을 다시 그 영역에 넣어주는 방식으로 진행된다.

 

일단 html 코드부터 보면

<div id="sample">
 <h1>테스트 메모입니다. 1</h1>
 <h2>테스트 메모입니다. 2</h2>
 <h3>테스트 메모입니다. 3</h3>
 <h4>테스트 메모입니다. 4</h4>
 <h5>테스트 메모입니다. 5</h5>
</div>

 

아래는 jquery 코드

(function ($) {
  $(function () {
    $("#sample").each(function () {
      $(this).text($(this).text());
    });
  });
})(jQuery);

 

위의 말대로 each문을 통해서 해당영역의 html태그를 지워준다.

 

아래는 출력창 (위가 html태그 제거전, 아래가 html태그 제거후)