특별한 HTML 엔티티가 포함된 문자열을 디코딩하는 올바른 방법은 무엇입니까?

특별한 HTML 엔티티가 포함된 문자열을 디코딩하는 올바른 방법은 무엇입니까?

이 질문에는 이미 답변이 있습니다.

JavaScript에서 HTML 엔티티의 이스케이프를 해제하시겠습니까? (31 회답)

닫힘5년 전에요.

다음과 같은 서비스 요청에서 JSON이 반환되었다고 가정합니다.

{
    "message": "We're unable to complete your request at this time."
}

그 아포스트랩이 왜 그렇게 부호화 되었는지 모르겠다.'내가 아는 건 그걸 해독하고 싶다는 것뿐이다.

다음은 jQuery를 사용한 접근법입니다.

function decodeHtml(html) {
    return $('<div>').html(html).text();
}

그래도 그건 아주 진부한 것 같다.어떻게 하면 좋을까요?"올바른" 방법이 있을까요?

이것은 HTML 문자를 해독하는 가장 좋아하는 방법입니다.이 코드를 사용하는 장점은 태그도 유지된다는 것입니다.

function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

예: http://jsfiddle.net/k65s3/

입력:

Entity:&nbsp;Bad attempt at XSS:<script>alert('new\nline?')</script><br>

출력:

Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>

DOM을 사용하여 이 작업을 수행하지 마십시오.DOM을 사용하여 HTML 엔티티를 디코딩하면(현재 승인된 답변에서 제시된 바와 같이) 크로스 브라우저 결과에 차이가 생깁니다.

HTML 표준의 알고리즘에 따라 문자 참조를 디코딩하는 견고하고 결정론적인 솔루션에서는 라이브러리를 사용합니다.README에서:

he ("HTML 엔티티"의 경우)는 JavaScript로 작성된 강력한 HTML 엔티티 인코더/디코더입니다.HTML에 따라 표준화된 이름 있는 문자 참조를 모두 지원하며 브라우저와 마찬가지로 애매한 앰퍼샌드 및 기타 엣지 케이스를 처리하고 광범위한 테스트 스위트를 제공하며 다른 많은 자바스크립트 솔루션과 달리 그는 별 유니코드 기호를 잘 처리합니다.온라인 데모를 이용할 수 있습니다.

사용 방법은 다음과 같습니다.

he.decode("We're unable to complete your request at this time.");
→ "We're unable to complete your request at this time."

면책사항:나는 도서관의 저자입니다.

자세한 내용은 이 스택오버플로우 답변을 참조해 주세요.

html/dom을 사용하지 않으려면 regex를 사용할 수 있습니다.테스트해 본 적은 없지만 다음과 같은 것이 있습니다.

function parseHtmlEntities(str) {
    return str.replace(/&#([0-9]{1,3});/gi, function(match, numStr) {
        var num = parseInt(numStr, 10); // read num as normal number
        return String.fromCharCode(num);
    });
}

[편집]

참고: 숫자 html 엔티티에 대해서만 작동하며 &oring;과 같은 항목은 작동하지 않습니다.

[편집 2]

기능 수정(일부 오타) : http://jsfiddle.net/Be2Bd/1/

&#xxx 스타일 엔티티를 처리하는 JS 기능이 있습니다.
GitHub에서의 기능

// encode(decode) html text into html entity
var decodeHtmlEntity = function(str) {
  return str.replace(/&#(\d+);/g, function(match, dec) {
    return String.fromCharCode(dec);
  });
};

var encodeHtmlEntity = function(str) {
  var buf = [];
  for (var i=str.length-1;i>=0;i--) {
    buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
  }
  return buf.join('');
};

var entity = '高级程序设计';
var str = '高级程序设计';

let element = document.getElementById("testFunct");
element.innerHTML = (decodeHtmlEntity(entity));

console.log(decodeHtmlEntity(entity) === str);
console.log(encodeHtmlEntity(str) === entity);
// output:
// true
// true

<div><span id="testFunct"></span></div>

jQuery가 인코딩 및 디코딩합니다.

function htmlDecode(value) {
  return $("<textarea/>").html(value).text();
}

function htmlEncode(value) {
  return $('<textarea/>').text(value).html();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("#encoded")
  .text(htmlEncode("<img src onerror='alert(0)'>"));
   $("#decoded")
  .text(htmlDecode("&lt;img src onerror='alert(0)'&gt;"));
});
</script>

<span>htmlEncode() result:</span><br/>
<div id="encoded"></div>
<br/>
<span>htmlDecode() result:</span><br/>
<div id="decoded"></div>

_.unescape원하는 것을 할 수 있다

https://lodash.com/docs/ # 이스케이프 해제

너무 좋은 대답이에요.이것은 다음과 같이 각도로 사용할 수 있습니다.

 moduleDefinitions.filter('sanitize', ['$sce', function($sce) {
    return function(htmlCode) {
        var txt = document.createElement("textarea");
        txt.innerHTML = htmlCode;
        return $sce.trustAsHtml(txt.value);
    }
}]);

언급URL : https://stackoverflow.com/questions/7394748/whats-the-right-way-to-decode-a-string-that-has-special-html-entities-in-it