替换 JavaScript 对象中的字符串值

Question

我有一个 JSON 文件，其中包含多个 <br /> 标签。该文件使用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 文件中给元素 pre-wrap 的 white-space 属性。

另一个是棱角分明的。阅读 data-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>s 并在 HTML 中呈现换行符。它会使用ngSanitize 自动清理您的输入，以去除任何不在其白名单中的标签（您必须将ngSanitize 作为依赖项引入）...

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

视图就像...一样简单

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

JsBin

您还可以使用$sce.trustAsHtml() 告诉ngBindHtml 盲目信任HTML 而不进行清理，但只有在您可以完全信任其内容的情况下才能这样做（即，不能用于用户提交的cmets 等）。