将空格替换为答案

【问题标题】：replacing spaces with  将空格替换为
【发布时间】：2012-05-15 11:47:20
【问题描述】：

让我们假设以下元素（查找尾随和前导空格）：

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

它破坏了一切......

注意事项：

容器内不仅有 <span> 类的 item 元素（也可能不总是 <p>）。
慢速正则表达式是一种选择（问题是，我想不出一个……）。

我有哪些选择？

更新：

~~事实上，谁能解释为什么多行/单行display: inline-block; 会有这样的错误？（请参阅上面的小提琴链接，并检查...）~~

问题迁移到display: inline-block; weird spacing behavior

【问题讨论】：

不要在这样的 html 块上使用正则表达式，因为你正在发现。您将获得整个子树，包括标签。相反，您应该只在子树中查找文本节点并单独操作这些节点。
我知道用于 HTML 操作的正则表达式。至于 NODE_TEXT 操作，我找不到插入 html 内容的方法。除了没有破坏标签之外，所有结果都与.text() 相同。
感谢您的提问，很有趣！
@Qtax，一旦我的应用程序准备好公开测试版，你就可以阅读它的描述，当它准备好时我会通知你。
不清楚真正的问题是什么，因为您指的是 jsfiddle，而不是问题描述。为什么要用实体替换空格而不是用实际的不间断空格替换它们？

标签： javascript jquery html css regex

【解决方案1】：

您可以使用<pre> </pre> 元素使空格可见。如果您想直观地显示，比如 ascii 艺术，它是一个快速的解决方案。

【讨论】：

【解决方案2】：

谁能解释为什么多行/单行显示存在这样的错误：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) 在一行的末尾有 'white-space' 设置为 'normal'、'nowrap' 或 'pre-line'，它被……删除了。

由于空格位于行尾inside inline 块，它被删除。

对比度：

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

在这种情况下，空格不会被删除，因为它位于构成单个行框的两个行内级元素之间。

【讨论】：

【解决方案3】：

即使 jQuery is really great and does all things，CSS 在某些情况下也可以工作：

white-space: pre-wrap;

Demo.

CSS3 相关：text-space-collapse

【讨论】：

我的应用程序也使用了white-space。但是，我需要那个 JS 解决方案，因为不是显示问题，而是因为我需要这些元素在视觉上可编辑。
比使用好 100 倍

【解决方案4】：

$('p').contents().filter(function(){
    return this.nodeType == 3 // Text node
}).each(function(){
    this.data = this.data.replace(/ /g, '\u00a0');
});

DEMO

【讨论】：

jsfiddle.net/SQuUZ/2 对我来说看起来不太好，因为 &amp;nbsp; 保留为文本，而不是成为 HTML 实体。这就是我在回复 Marc B 的评论中提到的，我找不到将 &amp;nbsp; 转换为实体的方法（除非我解释得很糟糕）。 &amp;nbsp; 改为 &amp;nbsp;，与 .text() 一样。
@psyketom。让我检查一下 jQuery 源代码，可能需要一些时间……在我进去的时候，在背景中放一些戏剧性的音乐。
Oki，doki，如果*.replace(/ /g, '\u00a0'); 就可以了。 \u00a0 解析为 &amp;nbsp;。
@psyketom。我刚刚找到了相同的解决方案。 (here)
@gdoron 我也在那里读到过，在问 tho' 之前，但厌倦了 NODE_TEXT 失败，所以没有尝试这种方式。