Sanitizer: replaceElementWithChildren() Methode

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

Keiner (undefined).

Dieses Beispiel zeigt die grundlegende Verwendung der Methode, bei der 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");

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 zunächst ein neues Sanitizer-Objekt, das anfangs die <p>, <em>, und <strong> Elemente erlaubt. 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 einzufügen. Der originale String, das bereinigte HTML vom 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 vom Element und der Sanitizer werden unten protokolliert. Beachten Sie, dass das <strong> Styling aus dem Text entfernt wurde, das <em> Element jedoch nicht. Beachten Sie außerdem, 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.