ReactJS render string with non-breaking spaces

HtmlReactjs

Html Problem Overview

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.

Is there a way I can do this?

Html Solutions

Solution 1 - Html

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

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

Solution 2 - Html

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:

In html:

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

In react:

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

Solution 3 - Html

If you want to display a pretty 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>
)

Solution 4 - Html

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 < nbsp />, then you'll be able to use a non-breaking space in React.

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.

Solution 5 - Html

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

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

Solution 6 - Html

So you have a value like this "Hello world", and we'll say it's in this.props.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

Categories
Recommended Html Solutions
Recommended Reactjs Solutions

Previous Solution:

How to use SVG markers in Google Maps API v3

Google MapsGoogle Maps-Api-3Svg

Next Solution:

Bad class file magic or version

AndroidIntellij IdeaAndroid Gradle-Plugin

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJack AllanView Question on Stackoverflow
Solution 1 - HtmlSophie AlpertView Answer on Stackoverflow
Solution 2 - HtmlAdrian MacneilView Answer on Stackoverflow
Solution 3 - HtmlTommyView Answer on Stackoverflow
Solution 4 - HtmlRyan BerdelView Answer on Stackoverflow
Solution 5 - HtmlRajView Answer on Stackoverflow
Solution 6 - HtmlBrigandView Answer on Stackoverflow