замена пробелов на & nbsp;

Предположим, что следующий элемент (ищем завершающие и ведущие пробелы):

<code><p>
    <span class="item">Lorem Ipsum is simply dummy text </span><span class="item">of the printing and typesetting</span><span class="item"> industry.</span>
</p>
</code>

Я хочу заменить все пробелы на&nbsp;, из-заdisplay: inline-block странное поведение показано здесь:http://jsfiddle.net/SQuUZ/ (не знаю обо всех браузерах, но последние версии Chrome и Firefox работают одинаково).

Теперь, поскольку здесь есть опция javascript, как и jQuery, я мог бы:

<code>$('p').text($('p').text().replace(/ /g, '&nbsp;'));
</code>

Но это ускользает от&nbsp; и превращается вa&nbsp;mess&nbsp;of&nbsp;entities.

Очевидно, что для таких целей мы могли бы использовать$('p').html():

<code>$('p').html($('p').html().replace(/ /g, '&nbsp;'));
</code>

Но этот еще хуже, потому что он также добавляет&nbsp; внутри самих тегов:

<code><p>
    <span&nbsp;class="item">Lorem&nbsp;Ipsum&nbsp;is&nbsp;simply&nbsp;dummy&nbsp;text&nbsp;</span><span&nbsp;class="item">of&nbsp;the&nbsp;printing&nbsp;and&nbsp;typesetting</span><span&nbsp;class="item">&nbsp;industry.</span>
</p>

<!-- TL;DR -->
<span&nbsp;class="item"></span> <!-- is actually invalid... -->
</code>

И это все ломает ...

Notes: There won't only be <span> elements with class item inside the container (that may also not always be <p>). Slow regular expressions is an option (the problem is, I cannot come up with one...).

What options do I have here?

Update:

In fact, could anyone explain why there is such a bug with that multi-line / single-line display: inline-block;? (See fiddle link above, and examine...)

Вопрос перенесен вдисплей: встроенный блок; странное расстояние

 Jukka K. Korpela07 мая 2012 г., 06:45
Не совсем понятно, в чем реальная проблема, так как вы имеете в виду jsfiddle, а не описание проблемы. И почему вы заменяете пробелы на сущности, а не заменяете их фактическими пробелам
 Marc B06 мая 2012 г., 22:44
Как вы выяснили, не используйте регулярные выражения в таких блоках HTML. Вы получаете все дочернее дерево, включая теги. Вместо этого вы должны искать только текстовые узлы в дочернем дереве и манипулировать ими по отдельности.
 gdoron06 мая 2012 г., 23:12
Спасибо за вопрос, это было весело!
 jolt06 мая 2012 г., 23:49
@ Qtax, как только мое приложение будет готово к публичной бета-версии, вы сможете прочитать его в описании, и я сообщу вам, когда оно будет готово.
 jolt06 мая 2012 г., 22:47
Я знаю о регулярных выражениях для работы с HTML. Что касается манипуляции NODE_TEXT, я не смог найти способ вставитьhtml контент для тех. Все закончилось как с.text() кроме, не нарушая теги.

Ответы на вопрос(4)

Решение Вопроса
$('p').contents().filter(function(){
    return this.nodeType == 3 // Text node
}).each(function(){
    this.data = this.data.replace(/ /g, '\u00a0');
});

DEMO

 Umbrella06 мая 2012 г., 22:49
jQuery просто побеждает. + 1
 jolt06 мая 2012 г., 22:53
Jsfiddle.net / SQuUZ / 2 мне не подходит, потому что&nbsp; остается текстом, а не становится сущностью HTML. И это то, что я упомянул в ответном комментарии для Марка Б, что я не смог найти способ изменить это&nbsp; в сущность (за исключением того, что я плохо объяснил).&nbsp; становится&amp;nbsp; вместо этого, как с.text().
 jolt06 мая 2012 г., 23:07
Ладно, доки, это работает, если*.replace(/ /g, '\u00a0');. \u00a0 разрешается в&nbsp;.
 gdoron06 мая 2012 г., 23:11
@ psycketom. Я только что нашел такое же решение. Во)
 g,doron06 мая 2012 г., 22:59
@ psycketom. Позвольте мне проверить исходный код jQuery, это может занять некоторое время ... Поместите немного драматической музыки на задний план, пока я вхожу.

Даже тоjQuery действительно хорош и все делает, CSS также может работать в некоторых случаях:

white-space: pre-wrap;

Demo.

Связано с CSS3:text-space-collapse

 jolt07 мая 2012 г., 01:04
Я используюwhite-space тоже для моего приложения. Но мне нужно было это решение JS не из-за проблем с отображением, а из-за визуально редактируемых элементов.
 Case05 февр. 2019 г., 03:06
100X лучше, чем & nbsp;

<pre> </pre>лемент @, чтобы сделать пробелы видимыми. Это быстрое решение, если вы хотите визуально отобразить, скажем, ascii art.

почему существует такая ошибка с этим многострочным / однострочным дисплеем: inline-block ;? (См. Ссылку на скрипку выше и изучите ...)

Рассмотреть возможность

​<p><span style="display:inline-block">lorem </span>​​​​​​​​​​​​​​​​​​<span>ipsum</span></p>

Пробел символ Внутри контейнер строки, созданныйdisplay:inline-block. CSS 2,1 16.6.1 описывает, как должны обрабатываться пробелы в линейном блоке:

Поскольку каждая строка размечена… [i] fa space (U + 0020) в конце строки имеет «пробел», установленный на «normal», «nowrap» или «pre-line», это… удален.

Поскольку пробел находится в конце строки Внутри встроенный блок, он удален.

Contrast:

<p><span style="display:inline-block">lorem</span> <span>ipsum</span></p>​

В этом случае пробел не удаляется, потому что он находится между двумя элементами на уровне строки, которые составляют одну строку.

Ваш ответ на вопрос