Javascript 用 替换空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10474124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
replacing spaces with
提问by jolt
Let's assume the following element (look for the trailing and leading spaces):
让我们假设以下元素（查找尾随和前导空格）：
<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>
I want to replace all spaces with , due to display: inline-blockweird behavior shown here: http://jsfiddle.net/SQuUZ/(dunno about all browsers, but latest Chrome and Firefox both act the same).
由于display: inline-block这里显示的奇怪行为，我想用 替换所有空格：http: //jsfiddle.net/SQuUZ/（不知道所有浏览器，但最新的 Chrome 和 Firefox 的行为都一样）。
Now, since javascript is an option here, so is jQuery, I could:
现在，由于 javascript 是这里的一个选项，jQuery 也是一个选项，我可以：
$('p').text($('p').text().replace(/ /g, ' '));
But it escapes the and turns out into a mess of entities.
但它逃脱了 并变成了a mess of entities。
Obviously, for such purposes we could use $('p').html():
显然，出于这些目的，我们可以使用$('p').html()：
$('p').html($('p').html().replace(/ /g, ' '));
But this one is even worse, because, it also adds within the tags themselves:
但这个更糟糕，因为它也在 标签本身中添加了：
<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>
<!-- TL;DR -->
<span class="item"></span> <!-- is actually invalid... -->
And it breaks everything...
它打破了一切......
Notes:
笔记：
- There won't only be
<span>elements with classiteminside the container (that may also not always be<p>). - Slow regular expressions is an option (the problem is, I cannot come up with one...).
- 容器内不仅会有
<span>带有 class 的元素item（也可能不总是<p>）。 - 慢速正则表达式是一种选择（问题是，我想不出一个......）。
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...)
事实上，谁能解释为什么多行/单行会出现这样的错误display: inline-block;？（请参阅上面的小提琴链接，并检查...）
Question migrated to display: inline-block; weird spacing behavior
回答by gdoron is supporting Monica
回答by Qtax
Even tho jQuery is really great and does all things, CSS could also work in some cases:
即使jQuery 真的很棒并且可以做所有事情，CSS 也可以在某些情况下工作：
white-space: pre-wrap;
Demo.
演示。
CSS3 related: text-space-collapse
CSS3 相关： text-space-collapse
回答by Benjamin Hawkes-Lewis
could anyone explain why there is such a bug with that multi-line / single-line display: inline-block;? (See fiddle link above, and examine...)
谁能解释为什么多行/单行显示有这样的错误：inline-block;？（请参阅上面的小提琴链接，并检查...）
Consider:
考虑：
?<p><span style="display:inline-block">lorem </span>??????????????????<span>ipsum</span></p>
The space character is insidethe line box container created by display:inline-block. CSS 2.1 16.6.1describes how spaces in a line box must be processed:
空格字符内所创造的线箱集装箱display:inline-block。CSS 2.1 16.6.1描述了如何处理行框中的空格：
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.
随着每一行的布局... [i]fa 行尾的空格 (U+0020) 将 'white-space' 设置为'normal'、'nowrap' 或 'pre-line'，它被...删除.
As the space is at the end of the line insidethe inline block, it is removed.
由于空格位于行内块内的行尾，因此被删除。
Contrast:
对比：
<p><span style="display:inline-block">lorem</span> <span>ipsum</span></p>?
In this case, the space is not removed, because it is between two inline-level elements that make up a single line box.
在这种情况下，空格不会被移除，因为它位于构成单个行框的两个行内级元素之间。
回答by user1534664
you can use the <pre> </pre>element to make spaces visible. Its a fast solution if you want to visually display, lets say, ascii art.
您可以使用该<pre> </pre>元素使空间可见。如果您想直观地显示，比如说，ascii 艺术，它是一个快速的解决方案。
