Adding html tags to text

@besasam wrote:

So in my app I have a page that displays a bunch of posts from Twitter. I want to apply a CSS class to the hashtags in these posts so that they’re highlighted in a different color from the text. For that, I wrote a simple function:

highlightHashtags(text) {
  let words = text.split(" ");
  for(let i in words) {
    if(words[i].substring(0,1) == "#") {
      words[i] = "<span class='hashtag'>" + words[i] + "<span>";
    }
  }
  return words.join(" ");
}

And I call that in the function where I get the tweet data from my server:

  // ...
  let text = tweets.statuses[i].full_text;
  t["text"] = this.highlightHashtags(text);
  // ...

(t is later pushed to the array tweets which is then used in the HTML as *ngFor="let tweet of tweets" - for clarity lol)

But when I try to print the text in the app’s page, it doesn’t apply the span tags but rather prints them as plain text.

Calling the function like {{ this.highlightHashtags(tweet.text) }} gives the same result.

I get that this is probably a security measure - but is there another way to do this?

Posts: 1

Participants: 1

Read full topic