4
votes

appliquer du texte en gras sur une partie de la chaîne Angular

Je voudrais mettre une partie de mon texte en gras.

J'obtiens un texte d'un fichier spécifique.

"INFORMATION": "Voici un exemple de texte",

Je voudrais que Voici un en gras.

"INFORMATION": " Voici un b> exemple de texte ",

" INFORMATION ":" Voici un exemple de texte "

Ensuite, je l'imprime

<span [innerHTML]="information | translate"></span>

Au lieu d'obtenir

Voici un exemple de texte

Je reçois

<strong>Here's an</strong> example of text

<b>Here's an</b> example of text

UPDATE

J'essaye innerHTML

<span translate>INFORMATION</span>

L'information est une variable contenant du texte

mais elle ignore mes balises html, elle n'imprime que du texte

javascript angular html angular-translate

4 commentaires

Où est le code où vous essayez d'afficher le texte? Il semble que vous passiez simplement une chaîne et non un code HTML.

"INFORMATION": " Voici un exemple de texte", Voici mon code contenant le texte. Ensuite, je l'imprime dans

translate est-il votre propre classe ou avez-vous utilisé un framework / une bibliothèque?

J'utilise ngx-translate

3 Réponses :

0
votes

Vous pouvez le faire avec angular-translate 2.0 a> si vous l'avez.

<span translate="{{ 'INFORMATION' }}"></span>

1 commentaires

C'est uniquement pour Angular 1.x?

4
votes

Ce que je ferais, c'est un tube qui nettoie la chaîne que vous lui donnez, et utiliser une expression régulière pour la rendre plus générique. Quelque chose comme ce stackblitz:

https: // stackblitz.com/edit/angular-tyz8b1?file=src%2Fapp%2Fapp.component.html

import { Pipe, PipeTransform, Sanitizer, SecurityContext } from '@angular/core';

@Pipe({
  name: 'boldSpan'
})
export class BoldSpanPipe implements PipeTransform {

  constructor(
    private sanitizer: Sanitizer
  ) {}

  transform(value: string, regex): any {
    return this.sanitize(this.replace(value, regex));
  }

  replace(str, regex) {
    return str.replace(new RegExp(`(${regex})`, 'gi'), '<b>$1</b>');
  }

  sanitize(str) {
    return this.sanitizer.sanitize(SecurityContext.HTML, str);
  }
}

De cette façon, le contenu variable ne changer, ce qui signifie que vos données restent intactes.

0 commentaires

0
votes

modification de la réponse de @ user4676340, pour qu'elle corresponde à la chaîne qui s'écrit comme ceci: "blabla bold blabla" pour renvoyer "blabla bold blabla" - style Whatsapp

import { Pipe, PipeTransform, Sanitizer, SecurityContext } from '@angular/core';
import { noop } from 'rxjs';

@Pipe({
  name: 'boldText'
})
export class BoldTextPipe implements PipeTransform {

  constructor(
    private sanitizer: Sanitizer
  ) { }

  transform(value: string): any {
    const regex = /[\*][\w\W]*[\*]/gmi;
    return this.sanitize(this.replace(value, regex));
  }

  replace(str, regex) {
    let matched = str.match(regex);
    matched ? matched.forEach(foundString => {
      foundString = foundString.substring(1, foundString.length - 1);
      str = str.replace(regex, `<b>${foundString}</b>`);
    }) : noop;
    return str;
  }

  sanitize(str) {
    return this.sanitizer.sanitize(SecurityContext.HTML, str);
  }
}

(en utilisant innerHTML dans le modèle de composant) p>

TS: text = "blabla bold blabla"

HTML:

0 commentaires