IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Remplacement d'un élément par son innerHTML


Sujet :

JavaScript

  1. #21
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 379
    Points : 12 075
    Points
    12 075
    Billets dans le blog
    8
    Par défaut re
    mais j'ai compris pourquoi
    je pense que c'est l'auto completion

    quand le texte tombe sur deux balise croisé et que tu fait ton insert dans la balise innerHTML une balise est forcement pas fermée
    donc l'autocompletion la rajoute et comme a la fin il reste plus que ca forcement tu peut tourner virer 14 heures il la remettra toujours
    tandis que ma methode boucle sur les font de l'innerHTML mais fait le replace dans la variable str et donc il n'y a pas d'autocompletion

    j'ai fait le test
    j'ai mis toute la boucle primaire dans une boucle bouclant 3 fois suffisant pour voir le phénomène
    arriver donc a ce "<font>exemple</font> <font>de</font>" ton replace fonctionne et me donne bon dans un alert

    mais la ligne suivant un autre alert me le redonne et cela les 3 fois d'affilé insertbefore l'enlève le innerHTML le remets
    rien a faire

    comme je le soupconne il n'y a pas 2 balise a la fin mais 3 1 font,1 textnode(lespace),la 2d font
    et comme ce textnode est finalement vide on ne vois pas schématiquement le phénomène mais c'est bien ca il rajoute la balise parce que il ne peut pas croiser avec une autre mais si la balise est vide c'est quand même un fragment qu'il prends en compte
    a la fin c'est comme si tu lui demandais de faire

    <font> exemple</font> frag<font>de</font> mentdonc il décroise et te remet font1 espace font2 tu peut tourner virer j'ai fait l’expérience a chaque fois il le remet il faudrait mettre des if sur cette condition mais ca deviendrait très complexe en tout cas pour moi

    au mieux on arrive avec ta methode a
    <font>exemple</font>espace de
    après bien évidement il ne peut plus rien replacer car pour un replace il faut qu'il y est au moins deux font
    conclusion ta methode fonctionne a hauteur des children direct de balisefont au delà children0 children1 etc... ne peuvent plus être déplace sinon ob_3 qui est le parent et qui devrait etre supprimé en fin de while forcement comme c'est le balisefont walouh walouh !!!!
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  2. #22
    Membre éclairé
    Femme Profil pro
    Autre
    Inscrit en
    Janvier 2017
    Messages
    335
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Janvier 2017
    Messages : 335
    Points : 715
    Points
    715
    Par défaut
    Je n'ai pas encore regardé le dernier message.
    Je réponds déjà ceci :
    J'ai regardé très rapidement :
    Le problème serait au niveau des attributs valant "" qui peuvent continuer à exister selon le navigateur, ce qui joue sur le test "hasAttributes".
    Sur Internet Explorer, si "class" ou "style" valent vide, le "innerHTML" ne les affiche pas.
    Sur Firefox, c'est affiché.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="test" class="" style=""></div>
    <script>
    var ob_=document.getElementById("test");
    console.log(ob_.outerHTML+" class : "+ob_.hasAttribute("class")+" style : "+ob_.hasAttribute("style"));
    //Internet Eplorer : <div id="test"></div> class : true style : false
    //Firefox : <div id="test" class="" style=""></div> class : true style : true
    </script>
    Ici :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    colhtml[i].style.textShadow = "";
    colhtml[i].className = "";
    Plutôt :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    colhtml[i].removeAttribute("style"); //en supposant que "textShadow" est la seule propriété
    colhtml[i].removeAttribute("class");
    Ainsi le test sur "hasAttributes" passe et le traitement semble fait jusqu'au bout, mais il faudra bien vérifier.

  3. #23
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 379
    Points : 12 075
    Points
    12 075
    Billets dans le blog
    8
    Par défaut re
    re
    ok mais perso je traville en hta ou html ou activX utilisant la librairie IE ou IEold
    donc c'est pas un soucis pour moi
    parcontre ton
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    colhtml[i].removeAttribute("style");
    ben non ca remet tout en question justement car il peut y avoir un style="backcolor....;" que je garde bien évidement
    c'est pour cela que j’enlève juste et précisément le textshadow
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  4. #24
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 379
    Points : 12 075
    Points
    12 075
    Billets dans le blog
    8
    Par défaut re
    re
    fait le teste simple avec 2 ou 3 fonts simple séparés par un espace avec ton while2 tu vera je viens de le faire et c'est bien ca
    l'espace est un fragment et considérer comme un enfant mais pour le replace ayant aucun identifiant ca plante ton system de font a font
    pour palier a ce probleme il faudrais faire un previus sibling .insertfefore fragment pour tout les espace ainsi pendant le transfert de font a font ils serait déjà dans les fonts
    je vois que ca
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  5. #25
    Membre éclairé
    Femme Profil pro
    Autre
    Inscrit en
    Janvier 2017
    Messages
    335
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Janvier 2017
    Messages : 335
    Points : 715
    Points
    715
    Par défaut
    Si je prends le code avec ma version, l'exemple donné et que je fais la modification pour supprimer réellement les attributs en ajoutant un test pour ne pas supprimer les "style" dont il reste encore des propriétés, j'obtiens ceci :
    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
    <div id="test"><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></div>
    <script>
    function shadowcolor(coul, MOD) {    if (true) {
    	var ob_=document.getElementById("test");
    	var selection=document.createRange();
    	selection.selectNodeContents(ob_);
    	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 = "";
    				if(colhtml[i].style.length===0) //ou colhtml[i].style.cssText==="" (il faudra vérifier si c'est bien la bonne méthode)
    					{
    					colhtml[i].removeAttribute("style");
    					}
    				colhtml[i].removeAttribute("class");
    				}
    			}
    		}
    	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_);
    		}
    	}
     
    console.log(balisefont.innerHTML);
    //<font size="7">EXE<font color="#00ffff">M</font>P<font color="#ff8080">L</font>E DE TEXTE</font>
     
    	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
    shadowcolor("red", true);
    </script>
    J'ai adapté le début de la fonction pour tester.

    Le résultat est bien celui souhaité, il me semble, non ?

    l'espace est un fragment et considérer comme un enfant mais pour le replace ayant aucun identifiant ca plante ton system de font a font
    Je ne sais pas, je n'ai pas remarqué ce genre de choses.
    Je n'ai pas assez de temps libre pour tester trop à fond.
    Il faut me donner des exemples que je peux tester directement.
    En tout cas, il me semble que dans le code ci-dessus, tout se passe bien.

    ok mais perso je traville en hta ou html ou activX utilisant la librairie IE ou IEold
    donc c'est pas un soucis pour moi
    Justement, c'est sur Internet Explorer que le souci est :
    Le "innerHTML" ne contient pas les attributs vides or, le "hasAttributes" dit qu'il y a encore des attributs, d'où le fait que le noeud "<font>de</font>" n'était pas traité si sa vraie valeur est en réalité "<font class="">de</font>". D'où la correction que je propose et qui paraît fonctionner.

  6. #26
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 379
    Points : 12 075
    Points
    12 075
    Billets dans le blog
    8
    Par défaut re
    je vais tester ca
    moi j'ai tester ceci et on vois gros comme une maison la méprise du DOM

    je selectionne toujour pareil "exemple de"
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function shadowcolor(coul, MOD) {
    var texte=""
    if (selectionne_text()) {
            var selection = selectionne_text();
            var selectedText = selection.extractContents();
            var balisefont = document.createElement("FONT");
            balisefont.appendChild(selectedText);
    var elem= balisefont.getElementsByTagName("*")
    for(var i=0;i<elem.length;i++){
    texte=texte +"   new element typenode= "+ elem[i].nodeType +"  --valeur   :  " +elem[i].innerText;}
    alert(texte);
    }
    }
    j'ai comme résultat que des nodetype 1 alors que je devrait en avoir qui est a 3
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  7. #27
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 379
    Points : 12 075
    Points
    12 075
    Billets dans le blog
    8
    Par défaut en effet c'est exact !!
    re
    bon ben selon ton raisonnement je n'enleve pas l'attribut style mais je le teste en meme temps que hasattributes() et ca match

    c'est assez etonnant quand meme que l'on voit pas le( style="") et que le dom lui le vois

    bon ben ca marche comme ca
    cela me permet de garder les backcolor
    ( voir ligne 30)

    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
    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_.getAttribute("style") == "") {
                    ob_3 = ob_.parentNode;
                    while (ob_2 = ob_.firstChild) {
                        ob_3.insertBefore(ob_2, ob_);
                    }
                    ob_3.removeChild(ob_);
                }
            }
            alert(balisefont.innerHTML);
            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
        alert("avec ta methode au final j'ai ceci  pour son ouerHTML!!!!! :  " + balisefont.outerHTML);
    } //fin de fonction shado
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  8. #28
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 379
    Points : 12 075
    Points
    12 075
    Billets dans le blog
    8
    Par défaut re
    et M!!!!... pas a tout les coups
    bon ben je remove l'attribut en amont si il n'y a pas de background color
    puisque apres tout le truc est simple
    soit il y a pas d'atribut on vire
    soit il y a attribut on garde
    les attributs sont
    face,size,color pour les attr html
    apres il y a l'attribut style
    dedans il peut y avoir textshadow et/ou background-color et c'est tout
    donc a partir du moment ou je vire le texte shadow (textShadow="") et que le getattribute ("style")me donne"" il n'y a donc pas de background alors on peut virer l'attribut "style"
    et voila c'est terminé bouclé yen a marre on passe au problème suivant

    voila la version avec ta methode qui marche a tous les coups
    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
    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].removeAttribute("class");
                    }
                    if (colhtml[i].style.backgroundColor == "") {
                        colhtml[i].removeAttribute("style");
                    }
                }
            }
            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_);
                }
            }
            alert(balisefont.innerHTML);
            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
        alert("avec ta methode au final j'ai ceci  pour son ouerHTML!!!!! :  " + balisefont.outerHTML);
    } //fin de fonction shado
    merci loralina
    il faudra que je m'en souvienne pour l'attribut fantome
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  9. #29
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 873
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 873
    Points : 3 717
    Points
    3 717
    Par défaut
    Citation Envoyé par Beginner. Voir le message
    Est-ce que l'objectif c'est de supprimer les balises <font> n'ayant aucun attribut ou bien c'est de supprimer la couleur ?
    Bon ben j'ai essayé de trouver moi-même une réponse à ma question et je comprend avec le titre du fil et les codes postés que tu cherches à supprimer les balises <font> n'ayant aucun attribut...

    Par rapport au titre du fil "Remplacement d'un element par son innerHTML" une possibilité simple serait de faire pour un objet html X ceci : X.outerHTML = X.innerHTML;Si je reprend le bout de code de Loralina en le modifiant cela donne par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
            var balisefont = document.getElementById("test");
            var colhtml = balisefont.getElementsByTagName("font");
            var i = colhtml.length;
     
            while (--i >= 0) {
                ob_ = colhtml[i];
                if (!ob_.hasAttributes()) {
                    ob_.outerHTML = ob_.innerHTML;
                }
            }
    Tu peux faire des tests ici : http://jsbin.com/negatedufu/edit?html,output

  10. #30
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 873
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 873
    Points : 3 717
    Points
    3 717
    Par défaut
    Autre remarque :

    Citation Envoyé par patricktoulon Voir le message
    et M!!!!... pas a tout les coups
    bon ben je remove l'attribut en amont si il n'y a pas de background color
    puisque apres tout le truc est simple
    soit il y a pas d'atribut on vire
    soit il y a attribut on garde
    les attributs sont
    face,size,color pour les attr html
    apres il y a l'attribut style
    dedans il peut y avoir textshadow et/ou background-color et c'est tout
    donc a partir du moment ou je vire le texte shadow (textShadow="") et que le getattribute ("style")me donne"" il n'y a donc pas de background alors on peut virer l'attribut "style"
    et voila c'est terminé bouclé yen a marre on passe au problème suivant

    voila la version avec ta methode qui marche a tous les coups
    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
    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].removeAttribute("class");
                    }
                    if (colhtml[i].style.backgroundColor == "") {
                        colhtml[i].removeAttribute("style");
                    }
                }
            }
            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_);
                }
            }
            alert(balisefont.innerHTML);
            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
        alert("avec ta methode au final j'ai ceci  pour son ouerHTML!!!!! :  " + balisefont.outerHTML);
    } //fin de fonction shado
    merci loralina
    il faudra que je m'en souvienne pour l'attribut fantome
    Je vois que la suppression des attributs vous a posé quelque soucis mais j'ai une une autre question est-ce que les balises que tu cherches à supprimer sont les seules à l'origine à avoir la class "shado" ?

    Si oui alors finalement cela revient à vouloir supprimer toutes les balises <font> ayant la class "shado" alors pourquoi pas les supprimer directement au lieu de supprimer le style (textShadow) + la class "shado" puis ensuite la balise <font> ?

    Cela réduirait ton code...


  11. #31
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 379
    Points : 12 075
    Points
    12 075
    Billets dans le blog
    8
    Par défaut re
    et non beguiner

    je ne peux pas supprimer le l'attribut"style"
    car il peut y avoir
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <font size =5 color= red style="text-shadow:0,0,10px;background-color:#xxxxxx;">toto</font>
    et je ne veut traiter que le shadow d
    onc dans ce cas précis on garde la balise
    parce qu'elle a l'attribut size,color,et le background-color
    comme je l'ai dis plus haut il peut y a voir toutes , une d'entre elle , quelques unes: de ces attributs et style
    donc hors de question de supprimer le font tant que tout n'est pas testé

    conclusion dans mon dernier model sous les deux variante(loralina/la mienne en string) on :

    1. vire la class -----------"removeAttribut("class")"
    2. vire le shadow --------textShadow=""
    3. teste si getAttribut("style") me rapporte quelque chose
    4. si raporte rien alors ya pas de background
    5. on peut donc supprimer l'attribut "style"
    6. nous voila avec des font nettoyés du style sauf ceux qu'on un background
    7. maintenant test si il y a attribut (size ou color (if!hasAttributes())
    8. si oui on garde comme tel sinon on garde que le innerhtml pour la version string insertbefore dans le parent pour la version loralina
    9. suppression des balises vide après insertbefore


    voila
    c'est moins simple qu'il n'y parait mais on y est arrivé
    en tout cas les deux versions fonctionnent nickel l'une élégante l'autre a la bucheronne
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  12. #32
    Membre éclairé
    Femme Profil pro
    Autre
    Inscrit en
    Janvier 2017
    Messages
    335
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Janvier 2017
    Messages : 335
    Points : 715
    Points
    715
    Par défaut
    Bonjour,
    Citation Envoyé par Beginner. Voir le message
    une possibilité simple serait de faire pour un objet html X ceci : X.outerHTML = X.innerHTML;
    Oui, cela fonctionne aussi.
    Je préfère tout de même une version sur les nœuds, pouvant être plus rapide en traitement (cela peut dépendre de l'arborescence), et surtout qui conserve les nœuds d'origine (certains nœuds spécifiques pourraient être référencés ailleurs dans le programme, avoir des événements...).
    Sinon, dans mon code, concernant la suppression des nœuds vides, une optimisation serait sans doute de remplacer le test "if(ob_.innerHTML==="")" par "if(ob_.firstChild===null)".

  13. #33
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 379
    Points : 12 075
    Points
    12 075
    Billets dans le blog
    8
    Par défaut re
    Bonjour
    heu... oui bieguiner c'est ce que je fait avec ma version string outer/inner HTML

    beaucoup d'entre vous m'ont dis que c’était pas vraiment propre comme travail alors que ca fonctionne parfaitement bien
    c'est pour ca que je me suis lancé dans le dom sinon tu pense bien
    ca fait rien j'ai une une belle démonstration de loralina sur le insertbefore

    @loralina dis moi une chose le insertbefore insert la balise ou son innerHTML????

    la version string
    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
     
    function selectionne_text() {  
      return window.getSelection().getRangeAt(0);
    }
     
     
     
     
     
     
    function shadowcolorstring(coul, MOD) {
        if (selectionne_text()) {
            var selection = selectionne_text();
            var selectedText = selection.extractContents();
            var BF = document.createElement("FONT");
            BF.appendChild(selectedText);
            var str = BF.innerHTML;
            var colhtml = BF.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].removeAttribute("class");
                    }
                }
            }
     
     
            var str = BF.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);
                }
            }
            alert(str);
            BF.innerHTML = str;
            if (MOD == true) {
                BF.className = "shado";
                BF.style.textShadow = "0px 0px 10px " + coul;
            }
            selection.insertNode(BF);
            if (BF.parentElement.className == "shado" && MOD == false && BF.parentElement.tagName != "P") {
                BF.className = "shado";
                BF.style.textShadow = "none";
            }
        }
    }
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  14. #34
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 873
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 873
    Points : 3 717
    Points
    3 717
    Par défaut
    Salut,
    Citation Envoyé par Loralina Voir le message
    Bonjour,

    Oui, cela fonctionne aussi.
    Je préfère tout de même une version sur les nœuds, pouvant être plus rapide en traitement (cela peut dépendre de l'arborescence), et surtout qui conserve les nœuds d'origine (certains nœuds spécifiques pourraient être référencés ailleurs dans le programme, avoir des événements...).
    Ah je ne savais pas que c'était moins rapide, je croyais même le contraire... Sinon oui en générale on lit qu'il est préférable d'utiliser les fonctions de manipulations du DOM.

    Citation Envoyé par patricktoulon Voir le message
    et non beguiner

    je ne peux pas supprimer le l'attribut"style"
    car il peut y avoir
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <font size =5 color= red style="text-shadow:0,0,10px;background-color:#xxxxxx;">toto</font>
    et je ne veut traiter que le shadow d
    onc dans ce cas précis on garde la balise
    parce qu'elle a l'attribut size,color,et le background-color
    comme je l'ai dis plus haut il peut y a voir toutes , une d'entre elle , quelques unes: de ces attributs et style
    donc hors de question de supprimer le font tant que tout n'est pas testé
    Ok mais il manque la class "shado" dans ton exemple, non ? Dans la balise <font> as-tu le shadow et le reste (couleur, size...) mélangé ensemble ? Est-ce que ce mélange se fait automatiquement ? Pour le shadow tu utilises ta fonction shadowcolor(coul, MOD) et pour le reste (couleur, size...) tu utilises la fonction execCommand, c'est ça ? Et c'est peut-être cette fonction qui fait le mélange ?

    ---> Sinon mon idée c'était d'utiliser par exemple une balise <span> avec la class "shado" alors tu pourrais tous les repérer facilement avec l'instruction document.getElementsByClassName() et alors les supprimer directement...

  15. #35
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 379
    Points : 12 075
    Points
    12 075
    Billets dans le blog
    8
    Par défaut re
    Bonsoir
    oui beguinner pour enlever ou mettre un shadow text c'est la même fonction avec MOD et coul

    pour le reste (color,background,size)c'est bien execCommand qui fait très bien le boulot quasi ment c'est pas parfait non plus
    a l'inverse de moi qui est soucieux du nettoyage de code execCommand ne va pas jusque au bout elle me laisse quelque fois des fantômes

    et oui la méthode string contrairement a ce que je croyais moi aussi vu le nombre d'opération largement inferieur est quand même plus lourde en terme d'utilisation de mémoire
    par contre si on met un timer la version string est plus rapide de pas grand chose certes mais tout de même

    il faut dire aussi c'est que si execCommand ne fait un nettoyage parfait c'est peu être parce qu'il n'est pas prévu une manipulation girouette( refaire et redéfaire a outrance )comme je le conçois avec ma fonction shadow
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  16. #36
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 873
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 873
    Points : 3 717
    Points
    3 717
    Par défaut
    Oui alors c'est peut-être cette fonction qui fait le mélange ? Parce que si tu veux avec ta fonction shadowcolor(coul, MOD) on devrait avoir un truc de ce genre :

    <font class="shado" style="text-shadow:0,0,10px">toto</font>

    Sans rien d'autres, non ?
    Mais c'est peut-être la fonction execCommand qui ajoute dans la même balise <font> le reste (size,color...) ?

    - Sinon elle sert à quoi la class "shado" ?

    Citation Envoyé par patricktoulon Voir le message

    @loralina dis moi une chose le insertbefore insert la balise ou son innerHTML????
    Cette fonction insert la balise, le outerHTML si tu préfères... Tu peux tester ici : http://jsbin.com/qamicofote/edit?html,console,output

  17. #37
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 379
    Points : 12 075
    Points
    12 075
    Billets dans le blog
    8
    Par défaut re
    je crois que tu ne m'a pas compris quand j'utilisais le mot outrance

    en fait la fonction shadow enle ve ou met le shadow et c'est tout
    par contre quand elle le met ou l'enlève il y a des chance pour qu'il y ai d'autre attributs entre temps qui on été ajoutés
    et ca elle ne dois pas l'enlever

    la ou est la complexité c'est que il est prévu de faire et redéfaire sans toucher au reste des attributs
    sinon oui si il y avais que le shadow ce serait facile on prend le innertext et on le met en tant que innerHTMLdans la nouvelle font créée
    et nos deux versions font le job
    Nom : demo2.gif
Affichages : 226
Taille : 1,13 Mo

    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  18. #38
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 873
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 873
    Points : 3 717
    Points
    3 717
    Par défaut
    Je pense que je t'ai compris et j'ai vérifié : c'est bien la fonction execCommand qui fait le mélange et la raison je pense c'est que tu utilises la balises <font> pour le shadow et tout le reste aussi or mon idée justement ce serait d'utiliser par exemple une balise <span> avec la class "shado", cette balise serait reservé au shadow et pour le reste tu continues à utiliser la balise <font>...

    Et il serait facile de les repérer avec l'instruction document.getElementsByClassName() et alors les supprimer directement...

    Je parle de supprimer uniquement les balises <span> ayant la class "shado" et non les balises <font> ainsi tu ne touches pas au reste des attributs...


    ----
    Deux questions/remarques :

    - Sommes-nous d’accord que pour supprimer le shadow d'un texte donné tu es obligé de sélectionné tout ce texte et non une partie ? Par exemple si tu as trois mots et que tu leurs mets un shadow alors tu ne peux pas par exemple juste suprimer le shadow du deuxième mot sans toucher aux deux autres mots, est-ce bien ce qui se passe ?

    - elle sert à quoi la class "shado" ?

  19. #39
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 379
    Points : 12 075
    Points
    12 075
    Billets dans le blog
    8
    Par défaut re
    et oui je m'en doutais et non tu n'a pas compris ma démarche
    je veut autant que j'ai de peau sous mes doigts pouvoir coisir un mot ou plusieur ou une partie d'un et une partie du suivant et pouvoir lui changer l'ombre autant que j'en aie envie
    regarde bien ce que je fait avec le texte regarde bien comme je croise a outrance les selection et mots et demie mots

    Nom : demo2.gif
Affichages : 257
Taille : 922,6 Ko

    et avec les contrainte de "color,size,,face bold ,italic,underline,backgroundColor voila perfection
    Nom : demo2.gif
Affichages : 272
Taille : 1,69 Mo
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  20. #40
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 873
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 873
    Points : 3 717
    Points
    3 717
    Par défaut
    Citation Envoyé par patricktoulon Voir le message
    et oui je m'en doutais et non tu n'a pas compris ma démarche
    je veut autant que j'ai de peau sous mes doigts pouvoir coisir un mot ou plusieur ou une partie d'un et une partie du suivant et pouvoir lui changer l'ombre autant que j'en aie envie
    regarde bien ce que je fait avec le texte regarde bien comme je croise a outrance les selection et mots et demie mots
    Oui je pense avoir compris cela : j'ai bien compris que tu peux comme tu veux ajouter un shadow de n'importe quelle couleur sur un ou plusieurs mots...

    Mais moi je te parle de la suppression du shadow alors peux-tu faire ceci :

    - tu as trois mots et tu leurs mets un shadow de couleur verte...
    - Peux-tu par exemple juste suprimer le shadow du deuxième mot sans toucher aux deux autres mots ? C'est-à-dire le premier et le deuxième mot reste avec un shadow de couleur verte...



    ------------

    Pour le reste j’essaierais de mettre en œuvre ce dont je te parle, l'exemple sera peut-être plus parlant...

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 13 PremièrePremière 12345612 ... DernièreDernière

Discussions similaires

  1. [SimpleXML] et recherche d'un élément par son attribut
    Par Tutotictac dans le forum Bibliothèques et frameworks
    Réponses: 2
    Dernier message: 28/03/2009, 16h39
  2. Comment remplacer un resultat numérique par son libellé ?
    Par bds2006 dans le forum Bases de données
    Réponses: 3
    Dernier message: 16/06/2006, 11h03
  3. [XSLT ]remplacement d un caractere par son code
    Par luta dans le forum XSL/XSLT/XPATH
    Réponses: 3
    Dernier message: 02/09/2005, 16h26
  4. Réponses: 2
    Dernier message: 10/05/2004, 11h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo