Question

我有一个包含多个<br />标记的JSON文件。使用JSON.parse(json)将文件解析为对象。因为我使用AngularJS和ng-repeat绑定数据我不希望字符串包含任何HTML标记，并将其替换为新行\n。如何更换所有标签？在我看来，replace()仅适用于字符串。

感谢您的帮助！

JSON示例

{
    "title": "Title",
    "description": "This<br />is<br />a<br />description."
}

的JavaScript

var retrievedObject = JSON.parse(json);
$scope.data = retrievedObject;

HTML

<div ng-repeat="item in data">
    {{item.description}}
    {{item.description}}
</div>

Answer 1

您可以在解析字符串

之前替换它

var retrievedObject = JSON.parse(json.replace(/\<br \/\>/g, ''));

更好的选择是将字符串解析为HTML并提取没有标记的文本，而不是在将它们插入DOM之前使用正则表达式

Answer 2

有两种方法可以做你正在寻找的事情。一个用css替换br的 \ n然后在你的css文件中为元素赋予预包装的空白属性。

另一个是棱角分明的。读取数据-ng-bind-html。你能够实际输出br。 https://docs.angularjs.org/api/ng/directive/ngBindHtml您必须通过$ sce的过滤器运行它，以便它可信，但您的代码将如此简单：

<div ng-repeat="item in data">
    <span data-ng-bind-html="item.description | trusted"></span>
    <span data-ng-bind-html="item.description | trusted"></span>
</div>

您信任的过滤器将是：

.filter("trusted", function($sce){
    return function(input){
        return $sce.trustAsHtml(input);
    }
});

Answer 3

ngBindHtml可让您随时保留<br>并在HTML中呈现换行符。它会使用ngSanitize自动清理您的输入，以清除其白名单中的任何标记（您必须将ngSanitize作为依赖项...）

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

视图就像......一样简单。

<div ng-bind-html="item.description"></div>

JsBin

您还可以使用$sce.trustAsHtml()告诉ngBindHtml盲目信任HTML而不进行清理，但只有在您完全信任其内容时才会这样做（例如，不是用户提交的评论等等））。

从JavaScript对象替换值中的字符串

3 个答案: