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


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
Auteur

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>

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