Discussion :

[patricktoulon]

Bonjours a tous
tout est dans le titre
dans une boucle je remplace les elements par leur innrHTML si ceux ci n'ont pas d'attribut visiblement avec replaceChild il doit y avoir quelque chose qui m’échappe

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var colhtml = balisefont.getElementsByTagName("FONT"); 
 for (var i = 0; i < colhtml.length; i++) {
            if (colhtml[i].innerHTML == "") {
             balisefont.removeChild(colhtml[i]);
            }
               if(!colhtml[i].hasAttributes() && colhtml[i]!=balisefont){
               var noeud=document.createTextNode (colhtml[i].innerHTML);
               //balisefont.replaceChild(noeud,colhtml[i]);//ne fonctionne pas 
               }   
 
 }

quelqu'un sait comment on fait ?

[melka one]

jour

je vois deux problemes le premier c'est que tu supprime une balise fonte et que ensuite tu recupere son contenu alors qu'elle est supprimé l deuxieme probleme c'est qu'en supprimant une balise la valeur colhtml.length est diminié de 1 mais i reste pareille il faudrait diminué i de 1 i--

[Loralina]

Bonjour,
La liste des éléments va se mettre à jour au fur et à mesure, la longueur aussi, il est donc plus simple de parcourir en sens inverse.
Dans ce style :

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
var ob_;
var colhtml=balisefont.getElementsByTagName("FONT");
var i=colhtml.length;
while(--i>=0)
	{
	ob_=colhtml[i];
	if(ob_.innerHTML==="")
		{
		balisefont.removeChild(ob_);
		}
	else if(!ob_.hasAttributes())
		{
		balisefont.replaceChild(document.createTextNode(ob_.innerHTML),ob_);
		}
	}

J'ai vu le message de melka one après coup : oui il a raison.

[patricktoulon]

merci messieurs dames effectivement ça m'avait échappé des la première suppression i n'est plus bon

donc si je sépare la suppression et le replacement j'aurais toujours un soucis avec le replacement des le premier replacement non?

c’était la dernière chose de ma fonction shadow a faire je vais quand mémé pas repartir dans la manipulation du string de l'innerHTML j'avais réussi a faire sauter tout ça
c'est bien dommage

[patricktoulon]

loralina
ton model ne fait pas le job pour le replace

[Loralina]

Testons avec des exemples alors :

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
31
32
33
34
35
<div id="test">
	<font color="red">ligne 1</font>
	<a>lien</a>
	<font color="red"></font>
	<font>ligne 2</font>
	<font color="red">ligne 3</font>
	<font>ligne 4</font>
</div>
<script>
var ob_;
var balisefont=document.getElementById("test");
var colhtml=balisefont.getElementsByTagName("font");
var i=colhtml.length;
while(--i>=0)
	{
	ob_=colhtml[i];
	if(ob_.innerHTML==="")
		{
		balisefont.removeChild(ob_);
		}
	else if(!ob_.hasAttributes())
		{
		balisefont.replaceChild(document.createTextNode(ob_.innerHTML),ob_);
		}
	}
console.log(balisefont.innerHTML);
/*
	<font color="red">ligne 1</font>
	<a>lien</a>
 
	ligne 2
	<font color="red">ligne 3</font>
	ligne 4
*/
</script>

La sortie est-elle conforme à l'objectif ?

[patricktoulon]

lorina je pense avoir compris ce qui se passe

en effet apres avoir repondu j'ai mis un alert a chaque tour de boucle

et la premiere fois que je lance la boucle ca fait rien sauf les vides
je relance une 2d fois et la ca m'en fait un
je le relance une 3 eme fois ca me fait le 2 d
et ainsi de suite par le meme nombre de colhtml.length
demo en image

autrement dis il me faut une sur boucle du même accabit que la while donc un while et un le while a l’intérieur ca fait pas beaucoup ca non?

[Loralina]

Le plus simple serait de poster un exemple avec juste le code utile.
Est-ce que dans l'exemple que je montre, le résultat est celui attendu ?

[patricktoulon]

non pas directement le resultat attendu l'orsque je relance autant de fois qu'il y a de colhtml
et c'est normal que ca ne fonctionne pas

car quand j'ai <font><font><font><font>blabla</font></font></font></font>
forcement le colhtml n'est pas trouvé puisque son parent a éte modifié

du coup j'ai revu ma méthode en string
voila la version complète de la fonction
il faut aussi que je prenne en compte le fait qu'il puisse y en avoir qu'un j'ai donc ajouté un if sur le length 0 et ca match nickel le code a la sortie est nickel

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
  function shadowcolor(coul, MOD) {
    if (selectionne_text()) {
        var selection = selectionne_text();
        var selectedText = selection.extractContents();
        var balisefont = document.createElement("FONT");
        balisefont.appendChild(selectedText);
        var colhtml = balisefont.getElementsByTagName("FONT");
        if (colhtml.length > 0) {
            for (var i = 0; i < colhtml.length; i++) {
                if (colhtml[i].className == "shado") {
                    colhtml[i].style.textShadow = "";
                    colhtml[i].className = "";
                }
            }
        }
        if (colhtml.length > 0) {
            var str = balisefont.innerHTML
            var b = colhtml.length;// on memo le lengt pour la boucle maitre 
            var balisefont = document.createElement("FONT");
            for (var i = 0; i < b; i++) {
                var colhtml = balisefont.getElementsByTagName("FONT");// on remesure le length
                for (var i = 0; i < colhtml.length; i++) {
                    var subfont = colhtml[i]
                    if (subfont.innerHTML === "") {
                        str = str.replace(subfont.outerHTML, "");
                    }
                    if (!subfont.hasAttributes()) {
                        str = str.replace(subfont.outerHTML, subfont.innerHTML);
                    }
                }
                balisefont.innerHTML = str;
            }
        }
        if (MOD == true) {
            balisefont.className = "shado";
            balisefont.style.textShadow = "0px 0px 10px " + coul;
        }
 
        selection.insertNode(balisefont);
        if (balisefont.parentElement.className == "shado" && MOD == false && balisefont.parentElement.tagName != "P") {
            balisefont.className = "shado";
            balisefont.style.textShadow = "none";
        }
        //alert(balisefont.outerHTML);
    } // FIN DE   IF selectionne_text
} //fin de fonction shado

[Loralina]

Oui, je n'avais pas géré les cas de balises imbriquées, il y avait de ce fait un problème de parent.
J'ai fait une correction rapide :

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
<div id="test">
	<font color="red"><font><font color="green">texte 1</font><font color="blue"><font color="black"></font><font>texte 2</font></font></font></font>
</div>
<script>
var ob_,ob_2,ob_3;
var balisefont=document.getElementById("test");
var colhtml=balisefont.getElementsByTagName("font");
var i=colhtml.length;
while(--i>=0)
	{
	ob_=colhtml[i];
	if(ob_.innerHTML==="")
		{
		ob_.parentNode.removeChild(ob_);
		}
	else if(!ob_.hasAttributes())
		{
		ob_3=ob_.parentNode;
		while(ob_2=ob_.firstChild)
			{
			ob_3.insertBefore(ob_2,ob_);
			}
		ob_3.removeChild(ob_);
		}
	}
console.log(balisefont.innerHTML);
//<font color="red"><font color="green">texte 1</font><font color="blue">texte 2</font></font>
</script>

Sur cet exemple, le résultat paraît bon.
A voir si j'ai pensé à tout et si le code est améliorable.

[patricktoulon]

re
waouhh !! j'ai testé en croisant les couleur a outrance pas un défaut bravo!!! j'ai le meme resultat avec ma methode en string mais je supose que c'est moins lourd

et merci pour ton aide

il me reste a pigé l'histoire des ob_X

un grand merci a toi
demo en image

[patricktoulon]

re
il y a qu'une seule chose que je comprends pas
c'est comment ob_2 est incrémenté ou meme instancié

[Loralina]

En fait, déjà l'écriture est raccourcie, on pourrait écrire :

Code :

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

while((ob_2=ob_.firstChild)!==null)

Idéalement je préfère la version longue, mais avec javascript et les problèmes de compatibilité d'un navigateur à l'autre, j'ai pris l'habitude de raccourcir certains tests.
Pour certaines évaluations (à priori pas ici), un navigateur peut donner "undefined" et un autre "null".

Ensuite, le fait d'insérer le noeud ailleurs le retire de là où il était.
C'est un peu comme si on retirait le premier élément d'un tableau.
Quand on refait "ob_2=ob_.firstChild", ce n'est plus le même élément.
Avec "insertBefore", on retire un à un les éléments.

[patricktoulon]

re
oui c'est pas bien clair encore pour moi cette syntaxe

pour le vieux VBiste que je suis
pour tester on donne une valeur aux deux object de comparaison
exemple en BV on ferai quelque chose du genre

Code :

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

1
2
3
do
ob_2=ob_.parent Element
while ob_2 isob_. parentElément.firstchild

en gros on donne une valeur a ob_2 pour le tester

visiblement en javascript c'est while(ob_2=ob_.firstChild)

autrement dis ob_2 change a chaque tour de boucle tout seul
c'est bien ca ?

[Beginner.]

Salut,

Est-ce que l'objectif c'est de supprimer les balises <font> n'ayant aucun attribut ou bien c'est de supprimer la couleur ?

PS : Est-ce que, par la suite, tu envisages de faire une fonction qui supprime le formatage (gras, italique, couleur...) d'un texte sélectionné ?

[Loralina]

Bonsoir,

visiblement en javascript c'est while(ob_2=ob_.firstChild)

autrement dis ob_2 change a chaque tour de boucle tout seul
c'est bien ca ?

Pas tout seul.
Si on écrit juste :

Code :

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

while(ob_2=ob_.firstChild) {}

Ca tournera à l'infini (en supposant bien sûr qu'il y ait au moins un enfant).

Par contre, si dans la boucle on supprime ou déplace le premier enfant de "ob_", alors oui le premier enfant ne sera plus le même.

Code :

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

while(ob_2=ob_.firstChild) {ob_3.insertBefore(ob_2,ob_);}

Ce "insertBefore" va retirer le premier enfant de "ob_" pour le mettre ailleurs.
Suite à cette instruction, le premier enfant n'est plus le même.
Quand on revient ici "ob_2=ob_.firstChild", ce n'est donc plus la même valeur.
Je disais : "Quand on refait "ob_2=ob_.firstChild", ce n'est plus le même élément.", je précise : ce n'est plus le même suite au "insertBefore".

Sinon, ma boucle est pareille que :

Code :

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

1
2
3
4
5
6
ob_2=ob_.firstChild;
while(ob_2) //ou while(ob_2!==null) ou while(ob_2!=null)
	{
	ob_3.insertBefore(ob_2,ob_);
	ob_2=ob_.firstChild;
	}

On peut même considérer la question sans boucle, exemple :

Code :

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

1
2
3
4
5
6
//ob_=<a><b></b><c></c></a>
 
ob_2=ob_.firstChild; //ob_2=<b></b>
ob_2=ob_.firstChild; //ob_2=<b></b> (pas de changement)
ob_3.insertBefore(ob_2,ob_); //ob_=<a><c></c></a> (son premier enfant vient d'être mis ailleurs)
ob_2=ob_.firstChild; //ob_2=<c></c>

[patricktoulon]

bonsoir loralina
merci pour ces explications je n'avais pas considéré le changement forcement

merci

je vais m’entraîner avec un résultat visuel
trop forte
par contre dans l'exemple que j'ai donné au départ
a savoir les trois mot d'une ombre différente ta méthode a ses limite

la phrase:
"EXEMPLE DE TEXTE"
exemple en rouge et bleu
de en vert
texte en jaune

si je sélectionne "exemple de "

en toute fin d’opération on se retrouve avec
"<font>EXEMPLE</FONT> <FONT>de</FONT>"
en effet il y a une corrélation avec le fait que "DE" ne faisait pas parti de le même font au départ et qu'il y a un textnode entre les deux (l'espace)
chose que ma méthode pétarde puisque elle travaille en string et ne tient pas compte de ce fait ni de l'architecture
avec ma méthode <font>blablabla</font> <font>blablabla2</font>devient sans considération d'aucune sorte blablabla blablabla2
un peu a la façon regex
en fait il faudrait au départ distingué chaque enfant direct du font créé et passer chaque font a ton moulin puis enfin passer avec le font créé en tant que parent
cela dit ta méthode me convient tout a fait et elle est plus elégante

[patricktoulon]

re
Bonjour loralina
je te laisse quand même la mienne qui fait sauter quand même le dernier font
et au final on ne tourne que 2 fois sur le length
l'avantage de travailler en string sur une chaine string
tu n'a qu'a mettre des console log partout a chaque étape sur "str" et tu verra

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
31
32
33
function shadowcolor(coul, MOD) {    if (selectionne_text()) {
        var selection = selectionne_text();
        var selectedText = selection.extractContents();
        var balisefont = document.createElement("FONT");
        balisefont.appendChild(selectedText);
        var colhtml = balisefont.getElementsByTagName("FONT");
        if (colhtml.length > 0) {
            for (var i = 0; i < colhtml.length; i++) {
                if (colhtml[i].className == "shado") {
                    colhtml[i].style.textShadow = "";
                    colhtml[i].className = "";
                }
            }
        }
        var str = balisefont.innerHTML;
        for (var i = 0; i < colhtml.length; i++) {
            if (colhtml[i].outerHTML.substring(0, 6) == "<font>") {
                str = str.replace(colhtml[i].outerHTML, colhtml[i].innerHTML);
            }
        }
        balisefont.innerHTML = str;
        if (MOD == true) {
            balisefont.className = "shado";
            balisefont.style.textShadow = "0px 0px 10px " + coul;
        }
        selection.insertNode(balisefont);
        //si on est dans une font parent qui a une couleur et que la selection ne correspondrait pas au texte entier de cette font alors c'est shadow none!!sinon rien  
        if (balisefont.parentElement.className == "shado" && MOD == false && balisefont.parentElement.tagName != "P") {
            balisefont.className = "shado";
            balisefont.style.textShadow = "none";
        }
    }
}

et j'ai compris pourquoi le derneir font("<font>DE</font> n'etait pas replacé avec ta version
en fait quand on en arrive la le parent c'est la font créée donc impossible de faire un insertbefore because le code html s’arrête lail n'y a pas de parent a balisefont pas encore du moins
peut être que l'insertion devrait se faire avant comme je le fait pour maîtriser le shado none a la fin

[Loralina]

Bonjour,
Je ne vois pas trop ce qui empêcherait ma version de fonctionner complètement.
Si je démarre comme ceci :

Code :

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

1
2
var balisefont=document.createElement("font");
balisefont.innerHTML="<font>exemple</font> <font>de</font>";

Après la boucle, j'ai bien juste "exemple de" comme résultat, il n'y a plus de balise.
J'ai testé quelques variantes avec des couleurs, le traitement semble se faire jusqu'au bout.

et j'ai compris pourquoi le derneir font("<font>DE</font> n'etait pas replacé avec ta version
en fait quand on en arrive la le parent c'est la font créée donc impossible de faire un insertbefore because le code html s’arrête lail n'y a pas de parent a balisefont pas encore du moins

Le "insertBefore" est exécuté par "balisefont" au niveau de ses enfants : "<font>DE</font>" devient "DE<font></font>" qui devient "DE".

Quelle serait exactement la valeur de "balisefont.innerHTML" juste avant ma boucle et qui donnerait "<font>exemple</font> <font>de</font>" après la boucle ?
Eventuellement, quel est le code de la fonction "shadowcolor" avec ma boucle ?
Mais c'est surtout l'exemple dont j'ai besoin.

[patricktoulon]

Bonjour loralina
voila la fonction avec ta methode

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
function shadowcolor(coul, MOD) {    if (selectionne_text()) {
 
 
        var selection = selectionne_text();
 
 
        var selectedText = selection.extractContents();
 
 
        var balisefont = document.createElement("FONT");
        balisefont.appendChild(selectedText);
 
 
        var colhtml = balisefont.getElementsByTagName("FONT");
        if (colhtml.length > 0) {
            for (var i = 0; i < colhtml.length; i++) {
                if (colhtml[i].className == "shado") {
                    colhtml[i].style.textShadow = "";
                    colhtml[i].className = "";
                }
            }
        }
        var ob_, ob_2, ob_3;
        var colhtml = balisefont.getElementsByTagName("font");
        var i = colhtml.length;
        while (--i >= 0) {
            ob_ = colhtml[i];
            if (ob_.innerHTML === "") {
                ob_.parentNode.removeChild(ob_);
            } else if (!ob_.hasAttributes()) {
                ob_3 = ob_.parentNode;
                while (ob_2 = ob_.firstChild) {
                    ob_3.insertBefore(ob_2, ob_);
                }
                ob_3.removeChild(ob_);
            }
        }
        if (MOD == true) {
            balisefont.className = "shado";
            balisefont.style.textShadow = "0px 0px 10px " + coul;
        }
        selection.insertNode(balisefont);
        if (balisefont.parentElement.className == "shado" && MOD == false && balisefont.parentElement.tagName != "P") {
            balisefont.className = "shado";
            balisefont.style.textShadow = "none";
        }
    } // FIN DE   IF selectionne_text
} //fin de fonction shado

et voila une exemple de code a traiter

Code :

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

<font size="7"><font class="shado" style="text-shadow: 0px 0px 10px #ff0000;">EXE<font color="#00ffff">M</font>P<font color="#ff8080">L</font>E</font> <font class="shado" style="text-shadow: 0px 0px 10px #00ffff;">DE</font> <font class="shado" style="text-shadow: 0px 0px 10px #00ff00;">TEXTE</font></font>

demo en image


voila les résultat final outerHTML! de la "balisefont" pour ta méthode et la mienne