Как добавить разрывы строк в текстовую область HTML?

156

Я редактирую с <textarea>помощью JavaScript. Проблема в том, что когда я делаю разрывы строк, они не отображаются. Как я могу это сделать?

Я получаю значение, чтобы написать функцию, но она не даст разрывов строк.

djairo
источник
Демонстрация Codepen с регулярными выражениями и <pre></pre>решениями, представленными здесь: codepen.io/a-guerrero/pen/grgVBo
a.guerrero.g87

Ответы:

265

Проблема заключается в том, что разрывы строк ( \n\r?) Не совпадают с <br/>тегами HTML

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

ОБНОВИТЬ

Так как многие комментарии и мой собственный опыт показали, что это <br> решение не работает должным образом, здесь приведен пример добавления новой строки к textareaиспользованию '\ r \ n'

function log(text) {
    var txtArea ;

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

Я решил сделать это редактированием, а не новым вопросом, потому что это слишком популярный ответ, чтобы быть неправильным или неполным.

TStamper
источник
7
Это работает и для меня. В jQuery вы можете сделать что-то вроде этого: $ ('# caption'). Html ($ ('# caption'). Text (). Replace (/ \ n \ r? / G, '<br />')) ;
DavGarcia
2
Regexp разрыва строки должен быть /(\r\n|\n|\r)/gm textfixer.com/tutorials/javascript-line-breaks.php
tothemario
3
Правильное регулярное выражение /\r\n?|\n/gбез захвата, без мультилинии.
aMarCruz
5
Подозреваемый <br>не прав. Для универсального разрыва строки в текстовой области вы хотите \r\n. Например, UC Browser игнорирует <br> и \ n в текстовых областях. См. Добавление разрыва строки в текстовой области HTML .
Боб Стейн
2
Использование внутри текстовой области не работает. По крайней мере, не в Chrome, где я тестировал. Использование \ n похоже работает. Используйте <br>, если вы намереваетесь вставить текст в виде чистого HTML, то есть вне любого элемента ввода.
Snorvarg
24

если вы используете общий сценарий Java и вам нужно присвоить строку для значения текстовой области, то

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

вам нужно заменить \nили < br >на\\\n

в противном случае это дает Uncaught SyntaxError: Unexpected token ILLEGALво всех браузерах.

JIT
источник
18

Может быть, кто-то найдет это полезным:

У меня была проблема с разрывами строк, которые передавались из серверной переменной в переменную javascript, а затем javascript записывал их в textarea (используя привязки значений knockout.js).

решение было двойным, избегая новых линий:

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

на стороне сервера, потому что только с одним escape-символом javascript не разбирался.

0lukasz0
источник
использование "\\ n" работает для меня в Windows, и я предполагаю, что оно будет работать в системах Linux.
Самих
18

Вы должны использовать \nдля linebreaksвнутриtextarea

strubester
источник
Работает в Firefox v71. Спасибо!
Эрик Сондергард
6

Если вы хотите отображать текст на своей странице, вы можете использовать <pre>тег.

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

Новая строка является просто пробелом для браузера и не будет обрабатываться иначе, чем обычный пробел (""). Чтобы получить новую строку, вы должны вставить <BR />элементы.

Еще одна попытка решить проблему: введите текст в текстовое поле, а затем добавьте JavaScript за кнопкой, чтобы преобразовать невидимые символы во что-то читаемое и вывести результат в a DIV. Это скажет вам, что хочет ваш браузер.

Аарон Дигулла
источник
3

У меня есть текстовое поле с идентификатором #infoartist follow:

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

В коде javascript я получу значение textarea и заменю экранированную новую строку (\ n \ r) <br />тегом, например:

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

Так что, если вы используете jquery (как я):

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

Надеюсь, это помогло вам. :-)

NgaNguyenDuy
источник
0

Если вам просто нужно отправить значение testarea на сервер с переносом строки, используйте nl2br

Игорь Львович
источник
0

вот что я сделал для той же проблемы, что и у меня.

когда я передаю текст на следующую страницу в jsp, я читаю его как текстовое поле вместо того, чтобы читать что-то вроде

так что выход пришел как ты хотел. а для других свойств вы можете использовать, как показано ниже.

<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>
raja777m
источник