如何解析嵌入JavaScript对象内的字符串的html?

时间:2016-09-29 08:08:57

标签: javascript html angularjs

JsFiddle

    
<script>
  angular.module('module', []);

  angular.module('module').controller('hello', function($scope) {
    $scope.obj = {
      "text": "<u>HelloWorld</u>"
    };

  });

</script>

<body>

  <div ng-app='module' ng-controller='hello'>
    Current:{{obj.text}}

    <br>
    <br> Expected:<u>HelloWorld</u>
  </div>
</body>

我正在尝试阅读存储在 JSON 中的对象,然后将其打印在我的网页上。

我提供了上述代码的链接。

我希望输出是一个字符串“HelloWorld”,它是下划线。

PS:

  • 我无法修改 JSON
  • obj是被提取的对象,我无法共享 JSON 所以我使用了硬编码值。

3 个答案:

答案 0 :(得分:3)

您可以将ng-bind-htmlng-bind-html-unsafe用于此类目的。您必须在ngSanitize中加入angular-sanitize

<p ng-bind-html="obj.text"></p>

示例显示为here

答案 1 :(得分:1)

你想只使用正则表达式:

$scope.obj.text =  $scope.obj.text.replace(/(<([^>]+)>)/ig,"");

工作小提琴here

答案 2 :(得分:1)

您需要使用angular-sanitize module

<script src="path/to/installed/angular-sanitize/angular-sanitize.js"></script>

<script>
    angular.module("module", ["ngSanitize"]);

    angular.module('module').controller('hello', function($scope) {
        $scope.obj = {
            "text": "<u>HelloWorld</u>"
        };

    });

</script>

你的HTML:

<div ng-app='module' ng-controller='hello'>
    Current: <p ng-bind-html="obj.text"></p>

    <br>
    <br> Expected:<u>HelloWorld</u>
</div>