blocks|key|4605075|text|所以你有一个类似于"Hello+world“的值，我们说它是以this.props.value表示的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4605076|您可以这样做：|4605077|var+parts+=+this.props.value.split("+"),+array+=+[];
for+(var+i=0;+i<parts.length;+i%2B%2B){
++//+add+the+string
++array.push(<span+key={i+*+2}>{parts[i]}</span>);
++//+add+the+nbsp
++array.push(<span+key={i+*+2+%2B+1}>&nbsp;</span>);
}

//+remove+the+trailing+nbsp
array.pop();

return+<div>{array}</div>;|code-block|syntax|javascript|4605078|jsbin|4605079|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/himezazi/3/edit^0|V|G|0|0|0|0|5|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>So you have a value like this "Hello world", and we'll say it's in <code>this.props.value</code>.</p>

<p>You can do this:</p>



<pre class="lang-js prettyprint-override"><code>var parts = this.props.value.split(" "), array = [];
for (var i=0; i&lt;parts.length; i++){
  // add the string
  array.push(&lt;span key={i * 2}&gt;{parts[i]}&lt;/span&gt;);
  // add the nbsp
  array.push(&lt;span key={i * 2 + 1}&gt;&amp;nbsp;&lt;/span&gt;);
}

// remove the trailing nbsp
array.pop();

return &lt;div&gt;{array}&lt;/div&gt;;
</code></pre>

<h2><a href="http://jsbin.com/himezazi/3/edit" rel="nofollow">jsbin</a></h2>


blocks|key|98735|text|您可以使用&nbsp;引用的Unicode字符(U%2B00A0不间断空格)，而不是使用Unicode实体：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|98736|<div>{myValue.replace(/+/g,+"\u00a0")}</div>|code-block|syntax|javascript|98737|entityMap^0|5|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Instead of using the <code>&amp;nbsp;</code> HTML entity, you can use the Unicode character which <code>&amp;nbsp;</code> refers to (U+00A0 NON-BREAKING SPACE):</p>

<pre><code>&lt;div&gt;{myValue.replace(/ /g, "\u00a0")}&lt;/div&gt;
</code></pre>


blocks|key|98786|text|我知道这是一个老生常谈的问题，而且这并不完全符合您的要求，但是您想要实现的目标可能不是编辑字符串，而是使用CSS+white-space:+nowrap属性可以更好地解决：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|98787|在html中：|98788|<div+style="white-space:+nowrap">This+won't+break+lines</div>|code-block|syntax|javascript|98789|在react中：|98790|<div+style={{+whiteSpace:+'nowrap'+}}>{myValue}</div>|98791|entityMap^0|1L|J|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>I know this is an old question, and this doesn't exactly do what you asked for, but rather than editing the string, what you want to achieve is probably be solved better using the CSS <code>white-space: nowrap</code> attribute:</p>

<p>In html:</p>

<pre><code>&lt;div style="white-space: nowrap"&gt;This won't break lines&lt;/div&gt;
</code></pre>

<p>In react:</p>

<pre><code>&lt;div style={{ whiteSpace: 'nowrap' }}&gt;{myValue}&lt;/div&gt;
</code></pre>


blocks|key|98806|text|如果您想要显示一个漂亮的xml：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98807|var+str+=+"<test>\n\t\t<value>1</value>\n</test>\n".replace(/</g,+'&lt;').replace(/>/g,+'&gt;').replace(/\t/g,+"\u00a0").replace(/\n/g,+'<br/>');
return+(
++++<div+dangerouslySetInnerHTML={{__html:+str}}+></div>
)|code-block|syntax|javascript|98808|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you want to display a pretty xml: </p>

<pre><code>var str = "&lt;test&gt;\n\t\t&lt;value&gt;1&lt;/value&gt;\n&lt;/test&gt;\n".replace(/&lt;/g, '&amp;lt;').replace(/&gt;/g, '&amp;gt;').replace(/\t/g, "\u00a0").replace(/\n/g, '&lt;br/&gt;');
return (
    &lt;div dangerouslySetInnerHTML={{__html: str}} &gt;&lt;/div&gt;
)
</code></pre>


blocks|key|4605262|text|它很难在这里输入而不消失，所以我添加了一个小空格，这样每个人都可以看到它。如果您从这个标记<+nbsp+/>中删除了空格，那么您将能够在React中使用不间断的空格。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4605263|React将这个JSX标记转换为不间断的空格。奇怪的怪癖:这也必须与你想要空格的文本在同一行上使用。此外，带有此标记的不间断空格不会在React中堆叠。|4605264|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Well it's very hard to type on here without it disappearing, so I'm adding a little whitespace so everyone can see it. If you remove the whitespace from this tag &lt; nbsp />, then you'll be able to use a non-breaking space in React.</p>

<p>React translates this JSX tag into a non-breaking space. Weird quirk: This must also be used on the same line as the text you want to space. Also, non-breaking spaces with this tag don't stack in React.</p>


blocks|key|98883|text|要删除字符串之间的空格，下面的代码适用于我。例如："afee+dd“结果："afeedd”|type|unstyled|depth|inlineStyleRanges|entityRanges|data|98884|{myValue.replace(/\s%2B/g，'')}|98885|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>To remove space in between string, below code works for me. 
eg: "afee dd " 
     result: "afeedd"</p>

{myValue.replace(/\s+/g, '')}


<p>I have some props that has a string that could contain characters such as &amp;.
It also contains spaces.  I want to replace all spaces with <code>&amp;nbsp;</code>.</p>

<p>Is there an easy way I can do this?  Bear in mind that I cannot just render using this syntax:</p>

<pre><code>&lt;div dangerouslySetInnerHTML={{__html: myValue}} /&gt;
</code></pre>

<p>because I would first have to replace any HTML entities with their markup.  I don't want to have to do this, it seems too low level.</p>

<p>Is there a way I can do this?</p>


ReactJS render string with non-breaking spaces

我有一些道具，它们的字符串可以包含诸如&之类的字符。它还包含空格。我想用&nbsp;替换所有的空格。有什么简单的方法可以做到这一点吗？请记住，我不能只使用以下语法进行渲染：<div dangerouslySetInnerHTML={{__html: myValue}} />因为我必须首先将任何HTML实体替换为它们的标...

问包含不间断空格的ReactJS呈现字符串
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问包含不间断空格的ReactJS呈现字符串EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问包含不间断空格的ReactJS呈现字符串
EN