Sanitizer: replaceElementWithChildren() 方法

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

replaceElementWithChildren() 方法是 Sanitizer 介面的一個方法，它會設定一個元素，在 sanitizer 使用時，該元素將被其子 HTML 元素替換。該方法主要用於剝離文字中的樣式。

指定的元素及其名稱空間會被新增到此 sanitizer 配置的 replaceWithChildrenElements 列表中。如果元素存在於 elements 或 removeElements 列表中，則會被移除。

語法

replaceElementWithChildren(element)

引數

element

一個字串，表示要被替換的元素的名稱，或者一個具有以下屬性的物件

name: 一個包含元素名稱的字串。
namespace 可選: 一個包含元素名稱空間的字串。預設名稱空間為 "http://www.w3.org/1999/xhtml"。

返回值

無 (undefined)。

示例

基本用法

此示例展示了該方法的基本用法，配置了一個 sanitizer，該 sanitizer 會將輸入中的  元素替換為其子內容。

// Create sanitizer (in this case the default)
const sanitizer = new Sanitizer();

// Replace <em> elements with their innerHTML
sanitizer.replaceElementWithChildren("em");

如何剝離文字中的樣式

此示例展示瞭如何使用 replaceElementWithChildren() 來剝離文字中的樣式。

<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

程式碼首先建立一個新的 Sanitizer 物件，該物件最初允許 、 和  元素。然後，我們在 sanitizer 上呼叫 replaceElementWithChildren()，指定  元素應該被替換。

程式碼定義了一個包含  元素的字串，並使用帶有 sanitizer 的 Element.setHTML() 來注入該字串。然後會記錄原始字串、來自元素的已淨化 HTML 以及 sanitizer。

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.");
}

結果

下面記錄了原始的未淨化 HTML 字串、來自元素的已淨化字串以及 sanitizer。請注意，文字中的  樣式已被剝離，但  元素沒有。同時請注意， 元素最初位於配置的 elements 列表中，但在被新增到 replaceWithChildrenElements 列表時被移除了。

規範

規範
HTML Sanitizer API # dom-sanitizer-replaceelementwithchildren

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年6月26日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤