IT

Angular JS에서 HTML 엔티티 디코딩

itgroup 2023. 3. 29. 21:24
반응형

Angular JS에서 HTML 엔티티 디코딩

각도 JS를 사용하여 HTML 엔티티를 텍스트로 디코딩하려면 어떻게 해야 합니까?

나는 실마리를 가지고 있다.

""12.10 On-Going Submission of ""Made Up"" Samples.""

Angular JS를 사용해서 해독할 방법이 필요해요.여기서 javascript를 사용하여 그것을 하는 방법을 찾았지만, Angular에게는 분명 효과가 없을 것입니다.다음과 같은 UI의 원래 문자열을 가져와야 합니다.

""12.10 On-Going Submission of ""Made Up"" Samples.""

디렉티브를 사용하면 모든 html 엔티티가 디코딩된html 콘텐츠로 표시할 수 있습니다.응용 프로그램에 종속성을 포함하도록 하십시오.

데모

자바스크립트

angular.module('app', ['ngSanitize'])

  .controller('Ctrl', function($scope) {
    $scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."';
  });

HTML

  <body ng-controller="Ctrl">
    <div ng-bind-html="html"></div>
  </body>

ngSanitize를 사용하지 않을 경우 다음과 같이 수행할 수 있습니다.

컨트롤러:

$scope.html = '&quot;12.10 On-Going Submission of &quot;&quot;Made Up&quot;&quot; Samples.&quot;'
$scope.renderHTML = function(html_code)
        {
            var decoded = angular.element('<textarea />').html(html_code).text();
            return $sce.trustAsHtml(decoded);
        };

템플릿에서 다음을 수행합니다.

<div ng-bind-html="renderHTML(html)"></div>

컨트롤러에 $sce를 주입하기만 하면 됩니다.

비슷한 문제가 있지만 UI에서 결과 값을 사용할 필요는 없습니다.이 문제는 각 ngSanitize 모듈의 코드로 해결되었습니다.

var hiddenPre=document.createElement("pre");
/**
* decodes all entities into regular string
* @param value
* @returns {string} A string with decoded entities.
*/
function decodeEntities(value) {
  if (!value) { return ''; }
    
  hiddenPre.innerHTML = value.replace(/</g,"&lt;");
  // innerText depends on styling as it doesn't display hidden elements.
  // Therefore, it's better to use textContent not to cause unnecessary reflows.
  return hiddenPre.textContent;
}


var encoded = '&lt;p&gt;name&lt;/p&gt;&lt;p&gt;&lt;span style="font-size:xx-small;"&gt;ajde&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;da&lt;/em&gt;&lt;/p&gt;';
var decoded = decodeEntities(encoded);

document.getElementById("encoded").innerText=encoded;
document.getElementById("decoded").innerText=decoded;
#encoded {
  color: green;
}

#decoded {
  color: red;
}
Encoded: <br/>
<div id="encoded">
</div>

<br/>
<br/>

Decoded: <br/>
<div id="decoded">
</div>

언급URL : https://stackoverflow.com/questions/26064309/decode-html-entity-in-angular-js

반응형