使用 JavaScript 清理 HTML
在我正在开发的应用程序中,用户在文本框中输入 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
使用 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.
最好的解决方案是将 HTML 字符串传递到运行 HTML Tidy 的服务器页面,然后该页面将返回 'clean ' 版本。恐怕我不知道有任何强大的、仅限客户端的解决方案。
编辑:一种廉价的解决方案是使用 DOM 本身,或者使用 jQuery 更快:
这不会清除所有错误,但对你来说可能就足够了。
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:
This won't clean up all errors, but might be enough for you.