javascript - 从 html 代码中删除函数和属性

Question

假设我们有一个 div，如下

<div id = "container" >
    <p contenteditable="false">Hello World</p>
    <button onclick="alert();"></button>
</div>

我们检索了 div 的内容并将其保存到变量中

var content = document.getElementById("container").innerHTML;

现在我们要删除 contenteditable="false" 和 onclick="alert();"

我尝试过以下方法:

content = content.replace('contenteditable="false"','');
content = content.replace('onclick="alert();"','');

然后将内容放回里面

document.getElementById("container").innerHTML = content;

但这对我不起作用。

Answer 1

通过克隆然后在使用 innerHTML 之前从克隆中删除它们，可以容易容易地做到这一点:

var content = cleanContent(document.getElementById("container").cloneNode(true)).innerHTML;

其中clean类似于:

function clean(elm) {
    for (const key in elm) {
        if (key.startsWith("on")) {
            elm.removeAttribute(key);
        }
    }
    elm.contentEditable = false;
    Array.from(elm.children).forEach(clean);
    return elm;
}

实例:

function clean(elm) {
    for (const key in elm) {
        if (key.startsWith("on")) {
            elm.removeAttribute(key);
        }
    }
    elm.contentEditable = false;
    Array.from(elm.children).forEach(clean);
    return elm;
}
var content = clean(document.getElementById("container").cloneNode(true)).innerHTML;
document.getElementById("container").innerHTML = content;

<div id="container">
<p contenteditable="false">Hello World</p>
<button onclick="alert('x');">Button</button>
</div>