각도로 HTML 텍스트 이스케이프JS 지시어

각도로 HTML 텍스트 이스케이프JS 지시어

HTML을 텍스트로 이스케이프하는 각도 JS 명령어가 있나요?커스텀 디렉티브를 처리하고 있기 때문에, 커스텀 디렉티브가 생성하는 출력의 일부를 회피할 필요가 있습니다.

내부 각도JS sanitzer는 encodeEntities 함수를 사용하지만 이를 노출하지는 않습니다.기능을 복제할 수 있다는 것은 알지만, 표준적인 방법이 있을 것 같습니다.

---

사용 사례:언어 현지화를 위한 커스텀 디렉티브가 있습니다.이 지시어는 데이터 파일에서 키 검색을 사용하여 언어 텍스트를 찾습니다.경우에 따라 이 텍스트는 HTML을 포함할 수 있으며/또는 지시문은 결과적인 시각적 서식을 개선하기 위해 HTML을 생성합니다.또한 이 지시어는 Angular 식을 파라미터로 사용하여 문자열 내의 토큰 대체로 사용합니다.HTML이 안전하지 않을 수 있기 때문에 이 파라미터를 부호화해야 합니다.

예를 들어 디렉티브는 Atribute로 호출됩니다.i18n-html='welcome_text_html,1+1,user.name'그런 다음 명령어는 설명에 따라 문자열을 포맷하여 사용합니다.element.htmlDOM 노드를 갱신합니다.

이 답변은 HTML을 삭제하는 것이 아니라 탈출에 관한 것입니다. 두 가지 방법이 있습니다.

1. @maniekq에서 설명한 바와 같이 DOM에서 작업할 수 있는 경우 다음을 수행합니다.

   element.text( scope.myValue );
   

2. 이 답변에서 콧수염.js의 다음 코드를 사용할 수 있습니다.예를 들어 각도 필터를 만듭니다.

   angular.module('myModule').filter('escapeHtml', function () {
   
       var entityMap = {
           "&": "&",
           "<": "&lt;",
           ">": "&gt;",
           '"': '&quot;',
           "'": '&#39;',
           "/": '&#x2F;'
       };
   
       return function(str) {
           return String(str).replace(/[&<>"'\/]/g, function (s) {
               return entityMap[s];
           });
       }
   });
   

삭제는 별개입니다만, HTML 코드를 「실행」하지 않고, 모든 문자를 표시하기 위해서, 값을 설정하기 위해서 「텍스트」함수를 사용하고 있습니다.

지시문에서 값을 설정하려면 다음과 같이 쓰는 대신 다음과 같이 입력합니다.

element.html( scope.myValue );

기입:

element.text( scope.myValue );

이 답변은 @mb21에서 파생되었습니다.달라진 것은 오직 이 기술을 활용한다는 것 뿐이다.$sce이 필터를 사용하여ng-bind-html, 트리거하지 않음Error: $sce:unsafe.

angular
  .module('yourModule', [
    'ngSanitize'
  ])
  .filter('escapeHtml', function ($sce) {
    // Modified by Rockallite: Add $sce.trustAsHtml() to mute "Error: $sce:unsafe"
    // http://stackoverflow.com/a/32835368/2293304
    // http://stackoverflow.com/a/28537958/2293304
    // https://github.com/janl/mustache.js/blob/master/mustache.js#L82
    var entityMap = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        '"': '&quot;',
        "'": '&#39;',
        "/": '&#x2F;'
    };

    return function(str) {
      return $sce.trustAsHtml(String(str).replace(/[&<>"'\/]/g, function (s) {
          return entityMap[s];
      }));
    }
  });

HTML의 이스케이프에는 두 가지 다른 문제가 있습니다.첫 번째 문제는 엔티티를 인코딩해야 한다는 것이고 두 번째 문제는 데이터를 HTML 바인딩으로 사용할 수 있도록 결과를 신뢰할 수 있어야 한다는 것입니다.컨트롤러에 다음 코드를 추가하면 $sce 서비스를 사용하여 두 문제를 해결할 수 있습니다.

Coffee Script 솔루션:

MyApp.controller('MyController', ['$scope','$sce',($scope,$sce) ->

  ###
  ...
  ###

  $scope.html5Entities = (value) ->
    value.replace(/[\u00A0-\u9999<>\&\'\"]/gim, (i) ->
      '&#' + i.charCodeAt(0) + ';'
    )

  $scope.trustAsHtml = (value) ->
    $sce.trustAsHtml(value)

  ###
  ...
  ###

])    

Javascript 솔루션:

MyApp.controller('MyController', ['$scope','$sce', function($scope,$sce) {

  /* ... */

  $scope.html5Entities = function(value) {
    return value.replace(/[\u00A0-\u9999<>\&\'\"]/gim, function(i) {
          return '&#' + i.charCodeAt(0) + ';'
        })
  };

  $scope.trustAsHtml = function(value) {
     return $sce.trustAsHtml(value);
  };

  /* ... */

}]);

첫 번째 함수 html5Entities는 실제 엔티티 인코딩을 수행하고 두 번째 함수 trustAsHtml은 HTML 바인딩의 Angular에서 사용하기에 안전한 문자열을 표시합니다.두 버전 모두 컨트롤러에 $sce 서비스를 포함해야 합니다.

사용 예:

<div ng-bind-html="trustAsHtml((html5Entities(product.title) | highlight: $select.search))"></div>

관련 문제 참조:

• javascript에서 html 엔티티 인코딩

• AngularJS : 뷰에 HTML 삽입

다음과 같이 필터를 실장할 수 있습니다.

app.filter('escape', escape);

 function escape() {
    return function (html) {
      return angular.element('<pre/>').text(html).html();
    };
  }

AngularJS에서 HTML을 삭제하는 방법은 두 가지가 있습니다.첫 번째는 ngBindHtml 디렉티브를 사용하는 것이고 두 번째는 $sanitize 서비스를 사용하는 것입니다.

function MyCtrl ( $scope, $sanitize ) {
  $scope.rawHtml = "<div><script></script></div>";
  $scope.sanitizedHmtl = $sanitize( $scope.rawHtml );
}

이 두 가지는 기능적으로 동등합니다.

<div ng-bind-html="rawHtml"></div>
<div ng-bind-html-unsafe="sanitizedHtml"></div>

질문에서와 같이 지시문에서 사용하는 경우, 삭제한 HTML을 삽입하기만 하면 됩니다.

element.html( scope.sanitizedHtml );

그러나 대부분의 경우 지시문을 작성할 때 템플릿에 이를 포함시키고 위와 같이 ngBindHtml을 사용합니다.하지만 코너 케이스에서는 효과가 있습니다.

해법은 , 코드로 '각도-정상화 코드'를 수 .encodeEntities사용법을 찾아보면 htmlSanitizeWriter 이어 에, 에, 에sanitizeText 필터에 되고 있습니다.linky.

하다, 하다, 하다, 하다, 하다, 하다, 하다, 이렇게 사용할 수 있습니다.linky 다시 .sanitizeText ★★★★★★★★★★★★★★★★★」encodeEntities비스서

Angular 앱에서 사용하는 HTML 템플릿 파일에서 [innerHtml] 단축 태그를 사용합니다.

다음 예시는 WP API에서 취득한 post_content에서 워드프레스에 의해 생성된HTML을 이스케이프하기 위한 것입니다.따라서 html 태그가 브라우저에 표시되지 않습니다.

<div [innerHtml]="post.post_content" *ngIf="post && post.post_content"></div>

이게 도움이 됐으면 좋겠다.

ngSanitize에서 encodeEntities() 함수를 사용하여 이스케이프 및 <> 등을 수행할 수 있습니다.

언급URL : https://stackoverflow.com/questions/14462612/escape-html-text-in-an-angularjs-directive