Supprimer balises entourant un mot ?

Version imprimable

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 : « La voiture est rouge, et le bateau est bleu ». 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 : « La voiture est rouge, et le bateau est bleu ».

J’ai essayé de faire ça via la fonction suivante :
Code:

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 .

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.

Salut,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="toto">la <span style="color:red;">voiture <strong>rouge</strong> ne s'accorde pas</span> avec <i>les dessous <b>bleus</b> de ma dulcinée</i></div>
 
<script>
 
function getString(node){
  var ch = "";
 
  if (node.hasChildNodes){
    var child = node.firstChild;
    do{
      if (child.nodeName == "#text"){
        ch += child.data;
      }
      else{
        ch += getString(child);
      }
    }
    while (child = child.nextSibling);
  }
 
  return ch;
}
 
alert(getString(document.getElementById("toto")));
 
</script>

19/03/2010, 13h51
SpaceFrog

un insertBefore du node sur le parent suffirait
19/03/2010, 13h58
bigboomshakala

au temps pour moi, je comprenais qu'il voulait récupérer la chaîne mais sans pêter le DOM :P
19/03/2010, 14h10
Sanceray3

Merci à vous pour vos conseils.

Est ce que l'un d'entre vous pourait me montrer l'application du insertBefore svp, parce que j'ai essayé mais ça me donne rien, je dois pas faire comme il faut.

un exemple sasn se soucier de selection:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
function foo(){
var selObj = document.getElementById('bar').firstChild
        var selparent=selObj.parentNode;
 
         if (selparent.nodeName.toLowerCase()=='strong'){       
					selparent.parentNode.insertBefore(selObj,selparent)
					}
			}
 
</script>
</head>
 
<body>
<p>La voiture est <strong id="bar" >rouge</strong>, et le bateau est bleu </p>
<input type='button' onclick='foo()' value="go" />
</body>
 
</html>

Voila 2 fonctions qui pourront peut-être t'aider, elles me permettent de calculer le nombre de mots d'un bloc contenant des balises HTML, donc ca enlève les balises HTML avant de compter les mots:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
cnt(stripHTML(document.send_page.areaText.value)) ;
 
function stripHTML(oldString) {
  var newString = '';
  var inTag = false;
  for(var i = 0; i < oldString.length; i++) {
    if(oldString.charAt(i) == '<') inTag = true;
      if(oldString.charAt(i) == '>') {
        if(oldString.charAt(i+1)=='<') {
          //dont do anything
	} else {
          inTag = false;
	  i++;
      }
    }
    if(!inTag) newString += oldString.charAt(i);
  }
  return newString;
}
function cnt(text) {
  var text=text + ' ';
  var iwhitespace = /^[^A-Za-z0-9]+/gi; // remove initial whitespace
  var left_trimmedStr = text.replace(iwhitespace, '');
  var na = rExp = /[^A-Za-z0-9ÀÂÇÈÉÊËÎÔÙÛàâçèéêëîôùû]+/gi; // non alphanumeric characters
  var cleanedStr = left_trimmedStr.replace(na, ' ');
  var splitString = cleanedStr.split(' ');
  var word_count = splitString.length -1;
  window.parent.document.getElementById('SPAN_count_words').innerHTML = word_count ;
}

C'est des regexp et moi j'y capte pas grand chose, mais ca t'aidera peut-être ;-)

19/03/2010, 14h27
Sanceray3

Impeccable merci à tous, je vais pouvoir m'en sortir avec vos indications ! ;)