javascript - 替換文本，但不改變p標籤內的圖像

Question

我有以下的HTML。

<p><img src="myimage.jpg" />This is my text</p> 

而下面的javascript用空格替換空格。這工作正常，除了它刪除圖像的事實。

$("div.myDiv p").each(function() { 
    $(this).text($(this).text().replace(/ /g, '\xA0')); 
}); 

任何想法，我可以替換文本中的空格，而不會改變圖像。

Answer 1

您需要檢查的節點類型和替換隻有這個值：

$(function() { 
    $("p").contents().each(function(i, e) { 
     if(e.nodeType === 3) { 
      e.nodeValue = e.nodeValue.replace(/ /g, '\xA0') 
     } 
    }); 
}); 

例子： http://www.jsfiddle.net/4yUqL/42/

Answer 2

爲什麼不把文字股利和修改DIV即文本：

<p><img src="myimage.jpg" /><div>This is my text</div></p> 
$("div.myDiv p div").each(function() { 
    $(this).text($(this).text().replace(/ /g, '\xA0')); 
}); 

Answer 3

圖片標籤被破壞，因爲img-tag不包含在使用text()所以我建議您先保存圖片並在您重新添加圖片之前添加它地方

$("div.myDiv p").each(function() { 
    var $img = $(this).find('img:first'); 
    $(this).text($(this).text().replace(/ /g, '\xA0')); 
    $(this).prepend($img) ; 
}); 

Answer 4

沒有JavaScript需要這個。

<p><img src="myimage.jpg" />This is my text</p> 

和CSS

div.myDiv p { 
    white-space: nowrap; 
} 

根據您的文檔結構，它可能是一個額外的imgAndCaption CSS類添加到您的段落在需要的地方有用一點：

p.imgAndCaption { 
    white-space: nowrap; 
}