Nowa linia w polu tekstowym


281
<textarea cols='60' rows='8'>This is my statement one.\n This is my statement2</textarea>

<textarea cols='60' rows='8'>This is my statement one.<br/> This is my statement2</textarea>

Próbowałem obu, ale nowa linia nie wyświetla się podczas renderowania pliku HTML. Jak mogę to zrobić?

Odpowiedzi:


524

Spróbuj tego:

    <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>

&#10;Line Feed i &#13;Carriage Return to encje HTML w Wikipedii . W ten sposób parsujesz nową linię („\ n”) zamiast wyświetlać ją jako tekst.


2
@LittleAlien jsfiddle.net/v0y3xvpx/1 - odpowiedź na podstawie pytania OP, oczywiście problem został rozwiązany
Bakudan

2
nie &#10;wystarczy tylko przeanalizować \n?
Doug

Czy to nie zależy od systemu Windows vs. macOS, czy potrzebne są znaki przesunięcia wiersza i powrotu karetki, czy nawet poprawnie przeanalizowane?
SeizeTheDay

1
@SeizeTheDay tak, ale to nie MacOS - to Linux / BSD vs Windows
Bakudan

@Bakudan Oh! Myślałem, że MacOS, ponieważ jest oparty na Uniksie, nadal będzie miał ten problem. Ale na pewno masz rację, różnica jest bardziej ogólna.
SeizeTheDay

28
<textarea cols='60' rows='8'>This is my statement one.

This is my statement2</textarea>

Fiddle pokazujący, że to działa: http://jsfiddle.net/trott/5vu28/ .

Jeśli naprawdę chcesz, aby znajdował się w jednym wierszu w pliku źródłowym, możesz wstawić odwołania do znaków HTML dla przejścia do wiersza i powrotu karetki, jak pokazano w odpowiedzi z @Bakudan:

  <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>


27

Uznałem, że String.fromCharCode(13, 10)pomocne jest korzystanie z silników widoków. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Tworzy to ciąg znaków z rzeczywistymi znakami nowej linii, a zatem zmusza silnik widoku do wypisania nowej linii, a nie wersji zmiany znaczenia. Np .: Korzystanie z silnika widoku NodeJS EJS - to prosty przykład, w którym należy zastąpić dowolny \ n:

viewHelper.js

exports.replaceNewline = function(input) {
    var newline = String.fromCharCode(13, 10);
    return input.replaceAll('\\n', newline);
}

EJS

<textarea><%- viewHelper.replaceNewline("Blah\nblah\nblah") %></textarea>

Renderuje

<textarea>Blah
blah
blah</textarea>

Zamień wszystko:

String.prototype.replaceAll = function (find, replace) {
    var result = this;
    do {
        var split = result.split(find);
        result = split.join(replace);
    } while (split.length > 1);
    return result;
};

1
Newline = String.fromCharCode (13, 10); jest jedyną rzeczą, która działała dla mnie programowo dodając nową linię w czasie wykonywania. +1 na to.
Ronen Rabinovici

3
Chciałbym zaproponować być może prostszy sposób zamiany wszystkich: var regExp = new RegExp (find, "gi"); str = str .replace (regExp, replace);
Ronen Rabinovici

2
Zrobiłem s = s.replace(/\\n/g, String.fromCharCode(13, 10) ). To jednak magia. Dziękuję Ci.
Gliceryna

22

Myślę, że mylisz składnię różnych języków.

  • &#10;to (wartość HtmlEncoded ASCII 10 lub) dosłowny znak wiersza w ciągu HTML . Ale znak przesunięcia wiersza NIE jest renderowany jako podział wiersza w HTML (patrz uwagi na dole).

  • \nto dosłowny znak wiersza (ASCII 10) w ciągu JavaScript .

  • <br/>to podział linii w HTML. Wiele innych elementów, na przykład <p>, <div>itd czynią także podziały wiersza chyba że zostaną zamienione z pewnymi stylami.

Mamy nadzieję, że następująca ilustracja wyjaśni to:

T.innerText = "Position of LF: " + t.value.indexOf("\n");

p1.innerHTML = t.value;
p2.innerHTML = t.value.replace("\n", "<br/>");
p3.innerText = t.value.replace("\n", "<br/>");
<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='T'></p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>

Kilka punktów do zapamiętania na temat HTML:

  • innerHTMLWartość TEXTAREAelementu nie czyni HTML. Spróbuj <textarea>A <a href='x'>link</a>.</textarea>wykonać następujące czynności: aby zobaczyć.
  • PElementu powoduje stycznymi spacji (w tym nowych linii) jako jeden przedział.
  • Znak LF nie jest renderowany do nowej linii ani podziału linii w HTML.
  • TEXTAREARenderuje LF jako nowej linii wewnątrz skrzynki polu tekstowym.

1
Na pierwszy rzut oka ten post wydaje się skomplikowany, ale tak naprawdę zawiera wiele przydatnych informacji. Jeśli progamatycznie dodajesz wiersze do swojego, <textarea/>to jest post, którego potrzebujesz!
Morvael,

<br/>tego szukałem
Johnny Five,


7

spróbuj tego .. to działa:

<textarea id="test" cols='60' rows='8'>This is my statement one.&#10;This is my statement2</textarea>

zastępując
tagi:

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;")));

3
jego faktycznie $ („textarea # test”). val (). replace (/ \ n / g, "& # 10;"); (zastąpi to wszystkie wystąpienia nowej linii)
Claudiu,

7

Aby uzyskać nową linię w polu tekstowym, wstaw tam rzeczywisty podział linii:

    <textarea cols='60' rows='8'>This is my statement one.
    This is my statement2</textarea>


5

Możesz użyć \nzamiast /n.


5
Cóż, literalna \nnie będzie działało, to trzeba być rzeczywisty znak nowej linii.
Greg Hewgill,

Tak oczywiście. Ale zakładam (niepoprawnie?), Że już o tym wiedział.
Zar

2

Po wielu testach następujący kod działa dla mnie w Typescreipt

 export function ReplaceNewline(input: string) {
    var newline = String.fromCharCode(13, 10);
    return ReplaceAll(input, "<br>", newline.toString());
}
export function ReplaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}

0

Moja .replace()funkcja wykorzystująca wzorce opisane w innych odpowiedziach nie działała. Wzór, który zadziałał w mojej sprawie był:

var str = "Test\n\n\Test\n\Test";
str.replace(/\r\n|\r|\n/g,'&#13;&#10;');

// str: "Test&#13;&#10;&#13;&#10;Test&#13;&#10;Test"

0

T.innerText = "Pozycja LF:" + t.value.indexOf ("\ n");

p3.innerText = t.value.replace("\n", "");

<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='p3'></p>

Chociaż ten kod może odpowiedzieć na pytanie, zapewnienie dodatkowego kontekstu dotyczącego tego, dlaczego i / lub jak ten kod odpowiada na pytanie, poprawia jego długoterminową wartość.
Alex Riabov,

-5

wystarczy użyć <br>
ex:

<textarea>
blablablabla <br> kakakakakak <br> fafafafafaf 
</textarea>

wynik:
blablablabla
kakakakakak
fafafafafaf

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.