Nowa linia w obszarze tekstowym

Question

<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 odzwierciedla podczas renderowania pliku html. Jak mogę to zrobić?

Answer 1

Spróbuj tego:

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


 Line Feed i 
 powrót karetki są HTML entities^wikipedia. W ten sposób faktycznie parsujesz nową linię ("\ n") zamiast wyświetlać ją jako tekst.

Answer 2

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

Answer 3

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

This is my statement2</textarea> 

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

Jeśli naprawdę chcesz to być na jednej linii w pliku źródłowym, można wstawić odwołania znakowe HTML wysunięcie wiersza i powrotu karetki, jak pokazano na odpowiedź od @Bakudan:

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

Answer 4

spróbować 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 na
tagi:

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

Answer 5

Aby uzyskać nową linię wewnątrz textarea, umieścić rzeczywiste linebreak tam:

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

Answer 6

Znalazłem String.fromCharCode(13, 10) pomocne przy użyciu widoku silniki. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Spowoduje to utworzenie ciągu znaków z rzeczywistymi znakami nowego wiersza, a zatem zmusza mechanizm wyświetlania do wyprowadzenia znaku nowej linii zamiast wersji z uniknięciem. Np Stosując NodeJS Ejs widok silnika - jest prosty przykład w których \ n należy wymienić:

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> 

Renders

<textarea>Blah 
blah 
blah</textarea> 

---

wymienićWszystkie:

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; 
}; 

Answer 7

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); 
} 

Answer 8

myślę, że są mylące składni różnych języków.

• 
 jest (wartość HtmlEncoded ASCII lub 10) w dosłownym znakiem końca wiersza w HTML ciąg. Renderuje się on jako podział wiersza w HTML (patrz uwagi na dole).

• \n to literał znaków linii (ASCII 10) w ciągu znaków JavaScript.

• <br/> to podział wiersza w HTML. Wiele innych elementów, np. <p>, <div>, itp. Renderuje również podziały wierszy, chyba że zostaną nadpisane niektórymi stylami.

Mam nadzieję, że po illustration uczyni go bardziej zrozumiałym:

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, aby pamiętać o HTML:

• atrybut elementu TEXTAREAVALUE nie render Html
• Element P renderuje wszystkie sąsiadujące białe spacje (w tym nowe linie) jako jedną spację.
• Znak LF nie renderuje się do nowego wiersza lub wiersza w wierszu HTML.
• Wykonanie TEXTAREA powoduje wyświetlenie LF jako nowej linii.

Answer 9

Jeśli mówimy o użyciu wartości pola tekstowego w innym miejscu na swojej stronie i świadczenia tych nowych linii, znalazłem propperty CSS white-space: pre-wrap; do pracy bardzo dobrze, a to proste rozwiązanie. Może to pomaga komuś.

Answer 10

Moja funkcja .replace() wykorzystująca wzorce opisane w innych odpowiedziach nie zadziałała. Wzorzec, który działał w moim przypadku:

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

// str: "Test

Test
Test"