Показывать изображения в слайдере из строки, содержащей текст и тег <img>в Angular

Question

Я работаю над системой блогов в Angular, в которой я использовал текстовый редактор (ngx-text-editor), в который я вставляю изображения и текст.Я также сохраняю изображения и текст в базу данных.Но когда я хочу показать изображения в слайдере и тексте отдельно, я не могу отделить изображения от текста.

import { Component, OnInit } from '@angular/core';
import { UserService} from '../_services';
import { User } from '../_models/user'
import { Subscription } from 'rxjs';
import { first } from 'rxjs/operators'
import { AuthenticationServiceService } from '../_services';
@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {
  users: User[] = [];
  msg: string = null;

  constructor( private authenticationService: AuthenticationServiceService,
    private userService: UserService) { }

  ngOnInit() {
    this.getBlog();
  }
  private getBlog() {
    this.userService.getBlog().pipe(first()).subscribe(users => {
      this.users = users;

      console.log(this.users);
  });
  }
}

В этом console.log(this.users); у меня есть изображения иtext.

<p class="new22" style="word-wrap: break-word;" [innerHTML]="user.blog"></p>

Когда я показываю данные в html, используя innerHTML и он показывает изображения и текст одновременно.Я хочу показать изображения на слайдере и текст отдельно.Строка содержит тег и текст.Любая помощь очень ценится.

Так что моя проблема в том, что из базы данных поступают как теги, так и текст.Итак, как разделить их и показать все изображения в слайдере.Любая помощь очень ценится.

Answer 1

Предполагая, что ваша текстовая строка user.blog выглядит примерно так:

Some length of text followed by <img src="image/url.jpg"> followed by more text.

И, помня, что текстовая строка - это в основном массив символов, вы могли бы написать функцию, которая перебирает текст и делаетследующее:

Найдите индекс <img, переместите символы из начала строки в этот индекс в строку blogText, затем найдите индекс >, переместите символы в строке изновое начало (которое теперь <img) индекса > в массиве blogImage, затем повторите.

Итерируя по всей строке, вы можете переместить весь текст блога в строку blogText и получить массив URL-адресов изображений, которые можно отображать отдельно, тогда, как вам нравится.

Answer 2

// use this pick all img out
var patt1 = /<img(.*?)>/g;
const m = str.match(patt1);