突出显示为html原始文本的特定文本

Question

[我要完成的工作是在HTML格式的原始文本中突出显示由参数给出的文本。

我正在使用Angular 7，并尝试执行jQuery函数和一些第三方库，但尚未这样做。

这里是场景；

原始HTML文本如下

<div #rawContentContext class="form-group m-form__group row col-lg-12" style="width:100%; height: 100vh; overflow:scroll;">
  {{ getHtmlRawContent() }} 
</div>

getHtmlRawContent()方法返回HTML原始代码作为字符串

我已经尝试使用markjs和hilitorjs处理此问题，但是它没有用，因为他们正试图通过将关键字替换为<mark>关键字来解决此问题，因此文本已经是原始HTML，因此这些步骤无效。] >

这里是方法和代码示例；

<script type="text/javascript">
   var myHilitor = new Hilitor(document.getElementById("rawContentContext"));
   myHilitor.apply("exceeded");
</script>
[实际上它在某些情况下可以呈现HTML代码而不是原始输出。

也尝试过管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'highlight'
})

export class HighlightSearch implements PipeTransform {

    transform(value: any, args: any): any {
        if (!args) {return value;}
        if (value!=null){
            var re = new RegExp(args, 'gi');
            return value.replace(re, '<p style="background-color: red;"> <mark>$&></mark> </p>');
        }

    }
}
和HTML端

{{ getHtmlRawContent() | highlight:getSearchedKeyWord() }}
谢谢。

[我要完成的工作是在原始文本中突出显示由参数给定的文本，其格式为HTML。我正在使用Angular 7，并尝试使用jQuery函数和某些第三方...

Answer 1

您快到了，但是在Angular中，双括号{{<code>}}之间的代码将呈现为转义的html文本（纯文本）。为了将您的字符串呈现为html，它必须位于父元素的属性innerHTML中，如下所示：