Supprimer balises entourant un mot ?

**Sanceray3** · 19/03/2010, 12h10

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 :

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 .

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.

**bigboomshakala** · 19/03/2010, 13h34

Salut,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 19/03/2010, 13h51

un insertBefore du node sur le parent suffirait

**bigboomshakala** · 19/03/2010, 13h58

au temps pour moi, je comprenais qu'il voulait récupérer la chaîne mais sans pêter le DOM

**Sanceray3** · 19/03/2010, 14h10

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.

**SpaceFrog** · 19/03/2010, 14h19

un exemple sasn se soucier de selection:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**defacta** · 19/03/2010, 14h25

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ;-)

**Sanceray3** · 19/03/2010, 14h27

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

Supprimer balises entourant un mot ?

JavaScript

Discussions similaires

Partager

Partager