Sanitizer: replaceElementWithChildren() Methode

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die replaceElementWithChildren() Methode der Sanitizer-Schnittstelle legt fest, dass ein Element durch seine untergeordneten HTML-Elemente ersetzt werden soll, wenn der Sanitizer verwendet wird. Dies wird hauptsächlich verwendet, um Stile aus Text zu entfernen.

Syntax

replaceElementWithChildren(element)

Parameter

element

Ein String, der den Namen des zu ersetzenden Elements angibt, oder ein Objekt mit den folgenden Eigenschaften:

name: Ein String, der den Namen des Elements enthält.
namespace Optional: Ein String, der den Namespace des Elements enthält. Der Standard-Namespace ist "http://www.w3.org/1999/xhtml".

Rückgabewert

Ein boolescher Wert: true, wenn die Operation die Sanitizer-Konfiguration aktualisiert hat, um das Element durch seine Kinder zu ersetzen, und false andernfalls.

Die Methode gibt false zurück, wenn der Sanitizer bereits so konfiguriert ist, dass er das angegebene Element ersetzt, oder wenn das zu ersetzende Element <html> im HTML-Namespace ist.

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt die grundlegende Verwendung der Methode, die einen Sanitizer konfiguriert, der das -Element in Eingaben durch seinen Inhalt ersetzt.

// Create sanitizer (in this case the default)
const sanitizer = new Sanitizer();

// Replace <em> elements with their innerHTML
sanitizer.replaceElementWithChildren("em");

Anleitung zum Entfernen von Stilen aus Text

Dieses Beispiel zeigt, wie replaceElementWithChildren() verwendet werden kann, um Stile aus Text zu entfernen.

<pre id="log"></pre>

#log {
  height: 480px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.textContent += text;
}

JavaScript

Der Code erstellt zunächst ein neues Sanitizer-Objekt, das zunächst ,  und  Elemente erlaubt. Dann rufen wir replaceElementWithChildren() auf dem Sanitizer auf und geben an, dass -Elemente ersetzt werden sollen.

Der Code definiert einen String, der -Elemente enthält, und verwendet Element.setHTML() mit dem Sanitizer, um den String einzufügen. Der ursprüngliche String, das bereinigte HTML aus dem Element und der Sanitizer werden protokolliert.

if ("Sanitizer" in window) {

// Create sanitizer using SanitizerConfig
const sanitizer = new Sanitizer({
  elements: ["p", "em", "strong"],
});

// Replace the <strong> element
sanitizer.replaceElementWithChildren("strong");

const unsanitizedString = `<p>This is a with <strong>important</strong> text <em>highlighted</em>.</p>`;
log(`unsanitizedHTMLString:\n ${unsanitizedString}`);

// Create a <div> element
const divElement = document.createElement("div");

divElement.setHTML(unsanitizedString, { sanitizer });
log(`\n\nsanitizedHTML:\n ${divElement.innerHTML}`);

// Log the sanitizer configuration
const sanitizerConfig = sanitizer.get();
log(`\n\nsanitizerConfig:\n ${JSON.stringify(sanitizerConfig, null, 2)}`);

} else {
  log("The HTML Sanitizer API is NOT supported in this browser.");
}

Ergebnisse

Der ursprüngliche unbereinigte HTML-String, der bereinigte String aus dem Element und der Sanitizer werden unten protokolliert. Beachten Sie, dass das -Styling aus dem Text entfernt wird, das -Element jedoch nicht. Beachten Sie auch, dass das -Element ursprünglich in der elements-Liste in der Konfiguration war, aber entfernt wurde, als es zur replaceWithChildrenElements-Liste hinzugefügt wurde.

Spezifikationen

Spezifikation
HTML Sanitizer API # dom-sanitizer-replaceelementwithchildren

Browser-Kompatibilität

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden