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; 
}