Javascript 在一行上显示多行字符串

我试图通过Angularjs在网页上显示一个字符串，它可能有多行。以下是我得到的：

<textarea ng-model="StringValue"></textarea>
{{StringValue}}

<textarea ng-model="StringValue"></textarea>
<pre>{{StringValue}}</pre>

{{StringValue}}

在文本区域中键入时：

“这是

“一串”

你会得到：

“这是一个字符串”

---

如何获得它，使文本以与键入文本相同的方式显示？

您始终可以使用预标记：

{{StringValue}}

另一种方法是：

$scope.newLineToBR = function(text) {
    return text ? text.replace(/\n/g, '<br />') : '';
};

具有控制器功能：

<textarea ng-model="StringValue"></textarea>
<div ng-bind-html-unsafe="StringValue | breakFilter"></div>

angular.module('myApp', []).filter('breakFilter', function () {
    return function (text) {
        if (text !== undefined) return text.replace(/\n/g, '<br />');
    };
});

$scope.newLineToBR=函数（文本）{
返回文本？text.replace（/\n/g，“
”）：”；
};

---

或者，如@sza所示，更好的方法是将其转换为过滤器。下面是一个

您可以使用筛选器将新行\n转换为html换行符

---

{{StringValue | breakFilter}

正如前面提到的另一个答案，您可以使用来实现它

让我来为您实施：

<pre style="font: inherit">{{StringValue}}</pre>

角度.module（'myApp'，[]）.filter（'breakFilter'，function（）{
返回函数（文本）{
if（text！==未定义）返回text.replace（/\n/g，
）；
};
});

这是HTML的一个问题。没有棱角。Angular写的正是你告诉它的

在HTML中，在

input.replace(/\\n/g, '<br />')

演示上述内容

不过，您需要使用一些自定义类设置PRE标记的样式，使其看起来像页面上的其他文本，因为

。。这样，您就可以使用
ng bind html
或
ng bind html
指令

正确、最简单、语义正确的处理方法是使用
pre
标记。这些标签是专门为已经格式化的文本设计的，这就是您在这里看到的。
pre
标记中的文本可以使用CSS轻松设置样式，使其看起来像普通文本

{{StringValue}
别问我为什么，要想让
替换
正常工作，我必须在
\n
前面加一个
\

input.replace（/\\n/g，
）
小心使用
ng bind html
——很容易得到XSS注入

如果只想显示换行符，而不想在页面中显示XS

您可以使用简单的css规则：
空白：pre
：

{{multilitext}

当然，您可以为此创建css类：

.pre{空白：pre}
{{multilitext}}

此外，此方法使所有空白都可见：前导空格、多个空格选项卡等。
这很好，但文本没有换行
input.replace(/\\n/g, '<br />')

<span style="white-space: pre">{{multilinetext}}</span>

<style>.pre {white-space: pre}</style>
<span class="pre">{{multilinetext}}</span>