Search keywords in HTML content and highlight

Declare below variables in class

highlightClass = "highlightText";

highlightRe: any;

spaceRe = /\s+/;

spaceRe2 = /\s+$/;

before: any = "";

after: any = "";

Add below code in constructor

this.highlightRe = new RegExp(this.highlightClass, "ig"),

this.before = "<span class=\"" + this.highlightClass + "\">";

this.after = "</span>";

Write below code in your page class

//Highlight Search Text

stripTags(string) {

"use strict";

var re = /<[^>]+>/ig;

var match = [],

mask = [],

space = " ",

exe, spacer;

while ((exe = re.exec(string)) !== null) {

spacer = [];

match.push(exe);

while (spacer.length !== exe[0].length) {

spacer.push(space);

}

mask.push(spacer.join(""));

}

for (var i = 0; i < match.length; i++) {

string = string.replace(match[i], mask[i]);

}

return string;

}

highlightProcess(content, term) {

var striptagsContent = this.stripTags(content);

if (this.highlightRe.test(striptagsContent)) {

return "<p>"+striptagsContent.substring(0,200)+"</p>";

}

if (term.length < 2) {

return "";

} else {

var re = new RegExp(term, "ig");

var start = [];

var end = [];

var match;

while ((match = re.exec(striptagsContent)) !== null) {

start.push(match.index);

end.push(match.index + term.length);

break;

}

if (start.length !== 0) {

start = start.reverse();

end = end.reverse();

var wordArray = striptagsContent.split("");

for (var k = 0; k < start.length; k++) {

wordArray.splice(end[k], 0, this.after);

wordArray.splice(start[k], 0, this.before);

}

var finalContent = wordArray.join("");

// var startPoint = start[0]; //0;

var testContent1 = finalContent.split("<span");

var testContent = testContent1[0].split(" ");

var previousWord = "";

if (start[0] > 10) {

previousWord = testContent[testContent.length - 2] + " " + testContent[testContent.length - 1];

}

if (previousWord == undefined || previousWord == "") {

return "<p><span " + testContent1[0].substring(0, 250) + "</p>";
} else {

return "<p>" + previousWord + "<span " + testContent1[1].substring(0, 250) + "</p>";

}

} else{

return "<p>"+striptagsContent.substring(0,200)+"</p>";

}

}

}

checkTerm(term) {

var pro = term;

if (pro.length < 2) {

return "";

} else if (this.spaceRe.test(pro) && this.spaceRe.exec(pro).index === 0) {

pro = pro.replace(this.spaceRe.exec(pro), "");

if (this.spaceRe2.test(pro)) {

return pro.substring(0, pro.lastIndexOf(this.spaceRe2.exec(pro)));

} else {

return pro;

}

} else if (this.spaceRe2.test(pro)) {

return pro.substring(0, pro.lastIndexOf(this.spaceRe2.exec(pro)));

} else {

return term;

}

}

Call the highlightProcess function like below. Where Content means HTML content. and searchTerm is the keyword to highlight.

return this.highlightProcess(content, this.checkTerm(this.searchTerm));

Above function will return HTML content with highlighted searched text.

Add below CSS in page .scss file. same class "highlightText" we have added in "highlightClass"
 variables.

.highlightText {

background: yellow;

}