Bonjour à tous,
Je vais essayer de vous expliquer ce que je souhaite faire.
Je voudrais lorsque je sélectionne un mot dans ma page et clique sur un bouton, savoir si ce dernier se trouve ou non entouré de balises HTML, et dans le cas où il le serait supprimer ces balises.
Voici un petit exemple : « <p>La voiture est <strong>rouge</strong>, et le bateau est bleu </p> ». Au niveau de ma page, les balises sont interprétées, je vois donc les choses comme ça : « La voiture est rouge… »
Dans cet exemple, je voudrais en sélectionnant « rouge » :
1/ tester si ce mot est entouré de balises HTML
2/ Si oui, supprimer les balises HTML sans supprimer le contenu « rouge ».
Pour au final arriver à ça : « <p>La voiture est rouge, et le bateau est bleu </p> ».
J’ai essayé de faire ça via la fonction suivante :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 // Bouton CLICK $('input[type=button].btn_transform').click(function(){ var selObj = window.getSelection(); var parent=selObj.anchorNode.parentNode; if (parent.nodeName=='STRONG'){ parent.removeChild(selObj.anchorNode); var theText = document.createTextNode(selObj); parent.appendChild(theText); } });
La détection à savoir si le mot est entouré d’une balise fonctionne mais uniquement lorsque je positionne mon curseur dans le mot. Si je sélectionne le mot entier, il me détecte son parent <p>.
Pour ce qui est de la suppression des balises, j’ai essayé tout un tas chose sans y arriver. Par exemple « removeChild » me supprime bien le contenu de ma balise, mais pas mes balises « strong ».
Auriez vous des idées qui me permettrait de faire cela, parce que je galère vraiment sur ce point et je n’arrive pas à trouver de solution.
Par avance merci de votre aide.
Partager