Javascript에서 HtmlSpecialChars가 동일합니까?

분명히, 이것은 내가 생각했던 것보다 찾기가 어렵습니다. 그리고 심지어 너무 간단합니다 ...

Javascript에 내장 된 PHP의 htmlspecialchars와 동등한 기능이 있습니까? 나는 그것을 직접 구현하는 것이 상당히 쉽다는 것을 알고 있지만 가능한 경우 내장 함수를 사용하는 것이 더 좋습니다.

PHP에 익숙하지 않은 사람들을 위해, 반드시 htmlspecialchars처럼 물건을 변환 <htmltag/>에<htmltag/>

나도 알아 escape()하고 encodeURI()이런 식으로 작동하지 않습니다.

솔루션 코드에 문제가 있습니다. 각 특수 문자의 첫 번째 항목 만 이스케이프합니다. 예를 들면 다음과 같습니다.

escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual:   Kip&#039;s &lt;b&gt;evil</b> &quot;test" code's here
Expected: Kip&#039;s &lt;b&gt;evil&lt;/b&gt; &quot;test&quot; code&#039;s here

다음은 올바르게 작동하는 코드입니다.

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

최신 정보

다음 코드는 위와 동일한 결과를 생성하지만 특히 큰 텍스트 블록에서 성능이 우수합니다 ( jbo5112 덕분에 ).

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

HTML 인코딩입니다. 이를 수행하는 기본 자바 스크립트 기능은 없지만 Google을 사용하여 멋지게 완성 할 수 있습니다.

예 : http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/

편집 :
이것은 내가 테스트 한 것입니다 :

var div = document.createElement('div');
  var text = document.createTextNode('<htmltag/>');
  div.appendChild(text);
  console.log(div.innerHTML);

산출: <htmltag/>

읽을만한 가치 : http://bigdingus.com/2007/12/29/html-escaping-in-javascript/

escapeHTML: (function() {
 var MAP = {
   '&': '&',
   '<': '&lt;',
   '>': '&gt;',
   '"': '&#34;',
   "'": '&#39;'
 };
  var repl = function(c) { return MAP[c]; };
  return function(s) {
    return s.replace(/[&<>'"]/g, repl);
  };
})()

참고 : 한 번만 실행하십시오. 그리고 예를 들어 이미 인코딩 된 문자열에서 실행하지 않는 &된다&

jQuery를 사용하면 다음과 같이 될 수 있습니다.

var escapedValue = $('<div/>').text(value).html();

관련 질문 에서 jQuery로 HTML 문자열 이스케이프

주석에서 언급 했듯이이 구현에서는 큰 따옴표와 작은 따옴표가 그대로 남아 있습니다. 즉, 요소 ​​속성을 원시 HTML 문자열로 만들어야하는 경우이 솔루션을 사용해서는 안됩니다.

HTML을 이스케이프 처리하는 기능은 다음과 같습니다.

function escapeHtml(str)
{
    var map =
    {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return str.replace(/[&<>"']/g, function(m) {return map[m];});
}

그리고 해독 :

function decodeHtml(str)
{
    var map =
    {
        '&': '&',
        '&lt;': '<',
        '&gt;': '>',
        '&quot;': '"',
        '&#039;': "'"
    };
    return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m) {return map[m];});
}

Underscore.js는이를위한 기능을 제공합니다.

_.escape(string)

&, <,>, "및 '문자를 대체하여 HTML에 삽입 할 문자열을 이스케이프합니다.

http://underscorejs.org/#escape

내장 Javascript 함수는 아니지만 이미 Underscore를 사용하고 있다면 변환 할 문자열이 너무 크지 않은 경우 자체 함수를 작성하는 것보다 더 나은 대안입니다.

또 다른 점은 모든 문자 매핑을 모두 버리고 대신 원치 않는 문자를 각각의 숫자 참조로 변환하는 것입니다. 예 :

function escapeHtml(raw) {
    return raw.replace(/[&<>"']/g, function onReplace(match) {
        return '&#' + match.charCodeAt(0) + ';';
    });
}

참고 지정된 정규식 만 영업 이익이 (가) HTML을 사용할 것입니다 탈출하는 상황에 따라, 탈출하고 싶어하지만 특정 문자를 처리하는, 이러한 문자가 충분하지 않을 수 있습니다. Ryan Grove의 기사 &, <,> 및 "보다 HTML 이스케이프에 대한 더 많은 내용이이 주제에 대해 잘 읽었으며, 상황에 따라 XSS 주입을 피하기 위해 다음 RegEx가 매우 필요할 수 있습니다.

var regex = /[&<>"'` !@$%()=+{}[\]]/g

String.prototype.escapeHTML = function() {
        return this.replace(/&/g, "&")
                   .replace(/</g, "&lt;")
                   .replace(/>/g, "&gt;")
                   .replace(/"/g, "&quot;")
                   .replace(/'/g, "&#039;");
    }

샘플 :

var toto = "test<br>";
alert(toto.escapeHTML());

그러한 기능이 필요하지 않을 수 있습니다. 코드가 이미 브라우저 *에 있기 때문에 실제로 사용하려면 브라우저에서 뒤로 디코딩해야하는 HTML을 생성하고 인코딩하는 대신 DOM에 직접 액세스 할 수 있습니다.

innerText이스케이프 함수를 사용하는 것보다 안전하고 훨씬 빠르게 일반 텍스트를 DOM에 삽입 하려면 property를 사용하십시오 . 정적 사전 인코딩 된 문자열을에 할당하는 것 보다 훨씬 빠릅니다innerHTML .

사용 classList편집 클래스, dataset설정에 대한 data-속성과 setAttribute다른 사람을 위해.

이 모든 것은 당신을 위해 탈출을 처리합니다. 보다 정확하게 말하면, 이스케이프 처리가 필요하지 않으며 DOM의 텍스트 표현 인 HTML을 다루기 때문에 ** 아래에서 인코딩이 수행되지 않습니다.

// use existing element
var author = 'John "Superman" Doe <john@example.com>';
var el = document.getElementById('first');
el.dataset.author = author;
el.textContent = 'Author: '+author;

// or create a new element
var a = document.createElement('a');
a.classList.add('important');
a.href = '/search?q=term+"exact"&n=50';
a.textContent = 'Search for "exact" term';
document.body.appendChild(a);

// actual HTML code
console.log(el.outerHTML);
console.log(a.outerHTML);

.important { color: red; }

<div id="first"></div>

*이 답변은 서버 측 JavaScript 사용자 (Node.js 등)를 위한 것이 아닙니다 . )를

** 나중에 명시 적으로 실제 HTML로 변환하지 않는 한. 예를 들어 액세스 하여 다른 답변에서 제안 innerHTML을 실행할 때 발생 $('<div/>').text(value).html();합니다. 따라서 최종 목표가 문서에 일부 데이터를 삽입하는 것이라면이 방법으로 작업을 두 번 수행하게됩니다. 또한 결과 HTML에서 모든 것이 인코딩되는 것이 아니라 유효한 최소값 만 인코딩됨을 알 수 있습니다. 컨텍스트에 따라 수행 되므로이 jQuery 메소드는 따옴표를 인코딩하지 않으므로 범용 이스케이프로 사용해서는 안됩니다. 따옴표 이스케이프는 속성 값 대신 신뢰할 수 없거나 따옴표가 포함 된 데이터가 포함 된 문자열로 HTML을 구성 할 때 필요합니다. DOM API를 사용하는 경우 이스케이프 처리를 전혀 신경 쓰지 않아도됩니다.

Node.JS 사용자 (또는 브라우저에서 Jade 런타임을 사용하는 사용자)의 경우 Jade의 이스케이프 기능을 사용할 수 있습니다.

require('jade').runtime.escape(...);

다른 사람이 유지 관리하는 경우 직접 작성해도 의미가 없습니다. :)

나는 okw의 답변에 대해 조금 자세히 설명하고 있습니다.

이를 위해 브라우저의 DOM 기능을 사용할 수 있습니다.

var utils = {
    dummy: document.createElement('div'),
    escapeHTML: function(s) {
        this.dummy.textContent = s
        return this.dummy.innerHTML
    }
}

utils.escapeHTML('<escapeThis>&')

이 반환 <escapeThis>&

표준 기능을 사용합니다 createElement 를 사용하여 보이지 않는 요소를 만든 다음 함수 textContent를 사용하여 문자열을 내용으로 설정 한 다음 innerHTML내용을 HTML 표현으로 가져옵니다.

function htmlspecialchars(str) {
 if (typeof(str) == "string") {
  str = str.replace(/&/g, "&"); /* must do & first */
  str = str.replace(/"/g, """);
  str = str.replace(/'/g, "'");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/>/g, "&gt;");
  }
 return str;
 }

.replace ( '&', '&'). replace ( '<', '<')를 사용하여 체인 논리가 아닌 성능과 가장 중요한 요소로 인해 레이스에서 승리하기를 바랍니다.

var mapObj = {
   '&':"&",
   '<':"&lt;",
   '>':"&gt;",
   '"':"&quot;",
   '\'':"&#039;"
};
var re = new RegExp(Object.keys(mapObj).join("|"),"gi");

function escapeHtml(str) 
{   
    return str.replace(re, function(matched)
    {
        return mapObj[matched.toLowerCase()];
    });
}

console.log('<script type="text/javascript">alert('Hello World');</script>');
console.log(escapeHtml('<script type="text/javascript">alert('Hello World');</script>'));

반대의 경우 :

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

OWASP 는 "[e] x 영숫자 문자를 제외하고 ASCII 값이 256보다 작은 모든 문자를&#xHH; 제외하고 [an] 속성에서 전환되지 않도록 형식 (또는 가능한 경우 명명 된 엔티티)을 사용하여 합니다."

다음은 사용법 예제와 함께이를 수행하는 함수입니다.

function escapeHTML(unsafe) {
  return unsafe.replace(
    /[\u0000-\u002F]|[\u003A-\u0040]|[\u005B-\u00FF]/g,
    c => '&#' + ('000' + c.charCodeAt(0)).substr(-4, 4) + ';'
  )
}
document.querySelector('div').innerHTML =
  '<span class=' +
  escapeHTML('this should break it! " | / % * + , - / ; < = > ^') +
  '>' +
  escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
  '</span>'

<div></div>

function htmlEscape(str){
    return str.replace(/[&<>'"]/g,x=>'&#'+x.charCodeAt(0)+';')
}

이 솔루션은 문자의 숫자 코드를 사용합니다 (예 <:< .

map을 사용하는 솔루션 보다 성능이 약간 떨어지지 만 다음 과 같은 장점이 있습니다.

• 라이브러리 또는 DOM에 의존하지 않음
• 기억하기 매우 쉽습니다 (5 개의 HTML 이스케이프 문자를 외울 필요는 없습니다)
• 작은 코드
• 상당히 빠름 (여전히 5 체인 교체보다 빠름)