Détection hashtags a l'évènement keyup

Par Whysyb, il y a 9 ans

Javascript

Bonjour à tous,

Je vous expose mon problème, je suis actuellement entrain de développer un système de post et j'aimerais inclure une détection des hashtags.

J'ai donc essayé de passer par les expression régulières :

var hastagsDetect = function(){ var string, regegExpHashtag = new RegExp(/(^|\s)(#[a-z\d-]+)/ig) $('.final-message p').keyup(function(){ string = $(this).html(); var newString = string.replace(/(^|\s)(#[a-z\d-]+)/ig, "$1<span class='hashtag'>$2</span>"); $(this).html(newString) }); }

La détection es fonctionnelle cependant, au moment du replace, le curseur reviens au début de ma div c'est donc un joyeux bazard !

Si vous avez une idée pour palier à ce problème ej suis preneur...

Merci à tous et bonne journée !

3 réponses

Lartak, il y a 9 ans

Bonsoir.
Tu pourrais par exemple commencer par nous montrer le code HTML concerné, car tu dis :

le curseur reviens au début de ma div

Sauf que nous ne savons même pas si la classe final-message correspond à cette div.

Whysyb, il y a 9 ans

Merci pour ta réponse Lartak, c'est pas faux je n'ai pas monté mon coce html, c'est juste une div simple avec l'atribut contenteditable...

<div class="final-message" contenteditable> </div>
Huggy, il y a 9 ans

Si tu veux récupérer la position du "caret" avant de changer le html puis repositionner le caret,
il y a 2 fonctions dans cet article qui pourraient t'intéresser