CODEWITHSUNDEEP
javascripthtmlangularjs
shamaleyte
shamaleyte

Reputation: 1912

Dynamic generation of span tag with line breaks

While I create the json structure for Angular to render my data properly, I simply replace a specific tag with

</br>

or

 &nbsp;

texts in order to show the whole text in a proper format.

  if(e.transcription.indexOf("%HESITATION")>-1)
     e.transcription =  e.transcription.replace("%HESITATION", &nbsp;&nbsp;');

OR

if(e.transcription.indexOf("%HESITATION")>-1)
     e.transcription =  e.transcription.replace("%HESITATION", </br></br>;');

However, the generated string is showing those elements as string, it does not either render it as expected or show the text with line breaks accordingly.

What is the correct way of replacing here to have line breaks properly in the html?

I simply print those texts in Angular in the following format;

<span class="script-text">{{thread.transcript}}</span>

But the generated output is 

Hello </br></br> Word
Hello &nbsp;&nbsp; Word

Upvotes: 0

Views: 892

Answers (2)

Stark Buttowski
Stark Buttowski

Reputation: 1849

var app = angular.module("myApp", ['ngSanitize']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>
<div ng-app="myApp">
<input type="text" ng-model="value">
<div ng-bind-html="value"></div>
</div>

Upvotes: 1

31piy
31piy

Reputation: 23859

You can do it using ng-bind-html directive. Try the following:

<span class="script-text" ng-bind-html="thread.transcript"></span>

This needs ngSanitize to be included in your module. Read more in this guide.

Upvotes: 1

Related Questions