Sinon j'ai trouvé une solution peu académique (voir pas du tout)
Attention çà pique les yeux.
(ps : je ne suis pas codeur, juste un bricoleur amateur)
Cela se passe en 2 temps :
1. chercher dans le texte html toutes les positions du mot recherché (quelque soit la casse ou les accents). Position stocké dans un array.
2. réinjecter le texte html avec les balise selon les position trouvé avant.
<p>Du vert ou VERT. Un dog ou DOG. Un dôg vêrt</p>
u {
background-color: red;
}
Et attention aux yeux :
const removeAccents = str => str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
let paragraphorigin = document.querySelector('p').innerHTML;
const paragraph = removeAccents(paragraphorigin.toLowerCase());
const searchTerm = 'dog';
var count = paragraph.split(searchTerm).length - 1;
var pos_suite = paragraph.indexOf(searchTerm);
let tableaupos = [];
for (i = 0; i < count; i++) {
console.log('position de depart='+pos_suite);
pos = paragraph.indexOf(searchTerm,pos_suite);
pos_suite = paragraph.indexOf(searchTerm,pos_suite + 1);
let newLength = tableaupos.push(pos);
console.log(pos);
}
String.prototype.splice = function(idx, rem, str) {
return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};
var text1 = "<u>";
var text1taille = text1.length;
var text2 = "</u>";
var text1taille2 = text2.length;
var texttailletotale = text1taille + text1taille2;
for (j = 0; j < tableaupos.length; j++) {
paragraphorigin = paragraphorigin.splice(tableaupos[j]+(j*texttailletotale), 0, text1).splice(tableaupos[j]+text1taille2+searchTerm.length+(j*texttailletotale)-1, 0, text2);
console.log(paragraphorigin);
}
document.querySelector('p').innerHTML = paragraphorigin;
Cordialement Jérôme