javascript - 突出显示 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() }}

谢谢。

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>