2012-04-11 58 views
3

我有这样的HTML。删除图像中的空白

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

上面的HTML包含空格,也&nbsp;
我想删除使用jQuery。
如何做到这一点?

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

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

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

回答

1

我认为你需要使用内容(),然后过滤掉所有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/

+0

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

+0

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

+0

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

0

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

+1

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

+1

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

+0

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

0

试试这个:

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

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

+0

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

+0

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

0

最安全的方法是找到所有文本节点,并将它们的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,这个版本甚至会处理那些空格和&nbsp;的组合文本节点。它通过删除所有空格和&nbsp;然后看看是否还有剩下的东西。如果不是,那么它是一个只有空白的文本节点,所以它应该被删除。