Angular2 выделить количество слов в HTML-строке с помощью JavaScript

Question

В моем компоненте Angular2 я получаю строку от родительского компонента, которая содержит некоторый HTML и внедряется в представление. Эта часть работает! Теперь я хочу выделить несколько первых слов в этом HTML (обратите внимание: это число меняется каждый раз, скажем, 15 сейчас).

Код:

1) html строка ( content ) содержит что-то вроде этого:

<p>Hello, this is a <span> smaple text</span></p>
<p>More things to say here...</p>
<p>Perhaps an image as well here, or a link: <a> This is a link here</a></p>
<p>This is very long, did you read this?</p>

2) В Angular2 эта строка вводится в компонент:

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

   <button type="submit" (click)="toggle()" >Toggle Highlight</button>

3) При нажатии переключателя btn: план состоит в том, чтобы подсчитать 15 (или что указано) слов в строке html и вставить интервал (с зеленым фоном) от начала до слова # 15. .

В данный момент я пытаюсь просто вставить интервал с зеленым фоновым цветом вокруг всего HTML, например:

toggle() {
    this.content = "<span style=\"background-color: green;\">"+ this.content +"</span>";
  }

Даже это не работает, я тоже пробовал с классом, но это не подбирается. И есть другая проблема с вставкой span в этот html, так как слово 15 может быть в другом теге, что вызовет проблемы.

Есть ли какие-нибудь предложения, если есть другой способ выделить несколько слов в строке html?

Answer 1

Вместо span используйте div, чтобы установить выделенный цвет фона следующим образом:

toggle() {
  this.content = `<div style="background-color: green;">${this.content}</span>`;
}

Также вы можете использовать обратную галочку (`) для упрощения строкового выражения.

Answer 2

Кажется, правильный способ сделать это - , а не , используя:

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

Поскольку innerHTML не будет поддерживать какие-либо жестко закодированные стили в тегах.

Вместо этого в html используйте:

<div #dataContainer></div>

А потом в Angular TS:

this.dataContainer.nativeElement.innerHTML =  `<div style="background-color: rgba(0, 210, 0, 0.45);">${this.content}</span>`;

Answer 3

Я думаю, что лучшим подходом для этого, вероятно, будет директива или труба. В основном добавьте директиву к компоненту, проверьте длину и затем добавьте класс к элементу ref.

что-то похожее на это:

Угловой 2/4: Как проверить длину значения ввода с помощью директивы?