Remplacement d'un élément par son innerHTML

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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 ?

27/02/2017, 15h38
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--

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:

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.

27/02/2017, 16h02
patricktoulon

re

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
27/02/2017, 16h15
patricktoulon

1 pièce(s) jointe(s)

re

loralina
ton model ne fait pas le job pour le replace
Pièce jointe 248941

Testons avec des exemples alors :

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
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 ?

27/02/2017, 16h37
patricktoulon

1 pièce(s) jointe(s)

re

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
Pièce jointe 248951
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?:ptdr:
27/02/2017, 16h51
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 ?

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 blabla
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:

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

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:

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.

27/02/2017, 19h08
patricktoulon

1 pièce(s) jointe(s)

re

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
Pièce jointe 249028
27/02/2017, 20h25
patricktoulon

re

re
il y a qu'une seule chose que je comprends pas
c'est comment ob_2 est incrémenté ou meme instancié
27/02/2017, 23h54
Loralina

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

Code:

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.
28/02/2017, 00h05
patricktoulon

rerent
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:

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 ?
28/02/2017, 18h48
Beginner.

Salut,

Est-ce que l'objectif c'est de supprimer les balises 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é ?

Bonsoir,

Citation:

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:

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:

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:

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:

1 2 3 4 5 6 //ob_=<a><c></c></a> ob_2=ob_.firstChild; //ob_2= ob_2=ob_.firstChild; //ob_2= (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>

01/03/2017, 01h08
patricktoulon

re

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 :plusser:
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
"EXEMPLE de"
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 blablabla blablabla2devient 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

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:

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("DE 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

01/03/2017, 16h00
Loralina
Bonjour,
Je ne vois pas trop ce qui empêcherait ma version de fonctionner complètement.
Si je démarre comme ceci :
Code:

1 2 var balisefont=document.createElement("font"); balisefont.innerHTML="exemple de";
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.

Citation:

et j'ai compris pourquoi le derneir font("DE 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 : "DE" devient "DE" qui devient "DE".

Quelle serait exactement la valeur de "balisefont.innerHTML" juste avant ma boucle et qui donnerait "exemple de" 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.

3 pièce(s) jointe(s)

Bonjour loralina
voila la fonction avec ta methode

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
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:

<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
Pièce jointe 249683

voila les résultat final outerHTML! de la "balisefont" pour ta méthode et la mienne
Pièce jointe 249703

Pièce jointe 249704

Voir 40 message(s) de cette discussion en une page