Manuell bereinigen, einen string

Ich habe eine textarea wo der Benutzer geben Sie etwas text ein. Der text kann auch JavaScript-oder HTML etc. Ich möchte manuell bereinigen Sie die Daten und speichern Sie es in eine Zeichenfolge.

Ich kann nicht herausfinden, wie zu verwenden DomSanitizationService manuell zu bereinigen meiner Daten.

Wenn ich {{ textare_text }} auf der Seite dann die Daten korrekt bereinigt.

Wie mache ich das manuell in eine string ich haben?

InformationsquelleAutor lfmunoz | 2016-07-25
  1. 25

    Können Sie bereinigen das HTML wie folgt:

    import { Component, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
  <div [innerHTML]="_htmlProperty"></div>
  `
})
export class AppComponent {

  _htmlProperty: string = 'AAA<input type="text" name="name">BBB';

  constructor(private _sanitizer: DomSanitizer){ }

  public get htmlProperty() : SafeHtml {
     return this._sanitizer.sanitize(SecurityContext.HTML, this._htmlProperty);
  }

}

    Demo-plunker hier.

    Aus Ihre Kommentare, Sie wirklich wollen, Flucht nicht-Bereinigung.

    Dafür überprüfen Sie diese plunker, wo wir beide die Flucht und-Bereinigung.

    import { Component, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `Original, using interpolation (double curly braces):<b>
        <div>{{ _originalHtmlProperty }}</div> 
  </b><hr>Sanitized, used as innerHTML:<b>
        <div [innerHTML]="sanitizedHtmlProperty"></div>
  </b><hr>Escaped, used as innerHTML:<b>
      <div [innerHTML]="escapedHtmlProperty"></div>
  </b><hr>Escaped AND sanitized used as innerHTML:<b>
      <div [innerHTML]="escapedAndSanitizedHtmlProperty"></div>
  </b>`
})
export class AppComponent {
  _originalHtmlProperty: string = 'AAA<input type="text" name="name">BBB';
  constructor(private _sanitizer: DomSanitizer){ }

  public get sanitizedHtmlProperty() : SafeHtml {
     return this._sanitizer.sanitize(SecurityContext.HTML, this._originalHtmlProperty);
  }

  public get escapedHtmlProperty() : string {
     return this.escapeHtml(this._originalHtmlProperty);
  }

  public get escapedAndSanitizedHtmlProperty() : string {
     return this._sanitizer.sanitize(SecurityContext.HTML, this.escapeHtml(this._originalHtmlProperty));
  }

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

    Den HTML-escaping-Funktion verwendet, oben entweicht die gleichen chars wie Winkel-der code funktioniert (leider, Ihre Flucht-Funktion ist nicht öffentlich, also können wir es nicht verwenden).

    • Wenn Sie den code ändern, um die folgende Sie sehen, es ist ein Unterschied. Ich will, dass die tags aber nicht ausgewertet . Wissen Sie, wie Sie das tun? Vorlage: ` <div [innerHTML]="_htmlProperty"></div> {{_htmlProperty}} ` ( plnkr.co/Bearbeiten/5vb1o2b9SX6F74U9g6F6?p=Album Vorhören)
    • Also, was Sie wollen, ist nicht wirklich desinfizieren. Was Sie wollen, ist die Flucht. -- Ich werde Bearbeiten Sie die Antwort.
    • Ich fügte hinzu, die Flucht. prüfen Sie die Antwort. Es gibt eine neue plunker.
    • ich verwirrt die Flucht mit reinigender danke.
    • Was meinst du? Sie werden immer Fehler? Wenn ja, welche Zeile?
    InformationsquelleAutor acdcjunior
  2. 7

    In den letzten Winkel, die Sie verwenden können, wie diese:

    1. Ersten import "DomSanitizer" von Winkel-Plattform-browser:

      import { DomSanitizer } from '@angular/platform-browser';
import { SecurityContext } from '@angular/core';

    2. Dann im Konstruktor : 

      constructor(private _sanitizer: DomSanitizer){}

    3. Verwenden Sie dann in Ihrer Klasse wie :

      var title = "<script> alert('Hello')</script>"
title = this._sanitizer.sanitize(SecurityContext.HTML, title);
    InformationsquelleAutor Himanshu Teotia
  3. 0

    In eckig ^2.3.1

    Einer Ansicht mit einem bootstrap4 progressbar. Sehen, dass in dem Beispiel, das wir benötigen einen Wert für Stil.Breite.

    <!-- View HTML-->
<div class="progress">
    <div class="progress-bar" role="progressbar" [style.width]="getProgress('style')" aria-valuenow="getProgress()" aria-valuemin="0" aria-valuemax="100"></div>
</div>

    Müssen wir bereinigen diese Stil.Breite Wert. Wir müssen DomSanitizer zu desinfizieren den Wert und die SecurityContext den Kontext angeben. In diesem Beispiel ist der Kontext Stil.

    //note that we need to use SecurityContext and DomSanitizer
//SecurityContext.STYLE
import { Component, OnInit, Input } from '@angular/core';
import { SecurityContext} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';


@Component({
  selector: 'app-challenge-progress',
  templateUrl: './challenge-progress.component.html',
  styleUrls: ['./challenge-progress.component.sass']
})
export class ChallengeProgressComponent implements OnInit {

  @Input() data: any;

  constructor(private _sanitizer: DomSanitizer) { }

  ngOnInit() {
  }

  getProgress(type: string): any {
    if(type === 'style') {
      //here is the line you are looking for
      return this._sanitizer.sanitize(SecurityContext.STYLE,this._getProgress()+'%');
    }
    return this._getProgress();
  }

  private _getProgress():number {
    if(this.data) {
      return this.data.goal_total_current/this.data.goal*100;
    }
    return 0;
  }
}
    InformationsquelleAutor Pere Pages
Schreibe einen Kommentar