Question

我有这样的HTML。

<td id="foo">
    <img src="foo.png" /> <img src="foo.png" /> <img src="foo.png" />&nbsp; 
</td>

上面的HTML包含空格和 ，
我想用jQuery删除它怎么做？

已经尝试使用此脚本但无法正常工作。

$('#foo').text().replace(/ /g,'');

Answer 1

我认为您需要使用contents（）然后过滤掉所有纯空格的textNodes

var nodes = $("#foo").contents().filter(function() {
    return this.nodeType == 3 && /^(\s|&nbsp;)*$/.test(this.nodeValue);
}).remove();

//console.log($("#foo").html());

这样的事可能吗？如果你只有图像，那么你可以删除&& this.data == " "部分

我已编辑它查找空格，现在，jsfiddle test：http://jsfiddle.net/Rurn2/

Answer 2

你试过这个：$('#foo').html($('#foo').html().replace(/ /g,''));？您的代码将根据元素中的文本返回一个无空格的字符串。但是如果要覆盖元素的文本，则必须在大括号之间输入新字符串。

Answer 3

试试这个：

var html = '>' + $('#foo').html() + '<';
html = html.replace(/&nbsp;/g, '').replace(/>\s+</gm, '><');
$('#foo').html(html.substring(1, html.length-1));

Answer 4

最安全的方法是找到所有文本节点并将其nodeValue与您正在查找的内容进行比较，并删除仅包含空格的节点。直接对innerHTML进行操作充满了困难，因为你必须确保你没有弄乱实际标签内的东西（例如应该在那里的空白）。在文本节点上操作仅使用浏览器来保证您的安全。您可以找到符合您条件的所有文本节点：

$("#foo").contents().filter(function() {
    if (this.nodeType == 3) {
        return(this.nodeValue.replace(/\s|&nbsp;/g, "") == "");
    }
    return(false);
}).remove();

您可以在此处查看：http://jsfiddle.net/jfriend00/RNTbT/

仅供参考，此版本甚至可以处理由空格和 组合而成的文本节点。它的工作原理是删除所有空格和 ，然后查看是否还有其他内容。如果没有，那么它只是一个空白文本节点，因此应将其删除。

删除表中带有图像的空格

4 个答案: