Ajouter une balise html à un endroit précis dans un text

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:

---

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:

---

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

Citation:

---

.length

---

et

Citation:

---

.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:

---

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

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.. é è ê ë û ü ù î ï ô ö à â ä

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

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..:koi:

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

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.. :-?

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

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

Code:

---

reg = new RegExp()

---

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

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

j'ai utilisé compile() :mrgreen:

Code:

---

1 2 3

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

---

Au choix ...

Code:

---

1 2 3

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

---

Encore merci pour ton aide 😉