Program Tip

jQuery로 HTML 태그를 제거하는 방법은 무엇입니까?

programtip 2020. 11. 6. 19:04
반응형

jQuery로 HTML 태그를 제거하는 방법은 무엇입니까?


문자열에서 HTML 태그를 제거하고 싶습니다. 예를 들어 다음 문자열이 있다고 가정합니다.

 <p> example ive got a string</P>

를 제거하고 <p><p>"example ive got a string"을 반환 하는 함수를 어떻게 작성할 수 있습니까?


안전한 방법은 콘텐츠를 제대로 탈출 브라우저 TextNode에 의존하는 것입니다. 예를 들면 다음과 같습니다.

function stripHTML(dirtyString) {
  var container = document.createElement('div');
  var text = document.createTextNode(dirtyString);
  container.appendChild(text);
  return container.innerHTML; // innerHTML will be a xss safe string
}

document.write( stripHTML('<p>some <span>content</span></p>') );
document.write( stripHTML('<script><p>some <span>content</span></p>') );

여기서 기억해야 할 점은 브라우저가 html 문자열 ( innerHTML, outerHTML)에 액세스 할 때 TextNode의 특수 문자를 이스케이프한다는 것 입니다. 이에 비해 텍스트 값 ( innerText, textContent)에 액세스 하면 원시 문자열이 생성됩니다. 즉, 안전하지 않으며 XSS를 포함 할 수 있습니다.

jQuery 를 사용하는 경우 사용 .text()은 안전하고 이전 버전과 호환됩니다. 이 질문에 대한 다른 답변을 참조하십시오.

간단한 방법 순수 자바 스크립트는 브라우저에서 작업하는 경우는 <= 인터넷 익스플로러 8은 다음과 같습니다

string.replace(/(<([^>]+)>)/ig,"");

그러나 정규식으로 HTML을 구문 분석하는 데 문제가 있으므로 매우 좋은 보안을 제공하지 않습니다. 또한 이것은 HTML 문자 만 처리하므로 완전히 xss 안전하지 않습니다.


.text()기능 사용 :

var text = $("<p> example ive got a string</P>").text();

업데이트 : Brilliand가 아래에서 지적했듯이 입력 문자열에 태그가 포함되어 있지 않고 운이 좋지 않으면 CSS 선택기로 취급 될 수 있습니다. 따라서이 버전은 더 강력합니다.

var text = $("<div/>").html("<p> example ive got a string</P>").text();

이것은 URL 이미지를 가져오고 일부 항목에서 p 태그를 이스케이프하는 예제입니다.

이 시도:

$('#img').attr('src').split('<p>')[1].split('</p>')[0]

요소의 innerHTML을 유지하고 가장 바깥 쪽 태그 만 제거하려면 다음과 같이 할 수 있습니다.

$(".contentToStrip").each(function(){
  $(this).replaceWith($(this).html());
});

기존 분할 기능을 사용할 수 있습니다.

쉽고 고르지 못한 예 :

var str = '<p> example ive got a string</P>';
var substr = str.split('<p> ');
// substr[0] contains ""
// substr[1] contains "example ive got a string</P>"
var substr2 = substr [1].split('</p>');
// substr2[0] contains "example ive got a string"
// substr2[1] contains ""

예는 분할이 어떻게 작동하는지 보여주기위한 것입니다.

참고 URL : https://stackoverflow.com/questions/13140043/how-to-strip-html-tags-with-jquery

반응형