使用JavaScript清理HTML

Cleaning HTML using JavaScript

本文关键字：HTML 清理 JavaScript 使用      更新时间：2023-09-26

在我正在开发的应用程序中，用户在文本框中输入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。

在所有情况下，是否有获得有效内容的修复?

使用DOM进行此操作的问题是，您并不真正想要完全纠正的html，因为您添加了允许html为片段的条件。你希望一些格式错误的html得到纠正，而另一些则不需要。

在谷歌上搜索了一下，出现了这个jQuery插件:http://www.davidpirek.com/blog/html-beautifier-jquery-plugin

但我不能保证。

我可能会同意Graham的建议，并建议使用HTML Tidy，因为它既成熟又快速，即使你必须等待响应。

最好的解决方案是将HTML字符串传递给运行HTML Tidy的服务器页面，然后返回"干净"版本。恐怕我不知道有什么健壮的、只针对客户端的解决方案。

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

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

这不会清除所有错误，但对您来说已经足够了。

相关文章：