Discussion :

[djo007]

Bonjour à tous,

je bloque sur un petit problème...

j'ai une liste de <li> qui peut varier de 1 à 10 <li> sous cette forme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<li class="foo" onClick="fill('depart','Garnerans, 01140');">Garnerans, 01140</li>
<li class="foo" onClick="fill('depart','Genouilleux, 01090');">Genouilleux, 01090</li>
<li class="foo" onClick="fill('depart','Géovreisset, 01100');">Géovreisset, 01100</li>
<li class="foo" onClick="fill('depart','Germagnat, 01250');">Germagnat, 01250</li>

ce que je veux faire c'est ajouter un <span> dans chacun des <li> entre le 1er caractère et le 3ème caractère
(Attention ca peut très bien être aussi entre le 1er et le 5ème caractères)

exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<li class="foo" onClick="fill('depart','Garnerans, 01140');"><span>Gar</span>nerans, 01140</li>
<li class="foo" onClick="fill('depart','Genouilleux, 01090');"><span>Gen</span>ouilleux, 01090</li>
<li class="foo" onClick="fill('depart','Géovreisset, 01100');"><span>Géo</span>vreisset, 01100</li>
<li class="foo" onClick="fill('depart','Germagnat, 01250');"><span>Ger</span>magnat, 01250</li>

donc vous l'avez deviné je souhaite faire ca avec JS j'imagine que je vais devoir utiliser

.length

et

.split()

mais honnêtement j'ai aucune idée de comment mis prendre...

Je pense qu'il y a encore plus simple..
je m'explique:
le nombre de caractère dont je détermine c'est enfaite une valeur entrée dans un champs Input
donc si je rentre dans le Input "Ge" donc ce qui me fait 2 caractère je vais me retrouver avec 3 ligne <li>, vu que j'ai dans m'a liste au dessus 3 résultat qui commence par Ge
(le champ Input est enfait un formulaire de recherche le resultat étant sous la forme de <li> )

Donc je me dit peut être qu'il est possible de rechercher directement dans les balise <li> les nom qui comment par Ge et leur mettre la balise <span> autour...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<li class="foo" onClick="fill('depart','Genouilleux, 01090');"><span>Ge</span>nouilleux, 01090</li>
<li class="foo" onClick="fill('depart','Géovreisset, 01100');"><span>Gé</span>ovreisset, 01100</li>
<li class="foo" onClick="fill('depart','Germagnat, 01250');"><span>Ge</span>rmagnat, 01250</li>

Merci d'avance

[djo007]

Bon je pense être sur le bon chemin, j'ai commencé un bout de code qui marche pas trop mal.
j'ai mis ca sur Jsfiddle pour mieux se comprendre

https://jsfiddle.net/0hvwdm8x/3/

Maintenant le souci que j'ai c'est de gérer les accents.. é è ê ë û ü ù î ï ô ö à â ä

[SpaceFrog]

plus simplement...
https://jsfiddle.net/0hvwdm8x/4/

[djo007]

Merci

Peux tu m'expliquer la partie /(.{2})/

Parce-que je comprend pas trop comment je pourrais mettre ma variable qui contient directement la valeur à la place du 2..

[SpaceFrog]

Ce code est basé sur les Expressions Régulières.

Je fais un remplacement des deux premiers caractères par ces deux caractères entourés de la balise html ..

Oui on peut variabiliser

[djo007]

Oui j'ai bien compris ce que ça fait.
Mais je n'arrive pas à comprendre la /(.{2})/ j'ai cherché hier soir à comprendre.. En lisant des docs sur regex()
Jusqu'à maintenant les fois où j'ai utilisé regex c'était des bout de code récupéré. Genre pour le contrôle d'adresse e-mail etc..
J'ai essayé de trouver la solution pour variabiliser ce bout de code, sans réussite.. :-?

[SpaceFrog]

. => n'importe quel caractère
{2} => deux fois

pour variabiliser la reg il faut passer par l'autre syntaxe de js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

reg = new RegExp()

[djo007]

Super pour l'explication j'ai compris :-) merci
Je regarde ça ce soir pour new RegExp()
Je te tiens informé ;-) encore merci

[djo007]

alors j'ai pas utilisé new RegExp() je suis allé voir la documentations sur les expressions donc je comprends mieux

j'ai utilisé compile()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var reg=/ /;
$(this).html( $(this).html().replace(reg.compile("(.{"+inputString.length+"})"),"<span>$1</span>") );

[SpaceFrog]

Au choix ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
reg= new RegExp("(.{"+inputString.length+"})");
$(this).html( $(this).html().replace(reg,"<span>$1</span>") );

[djo007]

Encore merci pour ton aide 😉