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?
Instead of using the HTML entity, you can use the Unicode character which refers to (U+00A0 NON-BREAKING SPACE):
<div>{myValue.replace(/ /g, "\u00A0")}</div>
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>
<p style={{word-wrap: nowrap}}>Edgar Woolf, Noel Langley, Florence Ryerson</p>, nothing wraps and the string overflows the container. In this case, dangerouslySetInnerHTML appears to be the only option for selectively applying between specific words.
In my opinion, the best way to display is to print it explicitly in the code. (It is sad that react does not support such simple, basic, features out of the box.)
If react's jsx throws error, it means nbsp was put incorrectly into code.
Simple rule is that all special characters should be wrapped with tag.
In most cases it's just possible to put it as it is:
return <span>{n} followers</span>;
But, if you want to add something like that:
// this will cause an error
{number > 0 && (<strong>{number}</strong> )}
you need to wrap part with nbsp with parent tag (for example, with empty):
{number > 0 && (
<>
<strong>{number}</strong>
</>
)}
This might be useful in cases when special character is need only in some cases (when number is greater than 0, for example).
If you want to display a pretty xml:
var str = "<test>\n\t\t<value>1</value>\n</test>\n".replace(/</g, '<').replace(/>/g, '>').replace(/\t/g, "\u00a0").replace(/\n/g, '<br/>');
return (
<div dangerouslySetInnerHTML={{__html: str}} ></div>
)
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.
Warning: The tag <nbsp> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letterTo remove space in between string, below code works for me. eg: "afee dd " result: "afeedd"
{myValue.replace(/\s+/g, '')}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}> </span>);
}
// remove the trailing nbsp
array.pop();
return <div>{array}</div>;
 l;, do you want to display HTML tags literally or is there something else you want to do?myValueis accessible. You could wait for it in appropriate lifecycle function, parse it and set aparsedflag that prevents multiple parsing.dangerouslySetInnerHTMLmethod. I don't really see a way around that since you could use javascript to create a string replacing spaces with but without using thedangerouslySetInnerHTMLmethod these will be escaped by react.