Javascript 如何让textarea识别AngularJS中的新行？

下面是一个简单的例子，我正试图将其应用到angular应用程序中。我有一个textarea，它的文本将被输出到页面的另一部分，如果在textarea中有换行符，我希望这些换行符也能被传输过来。我尝试过给出的答案，但这种情况下没有使用angular，它似乎对我不起作用（我尝试使用

{{sometext.replace（/\n/g，“
”）}

，但这只会破坏表达式，只会将表达式显示为带花括号的字符串。我如何解决这个问题

var-app=angular.module（'SomeApp'，[]）；
app.controller（'SomeController'，函数（$scope）{
$scope.sometext=“一些文本\n更多文本”；
})；

{{sometext}}

试试这个：

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

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

var-app=angular.module（'SomeApp'，[]）；
app.controller（'SomeController'，函数（$scope）{
$scope.sometext=“一些文本\n更多文本”；
$scope.sometext=$scope.sometext.replace（/\n/g，“
”）
});

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

您试图将

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

注意

---

您可以在

HTMLIZE\u CONVERSIONS

数组中添加更多表达式和值对。

您可以使用另一个文本区域而不是p

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

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

“您可以在此处键入输入”
{{sometext}}

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

.filter（'nl2br'，函数（$sce）{
.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);
        }
    });

返回函数（msg，is_xhtml）{
var为xhtml=为xhtml | |真；
var breakTag=（is_xhtml）？“
”：“
”；
var msg=（msg+“”）.replace（/（[^>\r\n]？）（\r\n |\n\r |\r |\n）/g，“$1”+breakTag+“$2”）；
返回$sce.trustAsHtml（msg）；
}
});

.filter（'nl2br'，函数（$sce）{

返回函数（msg，is\xhtml）{
var为xhtml=为xhtml | |真；
var breakTag=（is_xhtml）？“
”：“
”；
var msg=（msg+“”）.replace（/（[^>\r\n]？）（\r\n |\n\r |\r |\n）/g，“$1”+breakTag+“$2”）；
返回$sce.trustAsHtml（msg）；
}
});

{{sometext}}

这一个适用于Angular 8。
问题是AngularJS。Angular 2+是非常不同的
.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);
        }
    });

        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);

        }

    });