使用jQuery删除HTML元素之间的空格和换行符

Question

使用jQuery，我想删除HTML标记之间的空格和换行符。

var widgetHTML = '    <div id="widget">        <h2>Widget</h2><p>Hi.</p>        </div>';

应该：

alert(widgetHTML); // <div id="widget"><h2>Widget</h2><p>Hi.</p></div>

我认为我需要的模式是：

>[\s]*<

不使用正则表达式就可以实现吗？

Answer 1

我尝试了user76888布置的技术，并且效果很好。为了方便起见，我将其打包到jQuery插件中，并认为社区可能会喜欢它，因此在这里：jQuery.fn.cleanWhitespace = function() {&nbsp; &nbsp; this.contents().filter(&nbsp; &nbsp; &nbsp; &nbsp; function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })&nbsp; &nbsp; &nbsp; &nbsp; .remove();&nbsp; &nbsp; return this;}要使用此功能，只需将其包含在脚本标签中，然后选择一个标签以使用jQuery清理并按如下所示调用函数：$('#widget').cleanWhitespace();

Answer 2

递归版本：jQuery.fn.htmlClean = function() {&nbsp; &nbsp; this.contents().filter(function() {&nbsp; &nbsp; &nbsp; &nbsp; if (this.nodeType != 3) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).htmlClean();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.textContent = $.trim(this.textContent);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return !/\S/.test(this.nodeValue);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }).remove();&nbsp; &nbsp; return this;}

Answer 3

我认为这可以做到...cleanWhitespace: function(element) {&nbsp;element = $(element);&nbsp;for (var i = 0; i < element.childNodes.length; i++) {&nbsp; &nbsp;var node = element.childNodes[i];&nbsp; &nbsp;if (node.nodeType == 3 && !/\S/.test(node.nodeValue))&nbsp; &nbsp; &nbsp;Element.remove(node);&nbsp;}}