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

자바 스크립트에서 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 엔티티 (예 : & amplt; for <)로 바꿉니다.

---

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

---

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

// 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

---

The most concise and performant way to display unencoded text is to use textContent property.

Faster than using innerHTML. And that's without taking into account escaping overhead.

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

---

DOM Elements support converting text to HTML by assigning to innerText. innerText is not a function but assigning to it works as if the text were escaped.

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

---

You can encode every character in your string:

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

Or just target the main characters to worry about (&, inebreaks, <, >, " and ') like:

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>

---

Came across this issue when building a DOM structure. This question helped me solve it. I wanted to use a double chevron as a path separator, but appending a new text node directly resulted in the escaped character code showing, rather than the character itself:

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

---

Try this, using the prototype.js library:

string.escapeHTML();

Try a demo

---

I came up with this solution.

Let's assume that we want to add some html to the element with unsafe data from the user or database.

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

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

element.html(html);

It's unsafe against XSS attacks. Now add this.

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

So it is

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);

To me this is much easier than using .replace() and it'll remove!!! all possible html tags (I hope).

참고URL : https://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript