使用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

我尝试了用户76888布局的技术,它工作得很好.为方便起见,我把它打包成一个jQuery插件,并认为社区可能会喜欢它,所以这里:

jQuery.fn.cleanWhitespace = function() {
    this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}

要使用它,只需将其包含在脚本标记中,然后选择要使用jQuery清理的标记并像这样调用函数:

$('#widget').cleanWhitespace();

Answer 2

递归版本:

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

Answer 3

我想这会做到......

cleanWhitespace: function(element) {
 element = $(element);
 for (var i = 0; i < element.childNodes.length; i++) {
   var node = element.childNodes[i];
   if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
     Element.remove(node);
 }
}