如何让文本区域识别 AngularJS 中的新行？答案

【问题标题】：How do I make a textarea recognize new lines in AngularJS?如何让文本区域识别 AngularJS 中的新行？
【发布时间】：2015-10-23 22:43:49
【问题描述】：

这是一个简单的示例，说明了我试图将其放入 Angular 应用程序中的内容。我有一个文本区域，它的文本将被输出到页面的另一部分，如果在文本区域中创建了换行符，我也希望将它们转移过来。我已经尝试了here 给出的答案，但是那个案例没有使用 angular，它似乎对我不起作用（我尝试使用 {{sometext.replace(/\n/g, "<br />")}} 但这只是破坏了表达式并只显示表达式作为带有花括号的字符串。我该如何解决这个问题？

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

app.controller('SomeController', function($scope){
  $scope.sometext = "Some text\nMore text";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='SomeApp'>
  
  <div ng-controller='SomeController'>  

    <textarea ng-model='sometext' rows='8' cols='25'></textarea>

    <p>{{sometext}}</p>
  
  </div>

</body>

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

试试这个：

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

app.controller('SomeController', function($scope){
   $scope.sometext = "Some text\nMore text";
   $scope.sometext = $scope.sometext.replace(/\n/g, "<br />")
});

【讨论】：

【解决方案2】：

DEMO

你上面的代码有两个问题：

您正在尝试将 \n 呈现为 html 页面中的新行，html 无法将其识别为 html。

要解决这个问题，您必须在渲染时通过创建过滤器替换字符串中的所有\n。下面的过滤器使用一组正则表达式和值对来替换您要呈现的字符串。

JAVASCRIPT

  .value('HTMLIZE_CONVERSIONS', [
    { expr: /\n+?/g, value: '<br>' }
  ])

  .filter('htmlize', function(HTMLIZE_CONVERSIONS) {
    return function(string) {
      return HTMLIZE_CONVERSIONS.reduce(function(result, conversion) {
        return result.replace(conversion.expr, conversion.value);
      }, string || '');
    };
  });

第二个问题是过滤器不足以渲染html。不要通过{{}} 插入字符串本身，而是使用 ng-bind-html，因为它旨在将字符串呈现为 html。此外，您必须包含 ngSanitize 模块，以便 ng-bind-html 正确呈现 html 而不会出现问题。

HTML

<p ng-bind-html="someText | htmlize"></p>

注意

您可以在HTMLIZE_CONVERSIONS 数组中添加更多表达式和值对。

【讨论】：

【解决方案3】：

你可以使用另一个 textarea 来代替 p

<textarea ng-model="sometext"> "you can type your input here"</textarea>

<textarea readonly> {{sometext}} </textarea>

第一行获取您的输入，而第二行仅显示输入

【讨论】：

【解决方案4】：

.filter('nl2br', function ($sce) {
        return function (msg, is_xhtml) {
            var is_xhtml = is_xhtml || true;
            var breakTag = (is_xhtml) ? '<br />' : '<br>';
            var msg = (msg + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
            return $sce.trustAsHtml(msg);
        }
    });

【讨论】：

【解决方案5】：

<p ng-bind-html="someText | nl2br"></p>

.filter('nl2br', 函数 ($sce) {

        return function (msg, is_xhtml) {

            var is_xhtml = is_xhtml || true;

            var breakTag = (is_xhtml) ? '<br />' : '<br>';

            var msg = (msg + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');

            return $sce.trustAsHtml(msg);

        }

    });

【讨论】：

【解决方案6】：

<textarea [(ngModel)]="sometext"></textarea><pre style="font-family: Arial;">{{sometext}}</pre>

这个适用于 Angular 8。

【讨论】：

问题是 AngularJS。 Angular 2+ 非常不同