删除图像中的空白

问题描述：

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

上面的HTML包含空格，也 ，
我想删除使用jQuery。
如何做到这一点？

已经试过用这个脚本但没有工作。

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

可能的dup http://stackoverflow.com/questions/1539367/remove-whitespace-and-line-breaks-between-html-elements-using-jquery – elclanrs 2012-04-11 07:37:26

答

我认为你需要使用内容（），然后过滤掉所有textNodes这是一个简单的空间

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

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

类似的东西可能？如果你只得到了图像，那么你可以只取出&& this.data == " "部分

我已经编辑它看起来对空间和现在的jsfiddle测试：http://jsfiddle.net/Rurn2/

只适用于空白，但不是' ' – GusDeCooL 2012-04-11 07:39:02

改变了一下，现在尝试新的代码。 – voigtan 2012-04-11 07:46:28

你可能想要添加换行符：'/ ^（\ s | | \ n）* $ /'如果您还想要空格+ html空格和换行符，那么也可以为正则表达式 \ n例如不会是现在删除 – voigtan 2012-04-11 08:16:18

答

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

不能正常工作，已经测试过了 – GusDeCooL 2012-04-11 07:39:34

您无法删除所有来自innerHTML的空白，因为这将从HTML标签内删除空白。 – jfriend00 2012-04-11 07:54:47

咬，忘了那个空白：D ...傻。我建议在这里使用其他匹配html实体的答案，或者创建一个临时元素（'document.createElement'），用html填充它，以便将实体转换为空格，并使用解析的字符串。它将需要更多的代码，但它（通常来说）是解码/编码html实体的更安全的方法。如果你想要的是' '，所提供的答案jfriend00将工作得很好，但 – 2012-04-11 08:09:28

答

试试这个：

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

，它将删除img和src上img-elements的空格 – voigtan 2012-04-11 07:50:40

它只能用空白和 – OammieR 2012-04-11 07:52:48

您可以这样做因为这样也会从HTML标签中删除空格。 – jfriend00 2012-04-11 07:52:50

答

最安全的方法是找到所有文本节点，并将它们的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/

FYI，这个版本甚至会处理那些空格和 的组合文本节点。它通过删除所有空格和 然后看看是否还有剩下的东西。如果不是，那么它是一个只有空白的文本节点，所以它应该被删除。

删除图像中的空白

相关推荐