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