ReactJS rende la stringa con spazi unificatori

90

Ho alcuni oggetti di scena che hanno una stringa che potrebbe contenere caratteri come &. Contiene anche spazi. Voglio sostituire tutti gli spazi con  .

C'è un modo semplice per farlo? Tieni presente che non posso eseguire il rendering utilizzando questa sintassi:

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

perché dovrei prima sostituire qualsiasi entità HTML con il loro markup. Non voglio doverlo fare, sembra un livello troppo basso.

C'è un modo per farlo?

html reactjs

— Jack Allan
fonte

1

perché è correlato a reagire?

— Marcelo Bezerra

1

Non è del tutto chiaro cosa vuoi fare. Vuoi semplicemente sostituire tutti gli spazi con &nbspl;, vuoi visualizzare letteralmente i tag HTML o c'è qualcos'altro che vuoi fare?

— Bojangles

Dipende da quando myValue è accessibile. Potresti aspettarlo nella funzione del ciclo di vita appropriata, analizzarlo e impostare un parsedflag che impedisce l'analisi multipla.

— David Hellsing,

se desideri visualizzare & nbsp; senza escape al dom con reagire, dovrai usare il dangerouslySetInnerHTMLmetodo. Non vedo davvero un modo per aggirare questo dato che potresti usare javascript per creare una stringa che sostituisce gli spazi con & nbsp; ma senza utilizzare il dangerouslySetInnerHTMLmetodo questi verranno evitati da React.

— Mike Driver

238

Invece di utilizzare l'  entità HTML, puoi utilizzare il carattere Unicode che  fa riferimento a (U + 00A0 SPAZIO NON-BREAKING):

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

— Sophie Alpert
fonte

3

Tieni presente che il carattere Unicode che stai utilizzando sopra è stato inserito nella lista nera dai browser a causa del suo abuso da parte di schemi di phishing. Vedi kb.mozillazine.org/Network.IDN.blacklist_chars

— Perry Tew

2

@ BenAlpert Buon punto. Sì. Ottimo punto. Solo indirizzi IDN per quanto ne so.

— Perry Tew

semplice ma efficace. grazie @BenAplert anche dopo 3 anni di post.

— YASH DAVE

Questo ha funzionato per me quando nient'altro ha funzionato. Grazie per l'aiuto!

— davidawad

2

Quella lista nera si applica ai nomi di dominio, non al codice HTML.

— JW.

35

So che questa è una vecchia domanda e non fa esattamente quello che hai chiesto, ma piuttosto che modificare la stringa, quello che vuoi ottenere è probabilmente risolto meglio usando il CSS white-space: nowrap attributo :

In html:

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

In reagire:

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

— Adrian Macneil
fonte

Grazie! Questa è la risposta migliore. E nel mio caso (un mucchio di link che non voglio racchiudere, ma non voglio nemmeno su una riga), ho aggiunto un :: after {content: ''; white-space: normal}

— chad steele

0

Se vuoi visualizzare un bel 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>
)

— Tommy
fonte

0

È molto difficile digitare qui senza che scompaia, quindi aggiungo un piccolo spazio bianco in modo che tutti possano vederlo. Se rimuovi lo spazio vuoto da questo tag <nbsp />, sarai in grado di utilizzare uno spazio unificatore in React.

React traduce questo tag JSX in uno spazio unificatore. Strano bizzarro: anche questo deve essere usato sulla stessa riga del testo che vuoi spaziare. Inoltre, gli spazi unificatori con questo tag non si accumulano in React.

— Ryan Berdel
fonte

Non funziona:

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

Per rimuovere lo spazio tra le stringhe, il codice seguente funziona per me. es: "afee dd" risultato: "afeedd"

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

— Raj
fonte

-4

Quindi hai un valore come questo "Hello world" e diremo che è dentro this.props.value.

Puoi farlo:

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

— Brigante
fonte