Question

我正在尝试通过Angularjs在网页上显示一个字符串，该字符串可能有多行。这是我得到的：

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

当您输入textarea时：

“这是

字符串“

你得到：

“这是一个字符串”

如何获取文本的方式与输入文本的显示方式相同？

Answer 1

这是HTML的问题。不是角度的。 Angular正在写出你告诉它的确切内容。

在HTML中，在<pre>标记之外，无穷无尽的空格（返回，制表符，空格等）都被视为一个空格。这就是为什么如果您没有使用<br/>标记块，则需要 和<pre>之类的内容。

因此，请尝试使用HTML，以便了解正在发生的事情：

<h3>Plain DIV</h3>
<div>
Some
   text
      here
</div>

<h3>Now with non-breaking spaces and line breaks</h3>
<div>
Some<br/>
&nbsp;&nbsp;&nbsp;text<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;here<br/>
</div>

<h3>Now with a PRE tag</h3>
<pre>
Some
   text
      here
</pre>

Here's a Fiddle证明了上述情况。

您需要使用一些自定义类来设置PRE标记的样式，使其看起来像页面上的其他文本，因为<pre>的大多数默认样式将使用单倍间距（固定宽度的字体，如Courier或Consolas。

要么是你要么必须用角度写一个过滤器来处理空格，制表符和换行符到正确的标记。 ......这将是一种难以维持的痛苦。

编辑：根据上面的理解，一个Angular解决方案（如果你不只是使用PRE）

所以最好的解决方案，IMO，如果你不想使用<pre>标签，那就是创建一个过滤器，为你擦除文本，并用换行符和不间断空格来填充它。

像这样

app.filter('formatText', function (){
  return function(input) {
    if(!input) return input;
    var output = input
      //replace possible line breaks.
      .replace(/(\r\n|\r|\n)/g, '<br/>')
      //replace tabs
      .replace(/\t/g, '&nbsp;&nbsp;&nbsp;')
      //replace spaces.
      .replace(/ /g, '&nbsp;');

      return output;
  };
});

然后使用它你会做这样的事情：

<span ng-bind-html="foo | formatText"></span>

需要注意的重要事项：

您需要在脚本引用中包含angular-sanitize.js文件。
您需要在模块声明中要求'ngSanitize'：

var app = angular.module('myApp', ['ngSanitize']);

..这样你可以使用ng-bind-html或ng-bind-html-unsafe指令。

Here is a plunk that demonstrates the usage.

Answer 2

小心ng-bind-html - 非常容易进行XSS注射。

如果您只想显示换行符，请在页面中不使用XSS 你可以使用简单的css-rule：white-space: pre：

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

当然，你可以为此制作css级：

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

此外，此方法使所有空格可见：前导空格，多个空格标签等等。

Answer 3

如上所述，您可以使用filter来实现它。

让我为你实现它：

<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 />');
    };
});

Answer 4

您始终可以使用PRE标签：

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

你可以采取另一种方式：

<textarea ng-model="StringValue"></textarea>
<span ng-bind-html-unsafe="newLineToBR(StringValue)"></span>

带控制器功能：

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

或者，正如@sza所示，更好的方法是将其转换为过滤器。这是working example.

Answer 5

处理您的情况的正确，最简单，语义正确的方法是使用pre标记。这些标签专为已经格式化的文本而设计，这就是您所拥有的。 pre标签中的文字可以使用CSS轻松设置为普通文本。

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

Answer 6

您可以使用过滤器将换行符转换为html符号。

Answer 7

不要问我为什么，但replace工作我在\

前面有一个额外的\n

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

Answer 8

如果您使用 Angular

您可以使用 [innerText] 或 [innerHTML] 就这样

<p  [innerText]=StringValue /p>

角度在一条线上显示多个内衬字符串

8 个答案:

编辑：根据上面的理解，一个Angular解决方案（如果你不只是使用PRE）

需要注意的重要事项：