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 der Vorgang die Konfiguration geändert hat, um das Element durch seine Kinder zu ersetzen, und false, wenn der Sanitizer das Element bereits ersetzt hat.

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt die grundlegende Verwendung der Methode, indem ein Sanitizer konfiguriert wird, der das <em>-Element in Eingaben durch seinen Kind-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 zuerst ein neues Sanitizer-Objekt, das zunächst die <p>, <em> und <strong> Elemente zulässt. Dann 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 zu injizieren. 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 wurde, nicht jedoch das <em>-Element. Beachten Sie auch, dass das <strong>-Element ursprünglich in der elements-Liste in der Konfiguration war, aber entfernt wurde, als es zur replaceWithChildrenElements-Liste hinzugefügt wurde.

Spezifikationen

Browser-Kompatibilität