How can I get my parsed html to appear as html instead of plain text?

Question

This jsFiddle explains it all

My code separates hashtags, e.g., #riots = <span class="hashtags">#riots</span> but it's being printed as plaintext instead of html. What am I doing wrong?

function formCtrl($scope){
    $scope.$watch(function() {
        $scope.description = "Wow, it's crazy over here! #baltimore #riots";
      $scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig);   
      $scope.desc = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, "$1<span class='hashtag'>$2</span>");
    })
}

#description {
    width: 300px;
    height: 3em;
}
.hashtag {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
    <textarea ng-model="description" id="description"></textarea>
    <br />
vidTags: {{vidTags}}
    <br />
desc: {{desc}}
    <br />

</div>

Maybe a dupe? http://stackoverflow.com/questions/14761724/angularjs-insert-html-from-a-string — RenaissanceProgrammer, Apr 30 '15 at 23:31
read $sce and $santize https://docs.angularjs.org/api/ng/service/$sce — Chandra Sekhar Walajapet, Apr 30 '15 at 23:32
Thanks for your comment @RenaissanceProgrammer. The answer didn't help but the first comment below it did! For now, I just want it to work. Later, I'll try to get $sce or $sanatize to work — Jay, Apr 30 '15 at 23:55
Correction: 'ng-bind-html-unsafe' only works in Angularjs 1.1 or older. — Jay, May 01 '15 at 00:03

James Wilkins · Answer 1 · 2015-04-30T23:36:23.650

You now have to use $sce to run your output through a filter, which you can specify to allow the HTML.

We can implement this using $sce.trustAsHtml() by adding a filter to [the] code (outside of the controller). This custom filter will make sure that [the] HTML doesn’t get filtered out by AngularJS 1.2/AngularJS 1.3 or later

Sources:

http://creative-punch.net/2014/04/preserve-html-text-output-angularjs/ https://docs.angularjs.org/api/ng/service/$sce

jake · Accepted Answer · 2015-05-01T15:33:33.657

Here's a Plunker that shows a working example using $sce.

http://plnkr.co/edit/sZliFJjOTiRyFxe7Bdts?p=preview

<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

  <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="formCtrl">
    <textarea ng-model="description" id="description"></textarea>
    <br />vidTags: {{vidTags}}
    <br /><div ng-bind-html="desc"></div>
    <br />
  </div>
  <script>
    var app = angular.module('myApp', []); 
    app.controller('formCtrl', function formCtrl($scope, $sce) {

      $scope.$watch(function() {
        $scope.description = "Wow, it's crazy over here! #baltimore #riots";
        $scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig);
        var message = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, '$1<span class="hashtag">$2</span>');
        $scope.desc = $sce.trustAsHtml(message); 
      })
    })
  </script>
</body>

</html>

@jake where possible try include the code for the answer in your response instead of third party locations, that way if your code gets removed from plnkr in years to come, stack overflow users still get to benefit from your answer. — Des Horsley, May 01 '15 at 04:49

How can I get my parsed html to appear as html instead of plain text?

2 Answers2