ReactJS membuat string dengan spasi non-breaking

90

Saya memiliki beberapa props yang memiliki string yang dapat berisi karakter seperti &. Ini juga berisi spasi. Saya ingin mengganti semua spasi dengan  .

Apakah ada cara mudah untuk melakukan ini? Ingatlah bahwa saya tidak bisa begitu saja merender menggunakan sintaks ini:

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

karena saya pertama-tama harus mengganti entitas HTML apa pun dengan markup mereka. Saya tidak ingin harus melakukan ini, sepertinya levelnya terlalu rendah.

Apakah ada cara agar saya bisa melakukan ini?

html reactjs Jack Allan
sumber
1
mengapa ini terkait dengan bereaksi?
Marcelo Bezerra
1
Tidak sepenuhnya jelas apa yang ingin Anda lakukan. Apakah Anda ingin hanya mengganti semua ruang dengan &nbspl;, apakah Anda ingin tag tampilan HTML harfiah atau ada sesuatu yang lain yang ingin Anda lakukan?
Bojangles
Itu tergantung kapan myValue dapat diakses. Anda dapat menunggunya di fungsi siklus proses yang sesuai, menguraikannya, dan menyetel parsedtanda yang mencegah penguraian ganda.
David Hellsing
jika Anda ingin merender & nbsp; unescaped ke dom dengan react, Anda akan perlu menggunakan dangerouslySetInnerHTMLmetode ini. Saya tidak benar-benar melihat jalan keluarnya karena Anda dapat menggunakan javascript untuk membuat string yang menggantikan spasi dengan & nbsp; tetapi tanpa menggunakan dangerouslySetInnerHTMLmetode ini, ini akan lolos dengan bereaksi.
Mike Driver

Jawaban:

238

Alih-alih menggunakan &nbsp;entitas HTML, Anda dapat menggunakan karakter Unicode yang &nbsp;mengacu pada (U + 00A0 NON-BREAKING SPACE):

<div>{myValue.replace(/ /g, "\u00a0")}</div>
Sophie Alpert
sumber
3
Harap perhatikan bahwa karakter unicode yang Anda gunakan di atas masuk daftar hitam oleh browser karena penyalahgunaannya oleh skema phishing. Lihat kb.mozillazine.org/Network.IDN.blacklist_chars
Perry Tew
2
@TwitAsahOtak. Iya. Poin yang sangat bagus. Hanya alamat IDN sepengetahuan saya.
Perry Tew
sederhana namun efektif. terima kasih @BenAplert bahkan setelah 3 tahun posting.
YASH DAVE
Ini berhasil bagi saya ketika tidak ada yang berhasil. Terima kasih untuk bantuannya!
davidawad
2
Daftar hitam itu berlaku untuk nama domain, bukan kode HTML.
JW.
35

Saya tahu ini adalah pertanyaan lama, dan ini tidak persis melakukan apa yang Anda minta, tetapi daripada mengedit string, apa yang ingin Anda capai mungkin diselesaikan lebih baik menggunakan white-space: nowrapatribut CSS :

Dalam html:

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

Dalam reaksi:

<div style={{ whiteSpace: 'nowrap' }}>{myValue}</div>
Adrian Macneil
sumber
Terima kasih! Ini adalah jawaban yang lebih baik. Dan dalam kasus saya (sekumpulan tautan yang tidak ingin saya gabungkan, tetapi saya juga tidak ingin dalam satu baris), saya menambahkan :: after {content: ''; white-space: normal}
chad steele
0

Jika Anda ingin menampilkan xml yang cantik: 

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
sumber
0

Memang sangat sulit untuk mengetik di sini tanpa menghilang, jadi saya menambahkan sedikit spasi sehingga semua orang dapat melihatnya. Jika Anda menghapus spasi dari tag ini <nbsp />, Anda akan dapat menggunakan spasi non-breaking di React.

React menerjemahkan tag JSX ini ke dalam ruang non-breaking. Quirk aneh: Ini juga harus digunakan pada baris yang sama dengan teks yang ingin Anda beri spasi. Selain itu, spasi non-breaking dengan tag ini tidak dapat ditumpuk di React.

Ryan Berdel
sumber
Tidak bekerja: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

Untuk menghapus spasi di antara string, kode di bawah ini berfungsi untuk saya. misal: "afee dd" result: "afeedd"

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

Jadi, Anda memiliki nilai seperti ini "Halo dunia", dan kami akan mengatakannya masuk this.props.value.

Kamu bisa melakukan ini:

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

Perampok
sumber