11

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

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

当您输入文本区域时：

“这是

一个字符串”

你得到：

“这是一个字符串”

你如何得到它，以便文本以与输入相同的方式显示？

4

8 回答 8

17

小心ng-bind-html- 很容易获得 XSS 注入。

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

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

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

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

此外，此方法使所有空格可见：前导空格、多个空格制表符等。

于 2015-03-04T13:58:16.887 回答
12

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

在 HTML 中，在<pre>标签之外，无穷无尽的空白（返回、制表符、空格等）都被视为一个空白。这就是为什么你需要类似的东西<br/>，&nbsp;如果你不使用<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>

这是一个演示上述内容的小提琴。

不过，您将需要使用一些自定义类来设置 PRE 标记的样式，以使其看起来像页面上的其他文本，因为大多数默认样式<pre>将使用等宽（固定宽度）字体，如 Courier 或康索拉斯。

要么就是这样，要么您将不得不编写一个角度过滤器，将空格、制表符和换行符处理成正确的标记。...这将是一个痛苦的维护。

编辑：根据上面的理解，一个 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>

需要注意的重要事项：

  1. 您需要angular-sanitize.js在脚本引用中包含该文件。
  2. 您需要'ngSanitize'在模块声明中要求：
var app = angular.module('myApp', ['ngSanitize']);

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

这是一个演示用法的plunk。

于 2013-08-29T14:46:48.970 回答
7

正如提到的其他答案，您可以使用过滤器来实现它。

让我为你实现它：

<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 />');
    };
});
于 2013-08-29T14:21:55.383 回答
2

您始终可以使用 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 所示，更好的方法是将其变成过滤器。这是一个工作示例。

于 2013-08-29T14:14:05.150 回答
2

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

<pre style="font: inherit">{{StringValue}}</pre>
于 2014-11-20T16:58:22.527 回答
1

不要问我为什么，但为了工作，我必须在前面replace有一个额外的\\n

input.replace(/\\n/g, '<br />')
于 2015-01-20T01:13:53.043 回答
0

您可以使用过滤器将换行符 \n 转换为 html 中断。

{{字符串值 | 中断过滤}}

于 2013-08-29T14:16:27.317 回答
0

如果你使用Angular

你可以 像这样使用[innerText]Or It[innerHTML]

<p  [innerText]=StringValue /p>
于 2021-07-19T09:07:54.517 回答