How can I remove html tags for parsing the actual value and then put them back? - html

Question

I am working on highlighting the search result in search difference app and I met some problems.
On the input we get some text inside <pre> tag, that already have some highlighted text using <span> tag.
<ng-container *ngIf="settings?.allowHtmlTransform">
<pre [innerHtml]="row?.value" ></pre>
</ng-container>
My job is to highlight current search result and this is the problem. The row.value I need to parse is something like <div class="NORMAL>Sample <span class="MISSING">Text</span></div>. There are decent amount of highlight classes (ex. MODIFIED, MISSING, EXTRA etc.)
I need to highlight search result (for example "a") but it starts looking inside tags and breaks formatting (for Highlight i use the same <span class="CURRENT">)</span>
The question is how can I parse value without these tags, but when I will return highlighted value they would stay on their place? Maybe there are some beautiful solutions?

Answer 1

It has been 2 weeks since I asked the question and as I got back to work I found solution myself. Maybe anyone find it helpful. So the idea was to split string into parts divided by "<" and ">". And then we can check whether each part is html tag or not and add highlight only to text parts.
So here is the code. There are things to be improved but still it worked well for my case.
class Highlighter {
static hlcolors: Map<IHlType, string> = new Map([
[IHlType.success, 'success'],
[IHlType.highlight, 'currHl']
]);
static getHlVal(value: string, type: IHlType): string {
let clazz = Highlighter.hlcolors.get(type);
return '<span class="' + clazz + '">' + value + '</span>';
}
static hlByPhrase(value: string, type: IHlType, phrase: string): string {
return value.replace(phrase, Highlighter.getHlVal(phrase, type));
}
static parsehl(value: string, type: IHlType, phrase: string){
let temp = [];
let temp1 = value;
while(temp1.length > 0){
let stPos = temp1.indexOf("<");
let enPos = temp1.indexOf(">");
if(stPos === 0){
temp.push(temp1.slice(stPos, enPos+1));
temp1 = temp1.slice(enPos+1);
}
else {
temp.push(temp1.slice(0, stPos));
temp1 = temp1.slice(stPos);
}
}
let res = "";
for(let i = 0; i<temp.length; i++){
if(temp[i].includes("<div") || temp[i].includes("<span") || temp[i].includes("</div") || temp[i].includes("</span"))
res += temp[i];
else res += temp[i].replace(phrase, Highlighter.getHlVal(phrase, type));
}
return res;
}
}