JavaScript의 문자열에서 HTML 태그 제거
- 정규식으로 HTML 태그 제거
-
textContent로 HTML 태그 제거 - jQuery로 HTML 태그 제거
-
DOMParser로 HTML 태그 제거 - String-Strip-HTML 패키지로 HTML 태그 제거
이 문서에서는 예제와 함께 다양한 방법을 사용하여 문자열에서 HTML 태그를 제거하는 방법을 소개합니다.
정규식으로 HTML 태그 제거
문자열의 HTML 태그와 일치하는 정규식 패턴을 만들 수 있습니다. 따라서 각 일치 항목을 빈 문자열로 바꿀 수 있습니다.
이렇게 하면 문자열에서 HTML 태그가 효과적으로 제거됩니다.
다음 코드에서 HTML 태그를 대체하는 정규식 패턴을 정의했습니다. 단, 방탄은 아니다.
누구나 잘못된 형식의 HTML을 제공하여 정규식 패턴을 깨뜨릴 수 있습니다. 따라서 잘못된 형식의 HTML에 일부 JavaScript가 포함되어 있으면 실행될 수 있습니다.
또는 패턴이 전체 문자열을 제거하고 그 대가로 빈 문자열을 얻습니다.
let html = '<h1 class=\'header_tag\'>hello <i>world</i></h1>';
let cleanHTML = html.replace(/<\/?[^>]+(>|$)/gi, '');
console.log(cleanHTML);
출력:
hello world
이제 형식이 잘못된 HTML로 동일한 코드를 사용해 보세요.
let html = '<div data="score> 42">Hello</div>';
let cleanHTML = html.replace(/<\/?[^>]+(>|$)/gi, '');
console.log(cleanHTML);
출력:
42">Hello
textContent로 HTML 태그 제거
textContent 메서드는 HTML 문자열에서 텍스트를 반환합니다. 교차 사이트 스크립팅 공격을 방지하는 데 적합합니다.
아래 예제 코드에서 textContent를 사용하여 HTML 태그를 제거했습니다. 그러나 우리의 접근 방식을 사용할 때 다음 사항을 염두에 두십시오.
- HTML은
<div>요소 내에서 유효합니다.<body>또는<html>의 HTML이<div>요소 내에서 유효하지 않기 때문입니다. textContent메소드는<script>요소 내에 텍스트를 포함합니다. 따라서 문자열에<script>요소가 포함된 경우textContent가 포함된 이 메서드는 해당 내용을 반환합니다.- 이전 요점을 기반으로 HTML에
<script>요소가 없는지 확인합니다. - HTML이
null이 아닌지 확인하십시오. - HTML은 신뢰할 수 있는 출처에서 가져온 것입니다. 다음 HTML 코드가 이 메서드를 통과하기 때문입니다.
<img onerror='alert(\"Run Danger JavaScript\")' src=nonexistence>
예:
let html = '<h1 class=\'header_tag\'>hello <i>world</i></h1>';
let div = document.createElement('div');
div.innerHTML = html;
let text = div.textContent || div.innerText || '';
console.log(text);
출력:
hello world
<script> 요소를 포함하도록 문자열을 업데이트하는 경우:
let htmlWithScriptElement = '<script>alert("Hello world");<\/script>';
let html =
`<h1 class='header_tag'>hello <i>world</i> ${htmlWithScriptElement}</h1>`;
let div = document.createElement('div');
div.innerHTML = html;
let text = div.textContent || div.innerText || '';
console.log(text);
출력:
hello world alert("Hello world");
<script> 요소의 내용을 가져옵니다.
HTML이 신뢰할 수 있는 출처에서 온 것이어야 하는 마지막 지점에서 그렇지 않은 경우 비용이 많이 들 수 있습니다.
// This time the HTML contains code
// that'll get through stripping HTML tags
// with textContent
let html =
'<img onerror=\'alert("Run dangerous JavaScript")\' src=nonexistence>';
let div = document.createElement('div');
div.innerHTML = html;
let text = div.textContent || div.innerText || '';
console.log(text);
출력:
jQuery로 HTML 태그 제거
jQuery 라이브러리에는 HTML이 포함된 문자열에서 텍스트를 반환하는 .text() API가 있습니다. 그러나 JavaScript 기본 innerText 메서드를 사용할 수 있습니다.
그러나 jQuery의 접근 방식은 크로스 브라우저입니다. 다음 코드에서 주어진 문자열에서 HTML을 제거하기 위해 .text() API를 사용했습니다.
예:
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
let html = "<h1 class='header_tag'>hello <i>world</i></h1>";
console.log($(html).text());
</script>
</body>
출력:
hello world
한편, 이 접근 방식에서는 HTML이 신뢰할 수 있는 소스에서 제공되어야 합니다. 그렇지 않은 경우 임의의 JavaScript 코드를 실행할 수 있습니다.
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
let html = "<img onerror='alert(\"Run dangerous JavaScript\")' src=nonexistence>";
console.log($(html).text());
</script>
</body>
출력:
DOMParser로 HTML 태그 제거
DOMParser의 도움으로 HTML 코드를 구문 분석할 수 있습니다. 따라서 문자열에 HTML 코드가 포함된 경우 DOMParser 및 해당 parseFromSring() 메서드를 사용하여 HTML 태그를 제거할 수 있습니다.
또한 이 방법은 기사 앞부분에서 설명한 임의의 JavaScript를 방지합니다.
DOMParser.parseFromString()을 사용하여 아래 코드의 문자열에서 HTML 태그를 제거했습니다.
예:
function stripHTMLTags(html) {
const parseHTML = new DOMParser().parseFromString(html, 'text/html');
return parseHTML.body.textContent || '';
}
let html = '<h1 class=\'header_tag\'>hello <i>world</i></h1>';
console.log(stripHTMLTags(html));
출력:
hello world
한편 DOMParser.parseFromString()은 임의의 JavaScript 코드에 대해 빈 문자열을 반환합니다.
function stripHTMLTags(html) {
const parseHTML = new DOMParser().parseFromString(html, 'text/html');
return parseHTML.body.textContent || '';
}
let html =
'<img onerror=\'alert("Run dangerous JavaScript")\' src=nonexistence>';
console.log(stripHTMLTags(html));
출력:
<empty string>
String-Strip-HTML 패키지로 HTML 태그 제거
string-strip-html 패키지는 문자열에서 HTML을 제거하도록 설계되었습니다. 이 패키지는 HTML을 입력으로 사용하는 stringStripHtml 메서드를 제공합니다.
그런 다음 HTML 태그가 없는 문자열을 반환합니다. 문자열에 <script> 요소가 포함된 경우 string-strip-html은 요소와 해당 내용을 제거합니다.
다음 코드에서는 HTML 문자열을 stringStripHtml 메서드에 전달했습니다. 이 HTML 문자열에는 <script> 요소가 포함되어 있습니다.
그러나 웹 브라우저에서 코드를 실행하면 제거됩니다.
<body>
<script src="https://cdn.jsdelivr.net/npm/string-strip-html/dist/string-strip-html.umd.js"></script>
<script type="text/javascript">
const { stripHtml } = stringStripHtml;
let htmlWithScriptElement = '<script>alert("Hello world");<\/script>';
let html = `<h1 class='header_tag'>hello <i>world</i> ${htmlWithScriptElement}</h1>`;
console.log(stripHtml(html).result);
</script>
</body>
출력:
hello world
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn