Javascript 如何在ionic应用程序中修改下载的html？

我是爱奥尼亚的新手，我们正在尝试构建一个阅读器应用程序，从服务下载html文档，然后显示它们。我知道如何修改作为ionic应用程序一部分的html，但是我们下载的文档显示在ionic应用程序中。我们想添加一个搜索功能，查找并突出显示所有出现的输入单词。我们找到它们并通过将它们包装在一个具有设置黄色背景的css类的范围中来突出显示它们。但它并没有反映出应用程序中的变化

该文档从服务下载，然后包装在一个div中，以下是我们迄今为止所做的工作，这是应用程序文档页面document.html中的一个片段，下载的内容就在这里：

<ion-content id="content">
 <div [ngClass]="isNight ? 'night' : 'day'">
  <div [ngClass]="isSingle ? 'single' : 'double'">
   <div id="inputText" class="document" [innerHtml]="document | keepHtml" [ngStyle]="{'font-size': fontSize+'em' }"></div>
  </div>
 </div>
</ioncontent>

---

我们发现了问题,；爱奥尼亚/安格尔认为我们的html不安全。我们开始消毒它，然后再把它放回去

我们实际上找到了两个解决方案，一个是在page类中运行一个消毒器（如果我的角度不太正确，请原谅，我经历了太多的“未来浪潮”，在我职业生涯的这一点上，它们都开始一起运行）和另一个，令人惊讶的是，将修改后的HTML添加回this.document而不是element.innerHTML

---

第二个解决方案看起来像是黑魔法，我不确定我是否理解它为什么有效。实际上，我更喜欢第一种解决方案。

您能展示一下您的

keepHtml

管道代码吗？我假设您已将管道添加到app.module.ts。下载的HTML文档中是否有

和

标记？管道的app.module.ts中有一个导入，是的，下载的文档是完整的，并且包含和标记。这可能是问题所在。HTML文件中只能有一个

和

标记，当您将下载的HTML文件粘贴到页面中时，其中就有两个

和

标记。更多信息。好吧，我们正在处理这些，对不起，我不得不回去看看代码。该服务在文档正文周围用标签将其标记。我们把它拉出来，扔掉所有其他东西，包括html、头和体标记。

highlight(keyword) {
  var inputText = document.getElementById("inputText");
  var innerHTML = inputText.innerHTML;
  inputText.innerHTML = innerHTML.replace(new RegExp(keyword, 'g'), "<span class=\"keyword\">" + keyword + "</span>");
}

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

/**
 * Generated class for the KeepHtmlPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({ name: 'keepHtml', pure: false })
export class KeepHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}