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

您需要检查nodeType并仅替换此值：

$(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

这不需要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;
}

Answer 3

为什么不将文本放在div中并修改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 4

图像标记被破坏，因为使用text()不包含img-tag所以我建议您先保存图像并在替换后添加它

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

javascript - 替换文本但不改变p标签内的图像

4 个答案: