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 wird, wenn der Sanitizer verwendet wird. Dies wird hauptsächlich verwendet, um Stile von 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 Namensraum des Elements enthält. Der Standardnamensraum 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 konfiguriert ist, um das gegebene Element zu ersetzen, oder wenn das ermittelte Element nicht erlaubt ist.

Beschreibung

Die replaceElementWithChildren()-Methode spezifiziert ein Element, das durch seine Kindelemente und/oder Textknoten ersetzt wird, wenn der Sanitizer verwendet wird. Dies wird hauptsächlich verwendet, um Stile von Text zu entfernen.

Nicht erlaubte Ersatzelemente

Die folgenden Elemente sind nicht als Ersatzelemente erlaubt:

<html> im HTML-Namensraum (http://www.w3.org/1999/xhtml).
<svg> im SVG-Namensraum (http://www.w3.org/2000/svg).
<math> im MathML-Namensraum (http://www.w3.org/1998/Math/MathML).

Alle folgenden Methodenaufrufe geben false zurück, da der Sanitizer für diese Elemente nicht aktualisiert werden kann:

const sanitizer = new Sanitizer();

sanitizer.replaceElementWithChildren("html");
sanitizer.replaceElementWithChildren({ name: "html" });
sanitizer.replaceElementWithChildren({
  name: "html",
  namespace: "http://www.w3.org/1999/xhtml",
});
sanitizer.replaceElementWithChildren({
  name: "svg",
  namespace: "http://www.w3.org/2000/svg",
});
sanitizer.replaceElementWithChildren({
  name: "math",
  namespace: "http://www.w3.org/1998/Math/MathML",
});

Beispiele

Grundlegende Anwendung

Dieses Beispiel zeigt die grundlegende Anwendung der Methode, indem ein Sanitizer konfiguriert wird, der das -Element in Eingaben durch seinen Kinderinhalt 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 von 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 ursprünglich die , , und -Elemente zulässt. Wir rufen dann replaceElementWithChildren() auf dem Sanitizer auf, um anzugeben, 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 Original-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 nicht bereinigte HTML-String, der bereinigte String aus dem Element und der Sanitizer werden unten protokolliert. Beachten Sie, dass das -Styling aus dem Text entfernt wurde, das -Element jedoch nicht. Beachten Sie auch, dass das -Element ursprünglich in der elements-Liste in der Konfiguration war, jedoch entfernt wurde, als es zur Liste replaceWithChildrenElements 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