具有不间断空格的呈现字符串

I have some props that has a string that could contain characters such as &. It also contains spaces. I want to replace all spaces with  .

我有一些带有字符串的道具，可以包含&之类的字符。它还包含空格。我想把所有的空格都换成空格。

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

有简单的方法吗?请记住，我不能仅仅使用这种语法进行渲染:

<div dangerouslySetInnerHTML={{__html: myValue}} />

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.

因为我首先必须用它们的标记替换任何HTML实体。我不想这么做，看起来太低了。

Is there a way I can do this?

有办法吗?

4 个解决方案

#1

Instead of using the   HTML entity, you can simply use the Unicode non-breaking space character:

而不是使用HTML实体，只需使用Unicode不间断空格字符:

<div>{myValue.replace(/ /g, "\u00a0")}</div>

#2

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 white-space: nowrap attribute:

我知道这是一个老问题，这并不能完全满足您的要求，但与其编辑字符串，不如使用CSS white-space: nowrap属性更好地解决问题:

In html:

在html中:

<div style="white-space: nowrap">This won't break lines</div>

In react:

在反应:

<div style={{ whiteSpace: 'nowrap' }}>{myValue}</div>

#3

If you want to display a pretty xml:

如果您想显示漂亮的xml:

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

#4

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

你有一个值，比如"Hello world"我们说它在this。prop。value。

You can do this:

你可以这样做:

var parts = this.props.value.split(" "), array = [];
for (var i=0; i<parts.length; i++){
  // add the string
  array.push(<span key={i * 2}>{parts[i]}</span>);
  // add the nbsp
  array.push(<span key={i * 2 + 1}>&nbsp;</span>);
}

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

return <div>{array}</div>;

jsbin