如何在新行中显示新行输入文本？

Question

我想在换行符的文本字段中显示换行符文本输入，如下所示

Hello,                            \\1st line
This is how i want to display,     \\2nd line
such input is given to textfield.  \\3rd line

我通过使用此代码使用以下代码，我在新行中输入的文本根本不显示。（不是第一行文本）此代码仅显示单行文本

{% for obj in post %}
<script>
var str= '{{ obj.content }}';
$(".statbox").prepend("<div class='box2'>" + str + "</div>");
</script>
{% endfor%}

如果我使用以下代码，那么它会显示所有新行输入文本，但仅在单行中显示，如下所示

{% for obj in post %}
    <div class='box2'> {{ obj.content }} </div>
{% endfor%}

及其输出

Hello,\\1st line\\ This is how i not want to display, \\2nd line\\ such input is given to textfield.  \\3rd line

那么我如何使用 js 代码在新行中显示所有新行输入的输入，因为我想以prepend 方式显示这些文本

Thnaks in adv...

Answer 1

问题是因为 HTML 不尊重空格，除非在某些元素内。

要达到您的要求，您可以用<br /> 标记替换字符串中的换行符，如下所示：

var str = `Hello,
  This is how i want to display,
  such input is given to textfield.`;
$(".statbox").prepend('<div class="box2">' + str.replace(/\n/g, '<br />') + '</div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="statbox"></div>