使用JavaScript清理HTML

Question

在我正在开发的应用程序中，用户通过文本框输入HTML来编辑页面上的元素。在这个阶段，用户可以添加任何类型的内容，甚至是有损坏的HTML和一些文本节点。

为了确保获得相对干净的代码，我会执行以下操作：

var s = document.createElement('div');
s.innerHTML = content;
// loop over each node in s, and if text node is found, wrap in span.
content = s.innerHTML

这段代码的问题在于如果内容是<TD>Text</TD>，那么得到的结果会是Text，因为DIV中不能有TD。

是否有一种方法可以在所有情况下都获取有效内容呢？

- Amit

Answer 1

使用DOM处理这个问题的一个问题是，您实际上不需要完全纠正的HTML，因为您添加了允许HTML为片段的条件。您希望某些格式不正确的HTML被更正，而另一些则不会。

谷歌搜索一下会找到这个jQuery插件: http://www.davidpirek.com/blog/html-beautifier-jquery-plugin，但我无法保证它的可靠性。

我可能会同意Graham的建议并建议使用HTML Tidy，因为它是成熟且快速的，即使您需要等待响应。

- Tom Elmore

Answer 2

最好的解决方案是将您的HTML字符串传递给运行HTML Tidy的服务器页面，然后返回“干净”的版本。恐怕我不知道任何强大的仅客户端解决方案。

编辑：一个便宜的解决方案是使用DOM本身，或者更快地使用jQuery：

var input='<div><td>foo</td>';
var output = $('<div>'+html+'</div>').html(); //=> '<div>foo</div>'

这不会清除所有错误，但可能对您足够了。

- Graham