자바 스크립트에서 HTML 특수 문자를 이스케이프 처리 할 수 ​​있습니까?

자바 스크립트 함수로 텍스트를 HTML로 표시하고 싶습니다. JS에서 HTML 특수 문자를 어떻게 피할 수 있습니까? API가 있습니까?

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

jQuery의 .text()함수를 사용할 수 있습니다 .

예를 들면 다음과 같습니다.

http://jsfiddle.net/9H6Ch/

.text()함수 에 관한 jQuery 문서에서 :

이 메소드는 HTML에서 올바르게 렌더링되도록 필요에 따라 제공된 문자열을 이스케이프해야합니다. 이를 위해 DOM 메소드 .createTextNode ()를 호출하고 문자열을 HTML로 해석하지 않습니다.

이전 버전의 jQuery 문서는 다음과 같이 표현했습니다 ( 중점 추가 ).

이 메소드는 HTML에서 올바르게 렌더링되도록 필요에 따라 제공된 문자열을 이스케이프해야합니다. 이를 위해 DOM 메소드 .createTextNode ()를 호출하여 특수 문자를 해당 HTML 엔티티 (예 : & lt; for <)로 바꿉니다 .

적절한 방법을 찾았다 고 생각합니다 ...

// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);

// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');

// Optional: clear its old contents
//elem.innerHTML = '';

// Append the text node into it:
elem.appendChild(text_node);

lodash 사용

_.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'

소스 코드

이것은 지금까지 내가 본 가장 빠른 방법입니다. 또한 페이지의 요소를 추가, 제거 또는 변경하지 않고 모든 작업을 수행합니다.

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}

더 나은 솔루션을 찾는 것이 흥미로 웠습니다.

var escapeHTML = function(unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case '&':
        return '&amp;';
      case '<':
        return '&lt;';
      case '"':
        return '&quot;';
      default:
        return '&#039;';
    }
  });
};

>결과에서 XML / HTML 코드를 손상시키지 않기 때문에 구문 분석 하지 않습니다.

벤치 마크는 다음과 같습니다. http://jsperf.com/regexpairs 또한 범용 escape기능을 만들었습니다 . http://jsperf.com/regexpairs2

인코딩되지 않은 텍스트를 표시하는 가장 간결하고 성능이 좋은 방법은 textContent속성 을 사용하는 것 입니다.

을 사용하는 것보다 빠릅니다innerHTML . 그리고 이스케이프 오버 헤드를 고려하지 않습니다.

document.body.textContent = 'a <b> c </b>';

DOM Elements는 innerText 에 할당하여 텍스트를 HTML로 변환하는 것을 지원합니다 . innerText는 함수가 아니지만 텍스트를 이스케이프 한 것처럼 할당하는 기능입니다.

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';

문자열의 모든 문자를 인코딩 할 수 있습니다.

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

또는 다음과 같이 (&, inebreaks, <,>, "및 ') 걱정할 주요 문자를 타겟팅하십시오.

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55">&#119;&#119;&#119;&#46;&#87;&#72;&#65;&#75;&#46;&#99;&#111;&#109;</textarea>

하나의 라이너 (ES6 + 용) :

var escapeHtml = s => (s + '').replace(/[&<>"']/g, m => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;',
    '"': '&quot;', "'": '&#39;'
})[m]);

이전 버전의 경우 :

function escapeHtml(s) {
    return (s + '').replace(/[&<>"']/g, function (m) {
        return ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;',
            '"': '&quot;', "'": '&#39;'
        })[m];
    });
}

DOM 구조를 만들 때이 문제가 발생했습니다. 이 질문은 그것을 해결하는 데 도움이되었습니다. 이중 쉐브론을 경로 구분 기호로 사용하고 싶었지만 새 텍스트 노드를 직접 추가하면 문자 자체가 아닌 이스케이프 된 문자 코드가 표시되었습니다.

var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* this resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* this was key */

앱에서 이미 모듈을 사용하고 있다면 escape-html 모듈을 사용할 수 있습니다 .

import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);

prototype.js라이브러리를 사용하여 시도하십시오 .

string.escapeHTML();

데모를보십시오

이 솔루션을 생각해 냈습니다.

사용자 또는 데이터베이스의 안전하지 않은 데이터로 요소에 html을 추가한다고 가정 해 봅시다.

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + unsafe + '</p>';
html += '</div>';

element.html(html);

XSS 공격에 대해 안전하지 않습니다. 이제 이것을 추가하십시오.

$(document.createElement('div')).html(unsafe).text();

그래서

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + $(document.createElement('div')).html(unsafe).text(); + '</p>';
html += '</div>';

element.html(html);

나에게 이것은 사용 .replace()하는 것 보다 훨씬 쉽고 제거 할 것입니다 !!! 가능한 모든 HTML 태그 (희망).