test highlight search input

by Alexandre Froger

HTML

<div class="an-search-list-bloc"><div class="row mx-0 my-0"><div class="col-sm font-weight-bold small"><span class="civ">M.</span>&nbsp;<span class="prenom">Philippe</span>&nbsp;<span class="nom">Bolo</span></div><div class="col-sm text-left"><span class="group text-muted small">Mouvement Démocrate et apparentés</span></div></div><div class="row mx-0 my-0 small"><div class="col-sm"><strong>Région&nbsp;:</strong> <span class="region">Pays de la Loire</span></div><div class="col-sm text-left"><strong>Dép.&nbsp;:</strong> <span class="departement">Maine-et-Loire</span>&nbsp;(<span class="numDepartement">49</span>)</div></div><div class="row mx-0 my-0 text-muted small text-left"><div class="col-sm">Circonscription N°<span class="numCirco">7</span></div><div class="col-sm"><strong>Codes postaux&nbsp;:</strong> <span class="codesPostaux">49000, 49100, 49070, 49123, 49170, 49220, 49240, 49370, 49420, 49440, 49460, 49500, 49520, 49770</span></div></div></div>
<div class="an-search-list-bloc"><div class="row mx-0 my-0"><div class="col-sm font-weight-bold small"><span class="civ">M.</span>&nbsp;<span class="prenom">Philippe</span>&nbsp;<span class="nom">Bolo</span></div><div class="col-sm text-left"><span class="group text-muted small">Mouvement Démocrate et apparentés</span></div></div><div class="row mx-0 my-0 small"><div class="col-sm"><strong>Région&nbsp;:</strong> <span class="region">Pays de la Loire</span></div><div class="col-sm text-left"><strong>Dép.&nbsp;:</strong> <span class="departement">Maine-et-Loire</span>&nbsp;(<span class="numDepartement">49</span>)</div></div><div class="row mx-0 my-0 text-muted small text-left"><div class="col-sm">Circonscription N°<span class="numCirco">7</span></div><div class="col-sm"><strong>Codes postaux&nbsp;:</strong> <span class="codesPostaux">49000, 49100, 49070, 49123, 49170, 49220, 49240, 49370, 49420, 49440, 49460, 49500, 49520, 49770</span></div></div></div>
<div class="an-search-list-bloc"><div class="row mx-0 my-0"><div...

CSS

.highlight{
  color: red;
  font-weight: bold;
}

JavaScript

var item = $(".an-search-list-bloc");
var stringFilter = "i PHI oi 100";

var highlight = function($element, pattern) {
		if (typeof pattern === 'string' && !pattern.length) return;
		var regex = (typeof pattern === 'string') ? new RegExp(pattern, 'i') : pattern;
    
		var highlight = function(node) {
			var skip = 0;
			if (node.nodeType === 3) {
				var pos = node.data.search(regex);
				if (pos >= 0 && node.data.length > 0) {
                    if (node.parentNode && node.parentNode.classList.contains('highlight')) {
                        return skip;
                    }
					var match = node.data.match(regex);
					var spannode = document.createElement('span');
					spannode.className = 'highlight';
					var middlebit = node.splitText(pos);
					var endbit = middlebit.splitText(match[0].length);
					var middleclone = middlebit.cloneNode(true);
					spannode.appendChild(middleclone);
					middlebit.parentNode.replaceChild(spannode, middlebit);
					skip = 1;
				}
			} else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
				for (var i = 0; i < node.childNodes.length; ++i) {
					i += highlight(node.childNodes[i]);
				}
			}
			return skip;
		};
	
		return $element.each(function() {
			highlight(this);
		});
	};

let stringFilterArray = stringFilter.split(' ');
stringFilterArray.sort(function(a, b) {
  return b.length - a.length || // sort by length, if equal then
         b.localeCompare(a);    // sort by dictionary order
});

console.log(item);
let stringFilterRegexFormatted = stringFilterArray.join('|');
highlight(item, stringFilterRegexFormatted);

var stringFilter2 = "N°7 0";
let stringFilterArray2 = stringFilter2.split(' ');
stringFilterArray2.sort(function(a, b) {
  return b.length - a.length || // sort by length, if equal then
         b.localeCompare(a);    // sort by dictionary order
});

let stringFilterRegexFormatted2 = stringFilterArray2.join('|');
setTimeout(function(){ highlight(item,...