ReactJS-Renderzeichenfolge mit nicht unterbrechenden Leerzeichen

85

Ich habe einige Requisiten mit einer Zeichenfolge, die Zeichen wie & enthalten kann. Es enthält auch Leerzeichen. Ich möchte alle Leerzeichen durch ersetzen  .

Gibt es eine einfache Möglichkeit, dies zu tun? Denken Sie daran, dass ich nicht einfach mit dieser Syntax rendern kann:

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

weil ich zuerst alle HTML-Entitäten durch ihr Markup ersetzen müsste. Ich möchte das nicht tun müssen, es scheint zu niedrig.

Gibt es eine Möglichkeit, dies zu tun?

html reactjs Jack Allan
quelle
1
Warum hängt das mit der Reaktion zusammen?
Marcelo Bezerra
1
Es ist nicht ganz klar, was Sie tun möchten. Möchten Sie einfach alle Leerzeichen durch ersetzen &nbspl;, möchten Sie HTML-Tags buchstäblich anzeigen oder möchten Sie noch etwas tun?
Bojangles
Es hängt davon ab, wann myValue zugänglich ist. Sie können in der entsprechenden Lebenszyklusfunktion darauf warten, es analysieren und ein parsedFlag setzen, das das mehrfache Parsen verhindert.
David Hellsing
Wenn Sie & nbsp; Sie müssen die dangerouslySetInnerHTMLMethode anwenden, ohne sich dem Dom zu entziehen und zu reagieren . Ich sehe keinen Ausweg, da Sie Javascript verwenden könnten, um eine Zeichenfolge zu erstellen, die Leerzeichen durch & nbsp; aber ohne die dangerouslySetInnerHTMLMethode zu verwenden, werden diese durch Reaktion entkommen.
Mike Driver

Antworten:

231

Anstatt die &nbsp;HTML-Entität zu verwenden, können Sie das Unicode-Zeichen verwenden, &nbsp;auf das verwiesen wird (U + 00A0 NON-BREAKING SPACE):

<div>{myValue.replace(/ /g, "\u00a0")}</div>
Sophie Alpert
quelle
3
Bitte beachten Sie, dass das oben verwendete Unicode-Zeichen von Browsern aufgrund seines Missbrauchs durch Phishing-Schemata auf die schwarze Liste gesetzt wird. Siehe kb.mozillazine.org/Network.IDN.blacklist_chars
Perry Tew
2
@ BenAlpert Guter Punkt. Ja. Sehr guter Punkt. Nur IDN-Adressen nach meinem Wissen.
Perry Tew
einfach und doch effektiv. thx @BenAplert auch nach 3 Jahren Post.
YASH DAVE
Das hat bei mir funktioniert, als sonst nichts. Danke für die Hilfe!
Davidawad
2
Diese schwarze Liste gilt für Domainnamen, nicht für HTML-Code.
JW.
32

Ich weiß, dass dies eine alte Frage ist, und dies tut nicht genau das, wonach Sie gefragt haben, aber anstatt die Zeichenfolge zu bearbeiten, wird das, was Sie erreichen möchten, wahrscheinlich besser mit dem CSS- white-space: nowrapAttribut gelöst :

In HTML:

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

In Reaktion:

<div style={{ whiteSpace: 'nowrap' }}>{myValue}</div>
Adrian Macneil
quelle
Danke dir! Dies ist die bessere Antwort. Und in meinem Fall (eine Reihe von Links, die ich nicht umbrechen möchte, aber auch nicht in einer Zeile) habe ich ein :: after {content: ''; Leerraum: normal}
Chad Steele
0

Wenn Sie eine hübsche XML anzeigen möchten: 

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>
)
Tommy
quelle
0

Nun, es ist sehr schwer, hier zu tippen, ohne dass es verschwindet, also füge ich ein kleines Leerzeichen hinzu, damit jeder es sehen kann. Wenn Sie das Leerzeichen aus diesem Tag <nbsp /> entfernen, können Sie in React ein nicht unterbrechendes Leerzeichen verwenden.

React übersetzt dieses JSX-Tag in einen nicht unterbrechenden Bereich. Seltsame Eigenart: Dies muss auch in derselben Zeile wie der Text verwendet werden, den Sie platzieren möchten. Nicht unterbrechende Leerzeichen mit diesem Tag werden in React nicht gestapelt.

Ryan Berdel
quelle
Funktioniert nicht:Warning: The tag <nbsp> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter
Ross Attrill
0

Um Leerzeichen zwischen den Zeichenfolgen zu entfernen, funktioniert der folgende Code für mich. zB: "afee dd" Ergebnis: "afeedd"

{myValue.replace (/ \ s + / g, '')}
Raj
quelle
-4

Sie haben also einen Wert wie diesen "Hallo Welt", und wir werden sagen, dass er in ist this.props.value.

Du kannst das:

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

Räuber
quelle