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 Operation die Konfiguration dahingehend geändert hat, 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, die einen Sanitizer konfiguriert, 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 anfänglich <p>, <em> und <strong>-Elemente zulässt. Wir rufen dann replaceElementWithChildren() am Sanitizer auf und geben an, dass <strong>-Elemente ersetzt werden sollen.

Der Code definiert einen String, der <strong>-Elemente enthält, und nutzt Element.setHTML() mit dem Sanitizer, um den String einzufügen. Der Originalstring, das sanitierte HTML aus dem Element und der Sanitizer werden geloggt.

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 unsanitisierte HTML-String, der sanitisierte String aus dem Element und der Sanitizer werden unten geloggt. Beachten Sie, dass das <strong>-Styling aus dem Text entfernt wurde, aber das <em>-Element nicht. Beachten Sie auch, dass das <strong>-Element ursprünglich in der elements-Liste der Konfiguration war, aber entfernt wurde, als es zur replaceWithChildrenElements-Liste hinzugefügt wurde.

Spezifikationen

Browser-Kompatibilität