Nouvelle ligne dans la zone de texte

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>

J'ai essayé les deux, mais la nouvelle ligne ne reflète pas le rendu du fichier HTML. Comment puis je faire ça?

Answer 1

Essaye celui-là:

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


 Le saut de ligne et 
 Le retour à la ligne sont entités HTML^wikipédia . De cette façon, vous analysez réellement la nouvelle ligne ("\ n") plutôt que de l’afficher sous forme de texte.

Answer 2

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

This is my statement2</textarea>

Violon montrant que cela fonctionne: http://jsfiddle.net/trott/5vu28/ .

Si vous voulez vraiment que cela soit sur une seule ligne du fichier source, vous pouvez insérer les références de caractères HTML pour un saut de ligne et un retour à la ligne, comme indiqué dans la réponse de @Bakudan:

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

Answer 3

J'ai trouvé String.fromCharCode(13, 10) utile lors de l'utilisation de moteurs de visualisation. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Cela crée une chaîne contenant les caractères de nouvelle ligne et oblige ainsi le moteur de vue à générer une nouvelle ligne plutôt qu'une version échappée. Exemple: Utiliser le moteur de vue NodeJS EJS - C’est un exemple simple dans lequel tout\n doit être remplacé:

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>

---

remplace tout:

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 4

Je pense que vous confondez la syntaxe de différentes langues.

• 
 est (la valeur HtmlEncoded de ASCII 10 ou) le littéral de caractère de saut de ligne dans une chaîne HTML. Mais le caractère de saut de ligne ne rend pas PAS comme un saut de ligne en HTML (voir les notes en bas).

• \n est le caractère de saut de ligne (ASCII 10) dans une chaîne Javascript .

• <br/> est un saut de ligne en HTML. De nombreux autres éléments, tels que <p>, <div>, etc., rendent également les sauts de ligne, à moins qu'ils ne soient remplacés par certains styles.

Espérons que ce qui suit illustration rendra les choses plus claires:

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>

Quelques points à noter sur le HTML:

• La valeur innerHTML de l'élément TEXTAREA ne rend pas le code HTML. Essayez ce qui suit: <textarea>A <a href='x'>link</a>.</textarea> à voir.
• L'élément P rend tous les espaces blancs contigus (y compris les nouvelles lignes) comme un seul espace.
• Le caractère LF ne s'affiche pas dans une nouvelle ligne ou un saut de ligne en HTML.
• La TEXTAREA restitue LF comme une nouvelle ligne à l'intérieur de la zone de texte.

Answer 5

Pour obtenir une nouvelle ligne dans la zone de texte, mettez un saut de ligne à cet endroit:

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

Answer 6

essayez ceci .. ça marche:

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

remplacer pour
Mots clés:

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

Answer 7

Vous voudrez peut-être utiliser \n au lieu de /n.

Answer 8

Entrez la ligne de mot-clé dans Textarea en utilisant CSS:

white-space: pre-wrap;

Answer 9

Après de nombreux tests, le code suivant fonctionne pour moi dans 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 10

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

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

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

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

Answer 11

Ma fonction .replace() utilisant les motifs décrits dans les autres réponses ne fonctionnait pas. Le modèle qui a fonctionné pour mon cas était:

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

// str: "Test

Test
Test"