применить жирный текст к части строки Angular

#javascript #html #angular #ngx-translate

#javascript #HTML #angular #ngx-перевести

Вопрос:

Я хотел бы выделить часть моего текста жирным шрифтом.

Я получаю текст из определенного файла.

"INFORMATION": "Here's an example of text",

Я бы хотел, чтобы это Here's an было выделено жирным шрифтом.

"INFORMATION": "Here's an example of text",

"INFORMATION": "Here's an example of text"

Затем я печатаю это

 <span translate>INFORMATION</span>

Вместо получения

Вот пример текста

Я получаю

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

или

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

Обновить

Я пытаюсь использовать innerHTML

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

Информация — это переменная, содержащая текст

но он игнорирует мои html-теги, он печатает только текст

1. Где находится код, в котором вы пытаетесь отобразить текст? Похоже, вы просто передаете строку, а не html.

2. "INFORMATION": "Here an example of text", Вот мой код, содержащий текст. Затем я печатаю его внутри 

3. это translate ваш собственный класс или вы использовали фреймворк / библиотеку?

4. Я использую ngx-translate

Ответ №1:

Что я бы сделал, так это канал, который очищает строку, которую вы ему даете, и использует регулярное выражение, чтобы сделать его более универсальным. Что-то вроде этого stackblitz :

https://stackblitz.com/edit/angular-tyz8b1?file=src/app/app.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);
  }
}

Таким образом, содержимое переменной фактически не изменяется, что означает, что ваши данные остаются нетронутыми.

Ответ №2:

изменение ответа @user4676340, чтобы соответствовать строке, написанной следующим образом: «blabla * bold * blabla», чтобы вернуть «blabla bold blabla» — стиль 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 = /[*][wW]*[*]/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);
  }
}

(используя innerHTML в шаблоне компонента)

TS: text="blabla *bold* blabla"

HTML: 

Ответ №3:

Вы можете сделать это с помощью angular-translate 2.0, если он у вас есть.

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

Ответ №4:

Я не знаю всего контекста задачи, но вот простое решение. Я надеюсь, этого достаточно. (Но мы имеем дело с «применить жирный текст к части строки Angular».) Изменение от @user4676340 и следующие правки хороши

// app.components.ts

 item = {"INFORMATION": "Here's an", "TEXT": " example of text"};
item3 = "Here's an";
item3_1 = " example of text";

// app.components.html

Вариант 1 :

 <p>
<b><span>{{item.INFORMATION}}</span></b>
<span>{{item.TEXT}}</span>
</p>

Вариант 2:

 <p>
<b><span [innerHTML]="item3"></span></b>
<span [innerHTML]="item3_1"></span>
</p>

Результат: Вот пример текста