Jak dodać podziały wierszy do obszaru tekstowego HTML?


156

Edytuję za <textarea>pomocą JavaScript. Problem polega na tym, że kiedy robię w nim znaki końca linii, nie wyświetlają się. W jaki sposób mogę to zrobić?

Otrzymuję wartość, aby napisać funkcję, ale nie spowoduje to łamania linii.


Demo Codepen z wyrażeniem regularnym i <pre></pre>rozwiązaniami pokazanymi
a.guerrero.g87

Odpowiedzi:


265

Problem wynika z faktu, że podziały wierszy ( \n\r?) To nie to samo, co <br/>znaczniki HTML

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

AKTUALIZACJA

Ponieważ wiele komentarzy i moje własne doświadczenie pokazały mi, że to <br> rozwiązanie nie działa zgodnie z oczekiwaniami, oto przykład, jak dołączyć nowy wiersz do elementu textarea„\ r \ n”

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

Postanowiłem zrobić to edycję, a nie jako nowe pytanie, ponieważ jest to zbyt popularna odpowiedź, aby była błędna lub niekompletna.


7
U mnie to też działa. W jQuery możesz zrobić coś takiego: $ ('# caption'). Html ($ ('# caption'). Text (). Replace (/ \ n \ r? / G, '<br />')) ;
DavGarcia,

2
Podział wiersza /(\r\n|\n|\r)/gm Regexp
tothemario

3
Prawe wyrażenie regularne jest /\r\n?|\n/gbez przechwytywania, bez multilinii.
aMarCruz

5
Podejrzany <br>się myli. Dla uniwersalnego zerwaniu linii w textarea chcesz \r\n. Na przykład przeglądarka UC ignoruje <br> i \ n w obszarach tekstowych. Zobacz Dodawanie podziału wiersza w polu tekstowym HTML .
Bob Stein

2
Używanie <br> wewnątrz textarea nie działa. Przynajmniej nie w Chrome, gdzie testowałem. Jednak użycie \ n wydaje się działać. Użyj <br>, jeśli zamierzasz wstawić tekst jako czysty html, tj. Poza jakimkolwiek elementem wejściowym.
Snorvarg

24

jeśli używasz ogólnego skryptu java i musisz wtedy przypisać ciąg do wartości obszaru tekstowego

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

trzeba wymienić \nlub < br >do\\\n

w przeciwnym razie działa Uncaught SyntaxError: Unexpected token ILLEGALwe wszystkich przeglądarkach.


18

Może ktoś uzna to za przydatne:

Miałem problem z łamaniem linii, które były przekazywane ze zmiennej serwera do zmiennej javascript, a następnie javascript zapisywał je do textarea (używając wiązania wartości knockout.js).

rozwiązaniem była podwójna ucieczka od nowych linii:

orginal.Replace("\r\n", "\\r\\n")

po stronie serwera, ponieważ z jednym tylko znakiem zmiany znaczenia javascript nie analizował.


użycie "\\ n" działa dla mnie w Windows i zakładam, że będzie działać dobrze w systemach Linux.
Samih A,


6

Jeśli chcesz wyświetlić tekst na własnej stronie, możesz użyć <pre>tagu.

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});
<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>


3

Nowa linia jest po prostu białą spacją w przeglądarce i nie będzie traktowana inaczej niż zwykła spacja („”). Aby uzyskać nową linię, musisz wstawić <BR />elementy.

Kolejna próba rozwiązania problemu: wpisz tekst w obszar tekstu, a następnie dodaj trochę JavaScript za przyciskiem, aby przekonwertować niewidoczne znaki na coś czytelnego i zrzucić wynik do pliku DIV. Dzięki temu dowiesz się, czego chce Twoja przeglądarka.


3

Mam obszar tekstowy z identyfikatorem #infoartist follow:

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

W kodzie javascript otrzymam wartość textarea i zamieniam <br />znak ucieczki nowej linii (\ n \ r) na tag, taki jak:

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

Więc jeśli używasz jquery (tak jak ja):

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

Mam nadzieję, że ci to pomogło. :-)



0

oto rzecz, którą zrobiłem z tymi samymi problemami, które miałem.

kiedy przekazuję tekst do następnej strony w jsp, czytam go jako obszar tekstu zamiast czytać coś takiego

więc wynik przyszedł tak, jak chciałeś. a dla innych właściwości możesz użyć jak poniżej.

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.