突出顯示 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>}}之間的{{<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>