Sanitizer: replaceElementWithChildren() Methode

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

true, wenn die Konfiguration geändert wurde, um das Element durch seine Kinder zu ersetzen, und false, wenn der Sanitizer das Element bereits ersetzte.

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt die grundlegende Verwendung der Methode, bei der ein Sanitizer konfiguriert wird, der das <em> Element in Eingaben durch seinen Kindinhalt 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 Texten 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 anfangs <p>, <em> und <strong> Elemente zulässt. Anschließend rufen wir replaceElementWithChildren() auf dem Sanitizer auf und geben an, dass <strong> Elemente ersetzt werden sollen.

Der Code definiert einen String, der <strong> 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 nicht bereinigte HTML-String, der bereinigte String aus dem Element und der Sanitizer werden unten protokolliert. Beachten Sie, dass das <strong> Styling aus dem Text entfernt wird, das <em> Element jedoch nicht. Beachten Sie auch, dass das <strong> Element ursprünglich in der elements-Liste in der Konfiguration war, jedoch entfernt wurde, als es zur replaceWithChildrenElements-Liste hinzugefügt wurde.

Spezifikationen

Browser-Kompatibilität