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

Вам нужно проверить для 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

Тег изображения уничтожается, поскольку тег img не включается с помощью text(), поэтому я предлагаю сначала сохранить изображение и добавить его после замены

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

Answer 4

Почему бы не поместить текст в 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'));
});