Использование новой строки (\ n) в строке и рендеринг ее в HTML

87

У меня есть строка сказать

string display_txt = "1st line text" +"\n" + "2nd line text";

в JQuery я пытаюсь использовать 

('#somediv').html(display_txt).css("color", "green")

совершенно очевидно, что я ожидаю, что мое сообщение будет отображаться в 2 строках, но вместо этого в сообщении отображается \ n. Какие-нибудь быстрые исправления для этого?

Благодарность,

jquery html string newline KeenUser
источник
1
Совершенно ясно, ответ в вашем вопросе, вы пытаетесь отобразить сообщение об ошибке в div как html, поэтому вы можете использовать <br />тег
Murtaza
В ожидании двух строк нет ничего «совершенно ясного». Напротив, совершенно ясно, что новая строка будет отображаться как обычное пространство, только при необходимости оборачивая строку. Так работает HTML, конечно, так же и .htmlработает.
2
Я просто имел в виду контекст, в котором я сохранил свою строку как «текст первой строки» и «текст второй строки», было ясно, что я хочу их в 2 строки, а не в отношении того, как работает html :) спасибо.
KeenUser
связанные: stackoverflow.com/questions/9726970/…
frederj

Ответы:

79

Используйте <br />для новой строки в html:

display_txt = display_txt.replace(/\n/g, "<br />");
Самич
источник
1
по какой-то причине я избегаю "\ n" как "\\ n", иначе это не сработает. (проверено в Chrome 46). По какой причине?
Суджай Пхадке
2
Обратите внимание, что это заменит только первое появление \nсимвола внутри строки. См. Документацию MDN
Доминик Буланже,
3
Лучше всего .replace(/\n/g, "<br />")не допускать появления новой строки.
KingRider
2
Я думаю, что ответ @vsync должен быть принятым.
Аюш Кумар
Работает отлично. Спасибо.
joshlsullivan
174

Установите свой css в ячейке таблицы на

white-space:pre-wrap;


document.body.innerHTML = 'First line\nSecond line\nThird line';
body{ white-space:pre-wrap; }
Развернуть фрагмент

vsync
источник
6
так разве это не должен быть принятый ответ? ЛЭ: Я вижу, что это поддерживается только в IE 8+ ссылка
gciochina
4
Этот ответ намного лучше, чем установка innerHTML, потому что он не вызывает уязвимости XSS.
LinusK
4
Кроме того, вы можете использовать, white-space:pre-line;поскольку последовательности пробелов будут свертываться в один пробел. Текст будет переноситься при необходимости и при переносе строки. Дополнительная информация на: https://www.w3schools.com/cssref/pr_text_white-space.asp
HakuteiJ
Этот ответ не преобразует \ n в тексте в новую
строку
2
@ste_irl - что ты имеешь в виду? что \nозначает новая строка должна быть распечатана и это напечатать
VSync
6

Вы можете использовать предварительный тег вместо div. Это автоматически отобразит ваши \ n правильным образом.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
         var display_txt = "1st line text" +"\n" + "2nd line text";
         $('#somediv').html(display_txt).css("color", "green");
});
</script>
</head>
<body>

<pre>
<p id="somediv"></p>
</pre>

</body>
</html>
Франк им Вальд
источник
0

У меня возникла следующая проблема, когда я получал данные из базы данных и хотел отобразить строку, содержащую \n. Ни одно из вышеперечисленных решений не помогло мне, и я, наконец, нашел решение: qaru.site/questions/435 / ... / 61484190/7251208

Кевин Х. Гриффит
источник