Emphasize a word in a Typescript text by wrapping it in an HTML tag

Question

Emphasize a word in a Typescript text by wrapping it in an HTML tag

I've been experimenting with using HTML tags within TypeScript to highlight specific words in a sentence before displaying the sentence in HTML. Despite searching on StackOverflow for various solutions, I haven't been able to find one that works.

Here is an example of the code:

example.sentences = this.sentences.filter((sentence: { Sentence: string | string[]; }) => sentence.Sentence.includes(word))
        .map((sentence: { Sentence: any; }) => sentence.Sentence.replace(new RegExp(word, 'gi'), match => {
          return `<mark class="marking">${match}</mark>`;
        }));

Then I display these sentences in HTML:

<mark *ngFor="let sentence of example.sentences">
      {{ sentence }}
</mark>

The output looks like this:

Alice is in <mark class="marking">wonderland</mark>

Although it appears as text within the sentence, it's not rendering as HTML.

Is there a way to define this in TypeScript or in HTML in order to change the color of a word within a sentence?

angular typescript

Answer 1

Answer №1

In your example.sentences, you're already outputting HTML so there's no need for additional HTML tags. Here is an alternative approach:

example.sentences = this.sentences.filter((sentence: { Sentence: string | string[]; }) => sentence.Sentence.includes(word))
        .map((sentence: { Sentence: any; }) => sentence.Sentence.replace(new RegExp(word, 'gi'), match => {
          return match;
        }));

<mark *ngFor="let sentence of example.sentences" [innerHTML]="sentence"></mark>

Answer 2

In your example.sentences, you're already outputting HTML so there's no need for additional HTML tags. Here is an alternative approach:

example.sentences = this.sentences.filter((sentence: { Sentence: string | string[]; }) => sentence.Sentence.includes(word))
        .map((sentence: { Sentence: any; }) => sentence.Sentence.replace(new RegExp(word, 'gi'), match => {
          return match;
        }));

<mark *ngFor="let sentence of example.sentences" [innerHTML]="sentence"></mark>

Answer 3

Answer №2

Employ the innerHTML method to identify HTML tags within a string. Here is an example:

<div [innerHTML]="sentence"> </div>

Answer 4

Employ the innerHTML method to identify HTML tags within a string. Here is an example:

<div [innerHTML]="sentence"> </div>

Answer 5

Answer №3

It is recommended to

utilize the constructor method with a private sanitizer parameter: 
// javascript: URLs are risky if manipulated by attackers.
// Angular automatically sanitizes them during data binding, but you have the option
// of explicitly informing Angular to trust this particular value:
this.dangerousHtml = `<mark class="marking">${match}</mark>`;
this.trustedHtml = sanitizer.bypassSecurityTrustHtml(this.dangerousHtml);

Answer 6

It is recommended to

utilize the constructor method with a private sanitizer parameter: 
// javascript: URLs are risky if manipulated by attackers.
// Angular automatically sanitizes them during data binding, but you have the option
// of explicitly informing Angular to trust this particular value:
this.dangerousHtml = `<mark class="marking">${match}</mark>`;
this.trustedHtml = sanitizer.bypassSecurityTrustHtml(this.dangerousHtml);

Emphasize a word in a Typescript text by wrapping it in an HTML tag

Answer №1

Answer №2

Answer №3

Similar questions

Storing JWT securely in cookie or local storage for a Node.js/Angular 2 web application

What is the reason that specifying the type of function parameters does not result in conversion being

Property 'text' is not found on type '{} | Response' in Angular/Node

Invoke cloud functions independently of waiting for a response

Reactive property in the Vue composition API

Maintain the URL state while logging in using angular-oauth2-oidc

Retrieve the user information from Auth0 within the NestJS application

How do you define prop types when passing them in Nextjs?

What causes the object type to shift away from 'subscribe'?

When trying to style a Material UI component in Mui v5, no matches for overloads were found

How to display a modal within a router-link in Vue 3?

Encountering deployment problems with React and TypeScript involving router on Github Pages

The Server Components render encountered a glitch

Tips for effectively integrating an admin panel into an Angular project

Error retrieving the latest token in Angular before the component has fully loaded

Stop displaying errors with Angular 6 HttpInterceptor

NodeJS and TypeScript are throwing an error with code TS2339, stating that the property 'timeOrigin' is not found on the type 'Performance'

Troubleshooting the lack of success in enhancing global scope within Typescript

Distinguishing variations within subcategories that stem from a common origin

Issue with Stenciljs custom event not triggering using @Listen decorator