在Angular中包含文本和<img/>标签的字符串中以滑块显示图像

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);我有图片和文字。

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

当我使用innerHTML在html中显示数据时，它同时显示图像和文本。我想在滑块中显示图像，并单独显示文本。字符串包含标签和文本。非常感谢您的帮助。

所以我的问题是，从数据库中，标签和文本都到了。因此，如何将它们分开并在滑块中显示所有图像。非常感谢您的帮助。

Answer 1

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

Answer 2

假设您的user.blog文本字符串如下所示：

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

请记住，字符串基本上是一个字符数组，您可以编写一个遍历文本并执行以下操作的函数：

找到<img的索引，将字符从字符串的开头移至该索引，然后移至blogText字符串，然后找到>的索引，将字符串中的字符从新从<img的索引开始（现在为>）到blogImage数组，然后重复。

通过遍历整个字符串，可以将所有博客文本移到blogText字符串中，并显示一系列图像URL，然后可以根据需要单独显示它们。