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 Namensraum des Elements angibt. Der Standard-Namensraum ist "http://www.w3.org/1999/xhtml".

Rückgabewert

Keiner (undefined).

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt die grundlegende Verwendung der Methode, indem ein Sanitizer konfiguriert wird, der das <em>-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 zuerst ein neues Sanitizer-Objekt, das zunächst die <p>, <em> und <strong>-Elemente zulässt. Anschließend wird replaceElementWithChildren() auf dem Sanitizer aufgerufen, wobei angegeben wird, 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 Original-String, das bereinigte HTML-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 <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, aber entfernt wurde, als es zur replaceWithChildrenElements-Liste hinzugefügt wurde.

Spezifikationen

Browser-Kompatibilität