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

87

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

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

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

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

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

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

— 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>

— Франк им Вальд
источник

1

Может .textвместо .html?

0

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

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