突出显示 html 原始文本中的特定文本
Highlighting a specific text which in html raw text
我想要完成的是突出显示原始文本中参数给出的文本,格式为 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()
方法 returns 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() }}
谢谢。
您就快完成了,但是在 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>
我想要完成的是突出显示原始文本中参数给出的文本,格式为 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()
方法 returns 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() }}
谢谢。
您就快完成了,但是在 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>