刪除圖像中的空白

我有這樣的HTML。刪除圖像中的空白

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

上面的HTML包含空格，也 ，
我想刪除使用jQuery。
如何做到這一點？

已經試過用這個腳本但沒有工作。

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

來源

2012-04-11 GusDeCooL

可能的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/

來源

2012-04-11 07:33:12 voigtan

只適用於空白，但不是' ' – 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,''));？您的代碼將根據元素中的文本返回一個空白字符串。但是如果你想覆蓋元素的文本，你必須在大括號之間輸入新的字符串。

來源

2012-04-11 07:24:14

不能正常工作，已經測試過了 – 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));

來源

2012-04-11 07:46:52

，它將刪除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，這個版本甚至會處理那些空格和 的組合文本節點。它通過刪除所有空格和 然後看看是否還有剩下的東西。如果不是，那麼它是一個只有空白的文本節點，所以它應該被刪除。

來源

2012-04-11 07:48:12 jfriend00

刪除圖像中的空白

回答

相關問題