AngularJS：将换行符转换为段落元素

Question

在Angular中，我需要从包含换行字符的文本块生成一系列段落元素。

我能想到几种方法。但是我想知道是否有“官方”的Angular方法或者在AngularJS上下文中最优雅的方法是什么。

一个例子

从：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. \n
Sed diam nonummy nibh euismod tincidunt ut laoreet dolore. \n
Magna aliquam erat volutpat. Ut wisi enim ad minim veniam.

到：

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
<p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>

我可以想到几种方法来实现这个：

1. 修改控制器中的文本（虽然我更喜欢避免修改我的模型）
2. 使用指令，在链接函数中生成段落（似乎过于繁琐）。
3. 使用过滤器（我目前最喜欢的方法），创建一个数组并将其传输到ng-repeat中

- George Thomas

Answer 1

我能想到的最佳解决方案是创建一个过滤器：

angular.module('myApp').
filter('nlToArray', function() {
  return function(text) {
      return text.split('\n');
  };
});

这将把一段文本分成若干段，为每个段落创建一个新的数组元素。

然后可以将此数组插入到ng-repeat指令中：

<p ng-repeat="paragraph in textBlock|nlToArray track by $index">{{paragraph}}</p>

- George Thomas

---

似乎有点额外的开销和不安全。 - Angel S. Moreno

Answer 2

var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myCtrl', function($scope){
    $scope.myText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nSed diam nonummy nibh euismod tincidunt ut laoreet dolore.\nMagna aliquam erat volutpat. Ut wisi enim ad minim veniam."
});
myApp.filter('nl2p', function () {
    return function(text){
        text = String(text).trim();
        return (text.length > 0 ? '<p>' + text.replace(/[\r\n]+/g, '</p><p>') + '</p>' : null);
    }
});

http://jsfiddle.net/moderndegree/934aZ/

- Brian Lewis

---

这种方法将修剪字符串，然后使用Angular的ngSanitize将HTML放入DOM中。这应该使得有人试图插入恶意标记变得更加困难。 - Brian Lewis

这种方法的唯一缺点是它将生成的段落元素嵌套在另一个DOM元素中。在您的示例中是一个<span>。但是，这是一个相当小的缺点。 - George Thomas

不要忘记包含ngSanitize模块和JS文件。 - Angel S. Moreno

太棒了，但是正则表达式需要以g结尾才能进行多次替换（例如/[\r\n]+/g）。链接：http://jsfiddle.net/934aZ/47/ - StackExchange What The Heck

Answer 3

您可以使用CSS属性，并将{{text}}插入到 p HTML元素中来解决这个问题。

 white-space: pre-line;

- Walter Palacios

---

这确实是一个非常好的替代方法。它不像要求的那样添加多个段落，但在大多数情况下，视觉效果是相同的。 - yvan vander sanden

Answer 4

这是一个愚蠢的hack，但它解决了段落包含其他标签的问题，比如<p><h3>：

text = '<p>' + text.replace(/[\r\n]+/g, '</p><p>') + '</p>';
// delete blank lines
text = text.replace(/<p>\s*?<\p>/g, '');
// delete erroneous paragraph enclosed tags
text = text.replace(/<p>\s*?(<.+?>)\s*?(.+?)\s*?(<\/.+?>)\s*?<\/p>/g, '$1$2$3');

- besson3c