将空格替换为& nbsp; [英] replacing spaces with  

问题描述

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

 < p& 
< span class =item> Lorem Ipsum只是打印和排版的虚拟文本< / span>< span class =item>< / span>< span class = item> < / span> 
< / p> 
  

我要用& nbsp; ，由于 display：inline-block 这里显示的奇怪行为： http：// jsfiddle.net/SQuUZ/ （关于所有浏览器，dunno，但最新的Chrome和Firefox都是一样的）。

现在， ，所以是jQuery，我可以：

  $（'p'）。 ）.replace（/ / g，'& nbsp;'））; 
  

但是它会转义& nbsp;

显然，对于这样的实体目的我们可以使用 $（'p'）。html（）：

  $（'p'）。html（$（'p'）。html（）。replace（/ / g，'& nbsp;'））; 
  

但是这个更糟糕，因为它还添加了& nbsp ;

$

$

< span& nbsp; class =item> Lorem& nbsp; Ipsum& nbsp; is& nbsp; simple& nbsp; dummy& nbsp; text& nbsp;< / span><打印& nbsp;和& nbsp;排版< / span>< span& nbsp; class =item>& nbsp; industry  class =item> ; / span>
< / p>

<！ - TL; DR - >
< span& nbsp; class =item>< / span> <！ - 实际上无效... - >

它打破了一切...

注意：

• 不仅会有< span> （< p> ）中的项 $ b
• 慢速正则表达式是一个选项（问题是，我不能想出一个...）。



我在这里有什么选择？

更新：

事实，任何人都可以解释为什么多线/单行显示：inline-block; 有这样的错误？ （请参阅上面的小提示链接，并检查...）

问题已迁移到 display：inline-block;奇怪的间距行为

解决方案

  $（'p'）。contents ）.filter（function（）{
 return this.nodeType == 3 //文本节点
}）每个（function（）{
 this.data = this.data.replace / / g，'\\\ '）; 
}）; 
  

DEMO

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-block weird behavior shown here: http://jsfiddle.net/SQuUZ/ (dunno about all browsers, but latest Chrome and Firefox both act the same).

Now, since javascript is an option here, so is jQuery, I could:

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

But it escapes the   and turns out into a mess of entities.

Obviously, for such purposes we could use $('p').html():

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

But this one is even worse, because, it also adds   within the tags themselves:

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

And it breaks everything...

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

Question migrated to display: inline-block; weird spacing behavior

解决方案

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

DEMO

这篇关于将空格替换为&amp; nbsp;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！