Вопрос по jquery, regex, javascript, css, html – замена пробелов на & nbsp;

21

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

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

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

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

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

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

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

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

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

<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... -->

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

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...)

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

Error: User Rate Limit ExceededhtmlError: User Rate Limit Exceeded.text()Error: User Rate Limit Exceeded jolt
Error: User Rate Limit Exceeded jolt
Error: User Rate Limit Exceeded Marc B
Error: User Rate Limit Exceeded gdoron
Error: User Rate Limit Exceeded Jukka K. Korpela

Ваш Ответ

4   ответа
34
$('p').contents().filter(function(){
    return this.nodeType == 3 // Text node
}).each(function(){
    this.data = this.data.replace(/ /g, '\u00a0');
});

DEMO

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
jsfiddle.net/SQuUZ/2Error: User Rate Limit Exceeded&nbsp;Error: User Rate Limit Exceeded&nbsp;Error: User Rate Limit Exceeded&nbsp;Error: User Rate Limit Exceeded&amp;nbsp;Error: User Rate Limit Exceeded.text(). jolt
Error: User Rate Limit Exceededhere)
Error: User Rate Limit Exceeded*.replace(/ /g, '\u00a0');. \u00a0Error: User Rate Limit Exceeded&nbsp;. jolt
3

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

Error: User Rate Limit Exceeded

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

Error: User Rate Limit ExceededinsideError: User Rate Limit Exceededdisplay:inline-block. Error: User Rate Limit ExceededError: User Rate Limit Exceeded

As each line is laid out … [i]f a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is … removed.

Error: User Rate Limit ExceededinsideError: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

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

Error: User Rate Limit Exceeded

1

Error: User Rate Limit Exceeded<pre> </pre>Error: User Rate Limit Exceeded

17

Error: User Rate Limit ExceededError: User Rate Limit ExceededError: User Rate Limit Exceeded

white-space: pre-wrap;

Error: User Rate Limit Exceeded.

Error: User Rate Limit Exceededtext-space-collapse

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededwhite-spaceError: User Rate Limit Exceeded jolt

Похожие вопросы