使用 JavaScript 清理 HTML

发布于 2024-12-22 04:13:25 字数 431 浏览 2 评论 0原文

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

这个片段的问题是内容是 Text,我得到的结果是 Text,因为 DIV 中不能有 TD

是否有解决方案可以在所有情况下获取有效内容?

In an application I am developing, the user enters HTML in a text box, to edit an element on his page. At this stage, the user can add any sort of content, even broken HTML, and some text nodes.

To make sure I get somewhat clean code, I do this

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

The problem with this snippet is that is the content was a <TD>Text</TD>, the result I get is Text, since there cannot be a TD in a DIV.

Is there a fix to get valid content, in all cases?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

天冷不及心凉 2024-12-29 04:13:25

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

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

但我不能保证它。

我可能会同意 Graham 的观点,并建议使用 HTML Tidy,因为它成熟且快速,即使您必须等待响应。

The problem with doing it using the DOM is that you don't really want fully corrected html, because you are adding the condition that the html is allowed to be a snippet. You want some malformed html corrected, and some not.

Googling a bit threw up this jQuery plugin : http://www.davidpirek.com/blog/html-beautifier-jquery-plugin

but I can't vouch for it.

I would probably agree with Graham and suggest HTML Tidy since it's mature and fast even if you have to wait for the response.

寄离 2024-12-29 04:13:25

最好的解决方案是将 HTML 字符串传递到运行 HTML Tidy 的服务器页面,然后该页面将返回 'clean ' 版本。恐怕我不知道有任何强大的、仅限客户端的解决方案。

编辑:一种廉价的解决方案是使用 DOM 本身,或者使用 jQuery 更快:

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

这不会清除所有错误,但对你来说可能就足够了。

The best solution would be to pass your HTML string to a server page running HTML Tidy which would then return the 'clean' version. I'm not aware of any robust, client-side only solutions I'm afraid.

EDIT: one cheap solution is to use the DOM itself, or even quicker with jQuery:

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

This won't clean up all errors, but might be enough for you.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文