Новая строка в текстовой области

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>

Я пробовал оба, но новая строка не отражается при рендеринге HTML-файла. Как я могу это сделать?

discky
источник

Ответы:

524

Попробуй это:

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

&#10;Перевод строки и &#13;возврат каретки являются HTML-объектами Википедии . Таким образом, вы на самом деле разбираете новую строку ("\ n"), а не отображаете ее как текст.

Bakudan
источник
2
@LittleAlien jsfiddle.net/v0y3xvpx/1 - ответ, основанный на вопросе об ОП, очевидно, проблема была решена
Бакудан,
2
не &#10;достаточно просто разобрать \n?
Даг
Разве это не зависит от Windows и MacOS, нужны ли символы перевода строки и возврата каретки, или даже правильно проанализированы?
SeizeTheDay
1
@SeizeTheDay да, но это не MacOS - это Linux / BSD против Windows
Bakudan
@ Bakudan Ой! Я думал, что MacOS, основанный на Unix, все еще будет иметь эту проблему. Но вы точно правы, разница более общая.
SeizeTheDay
28

Я нашел String.fromCharCode(13, 10)полезным при использовании двигателей просмотра. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Это создает строку с фактическими символами новой строки в ней и заставляет механизм представления выводить новую строку, а не экранированную версию. Например: Использование NodeJS EJS view engine - это простой пример, в котором любой \ 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>

Оказывает

<textarea>Blah
blah
blah</textarea>

заменить все:

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
Символ новой строки = String.fromCharCode (13, 10); это единственное, что помогло мне добавить новую строку программно во время выполнения. +1 на это.
Ронен Рабиновичи
3
Я хотел бы предложить, возможно, более простой способ замены всех: var regExp = new RegExp (find, "gi"); ул = str.replace (RegExp, заменить);
Ронен Рабиновичи
2
Я сделал s = s.replace(/\\n/g, String.fromCharCode(13, 10) ). Это волшебство, хотя. Спасибо.
Глицерин
28
<textarea cols='60' rows='8'>This is my statement one.

This is my statement2</textarea>

Скрипка, показывающая, что это работает: http://jsfiddle.net/trott/5vu28/ .

Если вы действительно хотите, чтобы это было в одной строке исходного файла, вы можете вставить ссылки на символы HTML для перевода строки и возврата каретки, как показано в ответе @Bakudan:

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

Trott
источник
23

Я думаю, что вы путаете синтаксис разных языков.

  • &#10;является (значение HtmlEncoded ASCII 10 или) литералом перевода строки в строке HTML . Но символ перевода строки НЕ отображается в виде разрыва строки в HTML (см. Примечания внизу).

  • \nсимвольный литерал перевода строки (ASCII 10) в строке Javascript .

  • <br/>это разрыв строки в HTML. Многие другие элементы, например <p>, <div>и т. Д., Также отображают разрывы строк, если они не переопределены некоторыми стилями.

Надеемся, что следующая иллюстрация прояснит ситуацию:

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>

Несколько замечаний по HTML:

  • innerHTMLЗначение TEXTAREAэлемента не оказывает HTML. Попробуйте следующее: <textarea>A <a href='x'>link</a>.</textarea>чтобы увидеть.
  • PЭлемент оказывает все смежные пробелы ( в том числе новых линий) , как одно пространство.
  • Символ LF не отображает новую строку или разрыв строки в HTML.
  • TEXTAREAДелает LF в качестве новой линии внутри коробки текста области.
Старый чудак
источник
1
На первый взгляд, этот пост кажется сложным, но на самом деле содержит много полезной информации. Если вы программно добавляете строки в свой <textarea/>пост, то этот пост вам нужен!
Морваэль
<br/>это то, что я искал
Johnny Five
14

Разрыв введите строку ключевого слова в Textarea с помощью CSS:

white-space: pre-wrap;
Сурадж Кумар Маурья
источник
1
Это должно быть выше
Родни Сальседо
это самый простой способ для достижения требуемого результата, спасибо @Suraj
Моаз Атеек
Это ответ
anvd
7

попробуйте это .. это работает:

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

замена для
тегов:

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;")));
Солевой Харкет
источник
3
на самом деле это $ ("textarea # test"). val (). replace (/ \ n / g, "& # 10;"); (это заменит все вхождения новой строки)
Claudiu
7

Чтобы получить новую строку внутри текстовой области, поместите фактический разрыв строки:

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

Юкка К. Корпела
источник
5

Вы можете использовать \nвместо /n.

Зар
источник
5
Ну, буквальный \nтоже не сработает, это должен быть настоящий перевод строки.
Грег Хьюгилл
Ну конечно; естественно. Но я (неправильно?) Предполагаю, что он это уже знал.
Zar
2

После многих тестов следующий код работает для меня в 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

Моя .replace()функция с использованием шаблонов, описанных в других ответах, не сработала. Шаблон, который работал для моего случая:

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 = "Положение LF:" + t.value.indexOf ("\ n");

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

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

<p id='p3'></p>
Нареш Кумар
источник
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, повышает его долгосрочную ценность.
Алекс Рябов
-5

просто используйте <br>
ex:

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

результат:
блаблаблабла
какакакакак
фафафафафаф

Лечани Хуссам
источник