Використання нового рядка (\ 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 />тег

— Муртаза

У очікуванні двох рядків немає нічого "цілком зрозумілого". Навпаки, цілком зрозуміло, що новий рядок буде відображатися як простий простір, лише обгортаючи рядок, якщо це потрібно. Це як HTML працює, звичайно це також як .htmlпрацює.

2

Я просто мав на увазі контекст, де я зберігав свій рядок як "текст 1-го рядка" та "текст 2-го рядка", було зрозуміло, що я хочу їх у 2 рядки, а не стосовно того, як працює html :) дякую.

— KeenUser

пов'язані з : stackoverflow.com/questions/9726970 / ...

— frederj

78

Використовуйте <br />для нового рядка в html:

display_txt = display_txt.replace(/\n/g, "<br />");

— Саміч
джерело

1

з якихось причин я повинен уникнути "\ n" як "\\ n", інакше це не працює. (протестовано в Chrome 46). Будь-яка причина чому?

— Sujay Phadke

2

Зверніть увагу, що це замінить лише перше входження \nсимволу всередині рядка. Дивіться документацію MDN

— Домінік Буланже

3

найкраще .replace(/\n/g, "<br />")запобігти появі нових рядків.

— KingRider

2

Я думаю, що відповідь @vsync має бути прийнятою.

— Аюш Кумар,

Працював ідеально. Дякую.

— joshlsullivan

172

Встановіть ваш css у клітинці таблиці на

white-space:pre-wrap;

document.body.innerHTML = 'First line\nSecond line\nThird line';

body{ white-space:pre-wrap; }

Розгорніть фрагмент

— vsync
джерело

6

так хіба це не повинна бути прийнятою відповіддю? LE: Я бачу, що це підтримується лише у посиланні

— gciochina

4

Ця відповідь набагато краща, ніж встановлення внутрішнього HTML, оскільки вона не спричиняє вразливості XSS.

— LinusK

4

Крім того, ви можете використовувати, white-space:pre-line;оскільки послідовності пробілів згортаються в єдиний пробіл. Текст обернеться, коли це буде потрібно, і з розривами рядків. Більше інформації на: https://www.w3schools.com/cssref/pr_text_white-space.asp

— HakuteiJ

Ця відповідь не перетворює \ n усередині тексту на новий рядок

— irl_irl

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. Жодне з наведених вище рішень не працювало для мене, і я нарешті придумав рішення: https://stackoverflow.com/a/61484190/7251208

— Кевін Гріффіт
джерело