[Résolu] Remplacer toutes les suite de caractère en respectant la cass

Bonjour,
ouah génial.
allé je complique le truc, si le mot "dog" provient d'une variable.
var = "dog";
Comment faire ?
Ah oui et si il y a des accents ?
exemple : dôg en <u>dôg</u> et toujours les dog ou DOG ou Dog.
Cordialement
Jérôme

Je me suis mal exprimé.
Voici une exemple :

const el = document.querySelector('p');
var txtrecherche = "dog"; // txtrecherche récupéré depuis un input
el.innerHTML = el.textContent.replace(/(ma variable 'txtrecherche')/gmi,'<u>$1</u>')

là évidement çà ne fonctionne pas

Le contexte.
C'est un tableau avec différent texte, avec majuscule ou non et accent ou non.
L'utilisateur saisie dans un input le mot recherché, cela filtre sont tableau.
Mon but es d'ajouté les balises <u>...</u> pour mettre en évidence le mot trouvé dans le texte qui reste affiché.

Cordialement
Jérôme

Edit : Ajout d'une image. dans celle-ci l'utilisateur cherche 'ie' et je souhaite surligner tous les 'ie' qu'il soit en majusucle ou pas et avec ou sans accents
Modifié par Jerome87 (31 Jan 2024 - 20:43)

L'exercice était très intéressant pour moi, j'ai dû prendre une demi-heure ce soir pour y arriver car je ne maîtrisait pas le principe. Donc :

<input type="text" id="search">
<p>I think Ruth's dog is cuter DOG than your dog! to Dog to dog.</p>

addEventListener('input', () => {
  const search = document.getElementById('search').value
  const regex = new RegExp(search,'gi')
  el.innerHTML = text.replace(regex,`<u>${search}</u>`)
})

Exemple en ligne (le lien précédent remis à jour) : CodePen.

Par contre, comme tu le vois, on perd la recherche avec les accentuations. En effet il n'y a aucune fonction native en Javascript pour s’épargner de les enlever à la volée et les solutions proposées sont un peu fastidieuses à mettre en place dans le cadre de cet exemple. Parce qu'en plus il faut les enlever, mais ensuite les remettre ! (et c'est relou...)
Modifié par Olivier C (31 Jan 2024 - 23:02)

Merci pour le temps passé.
Effectivement les accent semble poser pas mal de problème.
J'ai bien trouvé comment les supprimer mais pour les remettre cela semble bien compliqué.

const removeAccents = str => str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');

Cordialement
Jérôme

Effectivement, j'ai essayé de mettre dans un tableau puis de récupérer mais çà devient un code bien long juste pour des accents.

Sinon petit soucis, j'essaye de mettre ton code au milieu de celui que j'ai pour mon tableau.
Mais cela casse le script.
J'utilise notepad++
Voici un screen (le code après le tiens deviens noir et donc çà bug, a partir de la ligne 3000).



Cordialement
Jérôme
Modifié par Jerome87 (01 Feb 2024 - 04:29)

Vous mettez ce code au sein d'un fichier qui comporte déjà plus de 3000 lignes de code ! Déjà il y a un problème. Il faut structurer votre code, diviser chaque action en autant de fichiers.

Ensuite, regardez bien votre code qui précède : là, tout de suite, je vois deux boucles for qui ne sont pas fermées. Donc a priori le code est mal placé au sein de l'ensemble.

Enfin, mon code, il faut l'encapsuler dans une fonction qui s'appelle elle même, ceci afin de limiter la portée de ses variables et donc d'éviter les effets de bord sur le reste du code.

Salut,

perso ce problème ça me fait penser aux "collate ci_ai" en base de données (ci : pour insensible à la casse et ai pour insensible aux accents).

Du coup en cherchant "collate javascript" je suis tomber sur cette page : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator :

// en allemand, 'ä' est composé de la lettre de base 'a'
console.log(new Intl.Collator("de", { sensitivity: "base" }).compare("ä", "a"));
// ? 0

J'ai essayé de faire quelques petits tests à partir de ton code mais je n'arrive pas à me dépatouiller pour :
- éclater proprement le string (si j'éclate sur les ,!' je ne sais pas la reconstruire ensuite, si je match w+|W+ il m’éclate certains mots comme si dög était trois mots..
- et il me rajoute les <u> </u> qu'il faudrait re supprimer avant d'essayer de faire avec 2 lettres.

Mon code qui bug :

let el = document.querySelector('p')
let text = el.innerHTML

addEventListener('input', () => {
  const search = document.getElementById('search').value
  //let el_tab= el.innerHTML.toString().split(/[\.,!']/);
  let el_tab= el.innerHTML.toString().match(/\w+|\W+/g);
  console.log(el_tab);
  el_tab.forEach( 
   function(e, index) {
      if(new Intl.Collator("de", { sensitivity: "base" }).compare(e, search)==0)
      {
        this[index]=e="<u>"+e+"</u>";
      }
    }
  , el_tab
  );
  el.innerHTML = el_tab.join(" ");
})

Bonjour,

J'ai donc mis dans une fonction mais même soucis :


La ligne console.log(td.innerHTML); reste en noir.

Sinon le code https://codepen.io/olivier-c/pen/KKEQRzV?editors=1011[/url
le texte recherché "dog" transforme tous les dog en minuscule et je souhaite les conserver.

Cordialement
Jérôme
Modifié par Jerome87 (01 Feb 2024 - 13:47)

Nouvelle version pour régler le problème du \w qui match pas le caractère ö par exemple (de ce que j'ai compris ça correspond juste à ces 3 ensembles) a->z , A->Z 0->9

A la place j'ai le petit u en plus à la fin pour qu'on fait du unicode et le p{L} qui correspond à n'importe quel caractère unicode.

let el = document.querySelector('p')
let text = el.innerHTML

addEventListener('input', () => {
  const search = document.getElementById('search').value
  let el_tab= el.innerHTML.toString().match(/\p{L}+|\W+/gu);
  console.log(el_tab);
  el_tab.forEach( 
   function(e, index) {
      if(new Intl.Collator("de", { sensitivity: "base" }).compare(e, search)==0)
      {
        this[index]=e="<u>"+e+"</u>";
      }
    }
  , el_tab
  );
  el.innerHTML = el_tab.join("");
})

Cela m'a l'air de plutôt bien correspondre à la demande

Je suppose qu'il faudra aussi un système pour enlever les balises <u> avant de faire une nouvelle recherche vu qu'on modifie directement le html d'origine.
Je dirais que le plus simple doit être de faire une copie invisible du html que l'on modifie (genre sur onload) et de réinitialiser avec cette valeur d'origine au début du addEventListener)
Modifié par Mathieuu (01 Feb 2024 - 14:49)

Merci Mathieuu
Par contre çà ne cible que les mots "dog".
Dans mon cas "dog" n'es qu'un exemple. cela pourrait cibler n'importe qu'elle mot ?
Là je nage, trop compliqué pour moi.

Edit : çà cible bien d'autre mot, mais des mots entier.
Est-il possible de cibler une partie d'un mot ? (exemple le mot "cuter", si je tape cut seul cut es surligné)

Cordialement
Jérôme
Modifié par Jerome87 (01 Feb 2024 - 15:12)

Ah oui c'est parce que dans le compare je fais une comparaison entre chaque mot et ce qu'il y a dans search.

Pour le coup il faudrait sans doute changer l'algo, a priori il n'y a pas besoin de faire exploser la phrase en tableau de mots si on ne cherche pas des mots ..

Pour le nouvel algo je dirais qu'on doit pouvoir imaginer une espèce de fenêtre glissante de la taille du mot que l'on cherche et qui se décale sur tout le texte et utilise la fonction compare en boucle (mais pour le coup ça risque d’être un peu plus consommateur de ressource comme traitement)

Félicitation Mathieuu, c'est vraiment génial comme snipet, à garder sous le coude !

J'ai mis mon CodePen à jour pour l'utiliser.

@Jérome87 : l'encapsulation avec une fonction ressemble à ceci :

(function search () {
  // tout le code de la fonction ici.
})()

Est inclus ici l'appel de la fonction par elle même (les parenthèses en plus par rapport à une fonction normale).
Modifié par Olivier C (01 Feb 2024 - 15:52)

@Mathieuu : Effectivement si cela devient un code trop lourd c'est dommage.
J'aime bien ton code dommage pour le mot a mot, car si un utilisateur tape un mot es oublie une lettre cela ne fonctionne pas.

Celui de @Olivier C est bien mais là je perd la casse.
Edit : Je parle de celui là où la casse disparait :

addEventListener('input', () => {
  const search = document.getElementById('search').value
  const regex = new RegExp(search,'gi')
  el.innerHTML = text.replace(regex,`<u>${search}</u>`)
})

Cordialement
Jérôme
Modifié par Jerome87 (01 Feb 2024 - 20:52)