在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 处理这个问题，但是它们都试图通过将关键字替换为 `` 关键字来解决这个问题，所以由于文本已经是原始的 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() }}

谢谢你。

- RrR

Answer 1

你已经接近成功了，但在Angular中，双括号{{<code>}}之间的代码将被呈现为转义后的html文本(纯文本)。为了让你的字符串呈现为html，请将它放在父元素的innerHTML属性中，像这样：

<div #rawContentContext class="form-group m-form__group row col-lg-12"
    style="width:100%; height: 100vh; overflow:scroll;"
    [innerHTML]="getHtmlRawContent() | highlight:getSearchedKeyWord()">
</div>

- Pedro Lima