Remplacement d'un élément par son innerHTML

**patricktoulon** · 18/03/2017, 19h37

re

si il fonctionne mais c'est le code html dans le DIV QUI EST PAS BON

j'ai un peu analysé les codes html obtenus en triturant les couleurs a outrance
et en fait le raisonnement est très simple
a la fin on peut se retrouver avec :

des succcessif (meme tag meme attribut) pour les span et font
des successif (meme tag (strong et em)

il y a un raisonnement simple a mettre en application

une seule boucle de la fin jusqu'au début (du lastchild au p.firstchild)

si élément x.sans son innertext=l’élément previus sans son innertext alors élément previus recois en plus le innerhtml de l'element x;vidage de element x

et ainsi de suite jusqu'a la fin

voila en un coup on a rassembler les successif tout tag et tout attribut confondus

une dernier boucle maintenant de la fin au début encore puis suppression des élément que l'on a vidés
qu'en pense tu ?

en fait en prenant l'element outerhtml sans son innertext on fait tout les tests en un (tag,style,autre attribut)

un petit coup de noSmoking serait le bien venu

**patricktoulon** · 18/03/2017, 19h40

Envoyé par Beginner.

Ah mais dans le "bon" y a pas grand chose... ???

tu veux que je te redonne le code complet ???

**Beginner.** · 18/03/2017, 20h22

Envoyé par patricktoulon

tu veux que je te redonne le code complet ???

Ben dans le message 118 il n'y a que quelques balises html pas de js...

**patricktoulon** · 18/03/2017, 20h26

ben oui c'est le code metoyé et indenté que je t'ai donné plus haut qu'il faut chager le html
bon c'est pas grave

tiens le voila entier a nouveau avec le bon code

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html>
 
 
 
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <style type="text/css">
<!-- .editor {
    font-family: tahoma
}
 
 
.actionbar {
    background-color: #c0c0c0;
    border: 1px solid black
}
 
 
.comment {
    border: 2px dotted red
}
 
 
-->
    </style>
    <script>
function backcol(coul, MOD) {
    var sel = window.getSelection();
    var parent = sel.getRangeAt(0).commonAncestorContainer;
    if (parent == "[object Text]") {
        parent = parent.parentNode;
    }
 
 
    var mySelectionhtml = sel.getRangeAt(0).extractContents();
    var oSpan = document.createElement("SPAN");
    oSpan.appendChild(mySelectionhtml);
    var str = oSpan.innerHTML;
    var sp = oSpan.getElementsByTagName("SPAN");
    for (var i = 0; i < sp.length; i++) {
        str = str.replace(sp[i].outerHTML, sp[i].innerHTML);
    }
 
 
    oSpan.innerHTML = str;
 
    var range = sel.getRangeAt(0);
    range.deleteContents();
    range.insertNode(oSpan);
    sel.removeAllRanges(); //on peut carrément supprimer le range 
    sel.addRange(range); // et y ajouter notre range tout propre
 
 
     if (MOD != null) {
        oSpan.style.textShadow = "0px 0px 10px " + coul;
    }
    if (MOD == null) {
        oSpan.style.textShadow = "none";
    }
    //////////////gestion du couleur /  none /ou innerHTML//////////////
    var no = false
    var noC=false
    var par = oSpan
    do {
        par = par.parentElement;
       if (par.tagName=="SPAN" && par.style.textShadow== "0px 0px 10px " + coul){  
       noC=true;
       }
        if (par.tagName=="SPAN" && par.style.textShadow!="none"){  
        no = true;
        }
    } while (par.tagName != "P");
    if (no == false && MOD == null) {
        oSpan.outerHTML = oSpan.innerHTML;
    }
     if (noC ==true && MOD != null) {
        oSpan.outerHTML = oSpan.innerHTML;
    }
       ///////////////////////////////////////////////////////////
 
 
 
//////////////////////////////////merge same/////////////////////
// var sp = par.getElementsByTagName("*");
//alert(sp.length);   
//for (var i = sp.length-1; i >=1; i--) {
//ICI ON DOIT FAIRE LES MERGES
 //alert(sp[i].outerText);
//var f=sp[i].outerHTML.replace(sp[i].innerText,"");
//var fg=sp[i].previousSibling.outerHTML.replace(sp[i].previousSibling.innerText,"");
//var f=sp[i].outerHTML;
//var fg=sp[i].previousSibling.outerHTML;
//alert(f+"----------------------------------------------"+fg);
//}
    //////////////////////////////////////////////////////////////////////
 
 
 
    ///////////////apres quelques changement on a des balises vides on nettoie ///////// 
    var sp = par.getElementsByTagName("*");
    for (var i = 0; i < sp.length; i++) {
        if (sp[i].innerText == "") {
            sp[i].parentElement.removeChild(sp[i]);
        }
    }
//////////////////////////////////////////////////////////////////// 
document.getElementById('res').value = document.getElementById('comment').outerHTML;
}
 
 
 
 
 
 
    </script>
</head>
 
 
 
 
<body>
    <div id="comment" class="comment" contenteditable>
 
 
 
 
        <p>
            <font size="5">du texte <font style="background-color: yellow;">tout</font> seul<font style="background-color: rgb(0, 255, 0);"> enfant</font> direct du div</font>
        </p>
 
 
        <p align="">
            <font size="5">teste <span style="text-shadow: 0px 0px 10px blue;"> de</span> <span style="text-shadow: 0px 0px 10px red;">texte</span><span style="text-shadow: 0px 0px 10px green;">shad</span><span style="text-shadow: 0px 0px 10px red;">ow</span> pour testes</font>
        </p>
 
 
        <p>
            <font size="7"> E<font color="#ff0000">XE</font><strong><em>MP</em></strong>LE DE TEXTE</font </p>
 
 
 
 
    </div>
 
 
 
 
    <input type="button" value="backblue" onclick="backcol('blue',true)" />
    <input type="button" value="backgreen" onclick="backcol('green',true)" />
    <input type="button" value="backRED" onclick="backcol('red',true)" />
    <input type="button" value="backmagenta" onclick="backcol('magenta',true)" />
    <input type="button" value="NONE" onclick="backcol(false,null)" />
    </br>
    <textarea id="res" rows="15" cols="100">
</textarea>
</body>

**Beginner.** · 18/03/2017, 20h38

Ok voyons ça alors...

**patricktoulon** · 18/03/2017, 21h18

alors?????????
t'en dis quoi???

**Beginner.** · 18/03/2017, 21h37

J'ai fait quelques testes et ça marche plutôt bien mais on se retrouve parfois avec plusieurs balises shadow imbriquées...

**patricktoulon** · 18/03/2017, 21h47

oui bien évidement on peut pas tout séparer
en tout cas les imbriqué on soit une couleur soit "none"
quand elles ne sont pas imbriquées et je clique sur none on a le remplacement innerhtml qui se met en route
quand tu sélectionne a l’intérieur d un shadow et que tu choisi la meme couleur l’opération s'auto annule
sélection moitié moitié c'est le parent de gauche qui sera le nouveau parent pour la couleur
et enfin selection moitiémoitié puis none devient carrément textnode du P
bref elle marche nikel
juste ces doublons successifs a régler

**Beginner.** · 18/03/2017, 21h49

Ce problème est dû je pense au fait que jusqu'à maintenant on ne fait pas le teste dont j'ai parlé plusieurs fois :

Envoyé par Beginner.

*************************

Après si on fait ça on se retrouvera je pense avec un autre problème... Ci-dessus je disais : "...sur tout ou une partie du texte..." alors "sur une partie" je pense qu'il n'y a pas de problème mais dans le cas où on applique plusieurs fois un shadow (de sorte que la couleur de deux shadow consécutifs soient différentes) sur le même texte on va à chaque fois insérer un shadow qui ne sera plus supprimé... On peut alors se retrouver avec plein de shadow imbriqués sur le même texte (il pourrait même y avoir plusieurs shadow de la même couleur mais ils ne seront pas consécutifs...).

Il faudrait donc ajouter un test : si le texte sélectionné a déjà un shadow appliqué uniquement à lui (uniquement ---> c'est-à-dire ce shadow ne doit pas être appliqué a un éventuel texte à gauche et/ou à droite du texte sélectionné, je pense cependant qu'il faudrait ignorer les espaces) alors dans ce cas :

- Si le shadow déjà appliqué est identique à celui qu'on veut appliquer alors on ne fait rien...
- Si le shadow déjà appliqué est différent à celui qu'on veut appliquer alors soit on change la couleur du shadow déjà appliqué pour mettre à la place la couleur du shadow qu'on veut appliquer. Soit on supprime le shadow déjà appliqué et on met à la place le nouveau shadow... Je ne sais pas lequel est le meilleur...

Voilà je ne sais pas si je suis clair... Ce n'est pas évident à expliquer...

Envoyé par Beginner.

Ah oui j'oubliais... Pour tenir compte de certains cas, il vaudrait mieux dans les deux points ci-dessus supprimer tous les éventuels shadow internes à la sélection...

Et encore ça c'est si on part de ce qu'à fait NoSmoking sinon dans il faudra rajouter un autre cas ...

**patricktoulon** · 18/03/2017, 21h55

non c'est pas possible 2 shado de la même couleur imbriqué avec ma méthode no et noC justement
regarde bien cette partie du code

on ne peut pas avoir "beguinner" c'est pas possible ca s'auto annule avec noC

**Beginner.** · 18/03/2017, 21h58

Ok c'est bien si tu as fait ça mais il faut le test dont j'ai parlé...

Regarde vérifie toi-même :
1- Sélectionne "du texte"
2- Met lui un shadow
3- désélectionne le texte
4- re-sélectionne "du texte" et remet lui un shadow

Eh bien tu te retrouves avec deux shadow imbriqués et à chaque fois que tu répètes la séquence 3-4 tu ajoute une balises shadow.

**patricktoulon** · 18/03/2017, 21h59

ok je vais tester

**Beginner.** · 18/03/2017, 22h02

Envoyé par patricktoulon

non c'est pas possible 2 shado de la même couleur imbriqué avec ma méthode no et noC justement
regarde bien cette partie du code

on ne peut pas avoir "beguinner" c'est pas possible ca s'auto annule avec noC

Si c'est possible avec la procédure que j'ai indiquée, vérifie...

Par contre c'est vrai que ça marche bien si on ne désélectionne pas le texte...

**patricktoulon** · 18/03/2017, 22h11

et oui mais tu te leure ca n'est pas ce que tu crois regarde bien attentivement la demo tu va comprendre
Nom : demo2.gif
Affichages : 156
Taille : 917,0 Ko

**Beginner.** · 18/03/2017, 22h33

Alors cela vient peut-être du fait j'utilise Chrome... Peux-tu tester avec Chrome pour voir...?

**patricktoulon** · 18/03/2017, 22h36

exact!!!! c'est bien chrome qui fait le con

**Beginner.** · 18/03/2017, 22h38

Eh oui je confirme, je viens de tester avec FF et c'est Ok !!!

**patricktoulon** · 18/03/2017, 22h46

on va y arriver on est pas loin
je vais travailler sur les successifs maintenant et aussi sur la suppression des espace dans le ospan directement
j'ai deja mon idée sur la question

**Beginner.** · 18/03/2017, 22h51

Envoyé par patricktoulon

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html>
 
 
 
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <style type="text/css">
<!-- .editor {
    font-family: tahoma
}
 
 
.actionbar {
    background-color: #c0c0c0;
    border: 1px solid black
}
 
 
.comment {
    border: 2px dotted red
}
 
 
-->
    </style>
    <script>
function backcol(coul, MOD) {
    var sel = window.getSelection();
    var parent = sel.getRangeAt(0).commonAncestorContainer;
    if (parent == "[object Text]") {
        parent = parent.parentNode;
    }
 
 
    var mySelectionhtml = sel.getRangeAt(0).extractContents();
    var oSpan = document.createElement("SPAN");
    oSpan.appendChild(mySelectionhtml);
    var str = oSpan.innerHTML;
    var sp = oSpan.getElementsByTagName("SPAN");
    for (var i = 0; i < sp.length; i++) {
        str = str.replace(sp[i].outerHTML, sp[i].innerHTML);
    }
 
 
    oSpan.innerHTML = str;
 
    var range = sel.getRangeAt(0);
    range.deleteContents();
    range.insertNode(oSpan);
    sel.removeAllRanges(); //on peut carrément supprimer le range 
    sel.addRange(range); // et y ajouter notre range tout propre
 
 
     if (MOD != null) {
        oSpan.style.textShadow = "0px 0px 10px " + coul;
    }
    if (MOD == null) {
        oSpan.style.textShadow = "none";
    }
    //////////////gestion du couleur /  none /ou innerHTML//////////////
    var no = false
    var noC=false
    var par = oSpan
    do {
        par = par.parentElement;
       if (par.tagName=="SPAN" && par.style.textShadow== "0px 0px 10px " + coul){  
       noC=true;
       }
        if (par.tagName=="SPAN" && par.style.textShadow!="none"){  
        no = true;
        }
    } while (par.tagName != "P");
    if (no == false && MOD == null) {
        oSpan.outerHTML = oSpan.innerHTML;
    }
     if (noC ==true && MOD != null) {
        oSpan.outerHTML = oSpan.innerHTML;
    }
       ///////////////////////////////////////////////////////////
 
 
 
//////////////////////////////////merge same/////////////////////
// var sp = par.getElementsByTagName("*");
//alert(sp.length);   
//for (var i = sp.length-1; i >=1; i--) {
//ICI ON DOIT FAIRE LES MERGES
 //alert(sp[i].outerText);
//var f=sp[i].outerHTML.replace(sp[i].innerText,"");
//var fg=sp[i].previousSibling.outerHTML.replace(sp[i].previousSibling.innerText,"");
//var f=sp[i].outerHTML;
//var fg=sp[i].previousSibling.outerHTML;
//alert(f+"----------------------------------------------"+fg);
//}
    //////////////////////////////////////////////////////////////////////
 
 
 
    ///////////////apres quelques changement on a des balises vides on nettoie ///////// 
    var sp = par.getElementsByTagName("*");
    for (var i = 0; i < sp.length; i++) {
        if (sp[i].innerText == "") {
            sp[i].parentElement.removeChild(sp[i]);
        }
    }
//////////////////////////////////////////////////////////////////// 
document.getElementById('res').value = document.getElementById('comment').outerHTML;
}
 
 
 
 
 
 
    </script>
</head>
 
 
 
 
<body>
    <div id="comment" class="comment" contenteditable>
 
 
 
 
        <p>
            <font size="5">du texte <font style="background-color: yellow;">tout</font> seul<font style="background-color: rgb(0, 255, 0);"> enfant</font> direct du div</font>
        </p>
 
 
        <p align="">
            <font size="5">teste <span style="text-shadow: 0px 0px 10px blue;"> de</span> <span style="text-shadow: 0px 0px 10px red;">texte</span><span style="text-shadow: 0px 0px 10px green;">shad</span><span style="text-shadow: 0px 0px 10px red;">ow</span> pour testes</font>
        </p>
 
 
        <p>
            <font size="7"> E<font color="#ff0000">XE</font><strong><em>MP</em></strong>LE DE TEXTE</font </p>
 
 
 
 
    </div>
 
 
 
 
    <input type="button" value="backblue" onclick="backcol('blue',true)" />
    <input type="button" value="backgreen" onclick="backcol('green',true)" />
    <input type="button" value="backRED" onclick="backcol('red',true)" />
    <input type="button" value="backmagenta" onclick="backcol('magenta',true)" />
    <input type="button" value="NONE" onclick="backcol(false,null)" />
    </br>
    <textarea id="res" rows="15" cols="100">
</textarea>
</body>

Tu pourrais remplacer les lignes 28-51 par :

Code javasript :

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
var sel = window.getSelection();
            var oRange = sel.getRangeAt(0);
 
 
            var parent = oRange.commonAncestorContainer;
            if (parent == "[object Text]") {
                parent = parent.parentNode;
            }
 
 
            var mySelectionhtml = oRange.extractContents();
            var oSpan = document.createElement("SPAN");
            oSpan.appendChild(mySelectionhtml);
            var str = oSpan.innerHTML;
            var sp = oSpan.getElementsByTagName("SPAN");
            for (var i = 0; i < sp.length; i++) {
                str = str.replace(sp[i].outerHTML, sp[i].innerHTML);
            }
            oSpan.innerHTML = str;
 
 
            oRange.insertNode(oSpan);
            sel.addRange(oRange); // pas obligatoire c'est si on veut que le texte reste sélectionné après l'application du shadow...

**patricktoulon** · 18/03/2017, 23h03

oui orange a la place l'expression entiere boff ca fait partie des corrections d’Écriture a la fin ca
je me lance dans la recherche de trouvaille pour ces pu..!!!... d'espaces

Remplacement d'un élément par son innerHTML

JavaScript

Discussions similaires

Partager

Partager