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 :

Supprimer les espaces avant/arrière d'une étendue Range


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 070
    Points
    12 070
    Billets dans le blog
    8
    Par défaut re
    a oui ca marche pour le shadow bizarre ca marchait pas toute a l'heure

    edit hop hop hop!!!!
    non pas tout a fait visiblement si le texte que je viends de taper est un enfant direct du "P" l'espace de devant bloque la fonction rien ne se passe par contre les espaces apres le mot posent aucun soucis dans tout les cas

    en fait regarde la capture l'erreur se produit au dernier netoyage il ne reconnait ps getElementsByTagName("*") en effet c'est un fragment qui n'a pas de tag
    Nom : capture.jpg
Affichages : 477
Taille : 231,2 Ko

    je confirme ca plante uniquement si l'espace de devant est un enfant direct du P
    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 expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 864
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 864
    Points : 3 703
    Points
    3 703
    Par défaut
    Si c'est seulement les espaces avant alors voilà la fonction replaceRange1() ici http://jsbin.com/noxiwanasi/1/edit?js,output

  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 070
    Points
    12 070
    Billets dans le blog
    8
    Par défaut re
    ok donc si je comprends bien
    pour replace range1 si on tombe sur un espace ou le"&" de " " on ajoute le step

    c'est bien ça ta méthode ?

    je regarderais ca demain j'ai les yeux qui se ferme tout seul
    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
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 864
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 864
    Points : 3 703
    Points
    3 703
    Par défaut
    Oui finalement on compte le nombre d'espace et de " " et on l'ajoute au startOffset...

    C'est comme ce qu'à fait badaze sauf qu'en plus des espaces on compte aussi les " "...

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

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 864
    Points : 3 703
    Points
    3 703
    Par défaut
    D'ailleurs je m'aperçois qu'on peut supprimer la condition : if(i>0) qui est inutile car si il n'y a aucun espace i sera égale à 0...

  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 070
    Points
    12 070
    Billets dans le blog
    8
    Par défaut re
    Bonjour Beguinner

    je viens de tester et j'ai une erreur de resizeindex
    cela se produit que lorsque je sélectionne avec espace a gauche et espace a droite
    c'est pour ca que plus bas dans la fonction le nettoyage plantait
    Nom : capture.jpg
Affichages : 375
Taille : 169,8 Ko
    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 070
    Points
    12 070
    Billets dans le blog
    8
    Par défaut re
    Bonjour Beguinner
    j'ai trouvé une façon de coder plus simple pour les offsetet end
    j'utile un pseudo regex pourle trim de la gauche et la droite et compare le length
    le résultat est propre
    mais le comportement est complètement en dehors de ma compréhension

    si je sélectionne 36 espace devant ça marche
    si je sélectionne 36 espace après ça marche
    si je sélectionne X espaces devant et X espaces âpres ça marche mais pas a tout les coups
    j'ai remarqué que si j'ai x espaces devant et le même nombre d' espaces après sélectionnes et que ca marchait pas il fallait enlever 1 espace sur ceux qui sont après

    mais attention!! la aussi ça le fait pas a tout les coups

    j'essaie d'en comprendre la mécanique afin de faire un code mais je ne parvient pas a saisir la logique de cette mécanique

    le code complet pour que tu puisse tester


    Code html : 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
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <!doctype html>
    <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 replaceSelection(coul) {
        var sel, range, fragment, str;
        sel = window.getSelection();
        var oParent = sel.getRangeAt(0).commonAncestorContainer;
        var oRange = sel.getRangeAt(0);
       var oNewSpan = document.createElement('SPAN');
       oNewSpan.appendChild(oRange.cloneContents());
     
     
     
    var G= oNewSpan.textContent.length-oNewSpan.textContent.replace(/^\s+/g, '').length;//trim left
    var D= oNewSpan.textContent.length-oNewSpan.textContent.replace(/\s+$/g, '').length;//trim rigth
     
     
     oRange.setStart(oRange.startContainer, oRange.startOffset + G);
    oRange.setEnd(oRange.endContainer, oRange.endOffset - D);
     
     
     
     
       sel.removeAllRanges();
      sel.addRange(oRange);
     
     
     
     
     
     
     var mySelectionhtml = sel.getRangeAt(0).extractContents();
        var Span = document.createElement("SPAN");
          Span.appendChild(mySelectionhtml);
        Span.innerHTML = Span.outerHTML;           // au cas ou on selectionne une balise shadow complete on prend le tag span de l'element en tant qu'enfant du nouveau span 
        var str = Span.innerHTML;                 //recupération du string html de l'innerhtml du span 
    str=str.replace("&nbsp;","");    
    var sp = Span.getElementsByTagName("*"); //collections de  tout les spans et autre balises interne a Span
        for (var i = 0; i < sp.length; i++) {    // on demarre la boucle sur TOUT!! les elements 
            if (sp[i].tagName == "SPAN") {       //si c'est un SPAN !!
                str = str.replace(sp[i].outerHTML, sp[i].innerHTML); // supression des span dans Span en ne gardant que l'interieur des spans
           }
            if (sp[i].innerText == "") {                 // si c'est une balise vide quelque soit le tagName
                str = str.replace(sp[i].outerHTML, ""); // supression des balises vides cela arrive quand on a une selection entiere le dom reproduit la balise de debut a la fin 
           }
        }
      
     if (coul != false) {
            Span.style.textShadow = "0px 0px 10px " + coul; // si coul une couleur alors shadow
        } else {
             Span.id="sp";
    Span.style.textShadow = "none";                 //sinon NONE !!!
        }
        //str = str.replace(/"<\/strong><strong>"/g, "");   ////RESTE A REGLER CES DEUX SOUCIS 
        // str = str.replace(/"<\/em><em>"/g, "");
        Span.innerHTML = str;                               //on replace le code néttoyé dans le nouveau SPAN
         document.getElementById('innernewnode').value = " code  de newnode  :" + Span.outerHTML;
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents(); // on delete le range complet 
            range.insertNode(Span);                  //on insert dans le range le new span que l'on a nétoyé
            sel.removeAllRanges();   //on peut carrément supprimer le range 
            sel.addRange(range);     // et y ajouter notre range tout propre
        }
        //dernier nettoyage du parent container cette fois (pas utile tout le temps)
      do{oParent=oParent.parentElement;}while(oParent.tagName!="P");
     
     
    var sp = oParent.getElementsByTagName("*");
        
        for (var i = 0; i < sp.length; i++) {
       if (sp[i].innerText == "") {
                sp[i].parentElement.removeChild(sp[i]);
                             }else{
                 if (sp[i].innerText == " ") {
                sp[i].parentElement.replaceChild(sp[i], " ");
                 }
    }
    }
     
     
     if(document.getElementById("sp")){ 
    var N=false;
    var spn=document.getElementById("sp");
    var par=document.getElementById("sp");
    do{par=par.parentElement;if(par.tagName=="SPAN"){ N=true;};}while(par.tagName!="P");
    if(N==false){
    alert("pas none");
    par.innerHTML=par.innerHTML.replace(spn.outerHTML,spn.innerHTML);
    }
     
     
    spn.removeAttribute("id");}
    //par.innerHTML = par.innerHTML.replace(/"<\/strong\>\<strong\>"/gi, "");   
       //par.innerHTML = par.innerHTML.replace(/"</em><em>"/gi, "");
         document.getElementById('res').value = document.getElementById('comment').outerHTML;
    }
        </script>
    </head>
     
     
    <body>
        <div id="comment" class="comment" contenteditable>
     
     
     
     
            <p>
                <font size="5">teste         de           <span style='text-shadow: 0px 0px 10px red;'><strong>te</strong></span><span style="text-shadow: 0px 0px 10px blue;"><font color="red"><strong><em>xt</em>e</strong></font></span> shadow</font>
            </p>
     
     
     
     
        </div>
     
     
     
     
        <input type="button" value="backblue" onclick="replaceSelection('blue')" />
        <input type="button" value="backgreen" onclick="replaceSelection('green')" />
        <input type="button" value="backRED" onclick="replaceSelection('red')" />
        <input type="button" value="backmagenta" onclick="replaceSelection('magenta')" />
        <input type="button" value="none" onclick="replaceSelection(false)" />
     
     
        <input type="button" id="html" value="coupe" onclick="coupe()" />
        <input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)" />
        </br>
        <textarea id="res" rows="15" cols="100">
    </textarea>
        <textarea id="innernewnode" rows="15" cols="100">
    </textarea>
     
     
     
     
     
     
     
     
    </body>
     
     
    </html>
    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
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 864
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 864
    Points : 3 703
    Points
    3 703
    Par défaut
    Salut,

    Citation Envoyé par patricktoulon Voir le message
    Bonjour Beguinner
    j'ai trouvé une façon de coder plus simple pour les offsetet end
    j'utile un pseudo regex pourle trim de la gauche et la droite et compare le length
    le résultat est propre
    Oui les regex peuvent remplacer les boucles, cela ne veut pas dire qu'avec les boucles ça ne marchait pas au contraire avec les boucles ça marche aussi... Mais bon c'est vrai qu'avec les regex c'est plus concis...

    Citation Envoyé par patricktoulon Voir le message
    mais le comportement est complètement en dehors de ma compréhension
    Avec ces deux regex ça va plus loin on ne compte pas seulement les espaces et les &nbsp; mais tous les "espaces blancs" ce qui inclus les tabulations, les sauts de ligne...

    En plus de pouvoir faire des tests tu peux avoir une explication ici : https://regex101.com/r/5e3b3G/1


    Citation Envoyé par patricktoulon Voir le message
    j'essaie d'en comprendre la mécanique afin de faire un code mais je ne parvient pas a saisir la logique de cette mécanique
    J'ai faits quelques tests et je n'ai pas remarqué d'erreur mais j'ai juste testé la partie concernée et non l'ensemble de ton code avec le shadow...

    Et en regardant ton code avec le shadow je vois une ligne qui me semble-t-il pose problème :str=str.replace("&nbsp;","");. Que veux-tu faire ici ? Si c'est remplacer tous les &nbsp par des espaces alors ce n'est pas ce que cela fait... Là juste tu supprimes (oui supprimes et non remplaces) un seul &nbsp... En plus à ce niveau-là il ne peut pas y avoir de &nbsp avant et/ou après la sélection car on les a désélectionnés juste avant en modifiant le range, si il y en a cela ne peut être qu'à l'intérieure de la sélection...

    En gros donc elle n'est pas utile pour les éventuels &nbsp avant et/ou après la sélection (avant modification du range) et elle pose problème quand il y en a à l'intérieur car là à chaque fois tu supprimes un &nbsp (oui supprimes et non remplaces) ce qui modifie évidement le texte chose qu'on ne veut pas normalement...

  9. #29
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    un coup d'oeil à la méthode Text.splitText() pourrait aider.

  10. #30
    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 070
    Points
    12 070
    Billets dans le blog
    8
    Par défaut re
    bonsoir noSmoking
    je vais regarder ce split
    beguinner
    j'ai enlevé le replace ,ca ne change rien

    regarde la capture ca te donnera une idée peut être du pourquoi perso je pige pas
    on vois bien la sélection avec un espace devant et après
    Nom : capture.jpg
Affichages : 395
Taille : 189,4 Ko
    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

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

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 864
    Points : 3 703
    Points
    3 703
    Par défaut
    Citation Envoyé par patricktoulon Voir le message

    regarde la capture ca te donnera une idée peut être du pourquoi perso je pige pas
    Oui je vois et je crois savoir quel est le problème mais je ne sais pas si je vais réussir à l'expliquer clairement...

    Reprenons donc l'exemple : "teste de texte shadow" (sans le shadow pour simplifier...)

    Si ensuite on sélectionne " de " alors il y a apparemment deux possibilités :

    - Le startContainer a pour parent la balise <font> et pareil pour le endContainer ---> là pas de problème ça marche

    Mais parfois le endContainer a pour parent la balise <strong> (juste à coté à droite) et c'est là que cela ne marche pas car dans ce cas son offset sera null et donc la soustraction : oRange.endOffset - D donne un résultat négatif ce qui provoque l'erreur...

    Le problème c'est que ces offsets sont des coordonnées relatives au parent de la nodetext qui peut être différents pour chaque extrémité...

    ...

  12. #32
    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 070
    Points
    12 070
    Billets dans le blog
    8
    Par défaut re
    oui j'avais saisi le problème en mettant des console.log partout

    il y a tellement de possibilité que c'est ingérable

    du coup en t'attendant j'ai poussé sur le version entourloupette a la patricktoulon avec execcommand backcolor et c'est viable

    sinon tant pis pour l'espace je ferais des insertbefore dans la partie nettoyage
    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

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

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 864
    Points : 3 703
    Points
    3 703
    Par défaut
    Oui je crois qu'on a ce problème à chaque fois que le startContainer et le endContainer sont différents.

    Si tu essayes en mettant cela dans le html :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <p>
            <font size="5"><i>teste    </i>        de           <span style='text-shadow: 0px 0px 10px red;'><strong>   te</strong></span><span style="text-shadow: 0px 0px 10px blue;"><font color="red"><strong><em>xt</em>e</strong></font></span> shadow</font>
          </p>

    On voit que le problème se pose même à droite même si il n'y a aucun espace dans la balise <i> alors quand il y en a c'est même pas la peine...

  14. #34
    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 070
    Points
    12 070
    Billets dans le blog
    8
    Par défaut re
    oui dans mes essais j'ai mis a jours 47 possibilités et c'est pas fini
    et a chaque fois c'est une maniéré différente pour réussir donc automatiser cela et trop compliqué
    tiens juste pour te détendre une entourloupette a la patrick

    Code html : 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
    <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;
        var mySelectionhtml = sel.getRangeAt(0).extractContents();
        var Nfont = document.createElement("FONT");
        Nfont.appendChild(mySelectionhtml);
     
     
        var sp = Nfont.getElementsByTagName("FONT");
        for (var i = 0; i < sp.length; i++) {
            if (sp[i].style.backgroundColor != null && sp[i].style.backgroundColor != "") {
                backC = sp[i].style.backgroundColor;
                sp[i].setAttribute("back", sp[i].style.backgroundColor); // on preserve les vrai bacground dans un nouvel attribut si il y a 
            }
            sp[i].removeAttribute("style") // on supprime l'attribut "style"
        }
        var range = sel.getRangeAt(0);
        range.deleteContents();
        fragment = range.createContextualFragment(Nfont.innerHTML); //on créé un fragment pour ne pas ajouter une balise on ajoute donc le innerhtml propre
        range.insertNode(fragment);
        sel.removeAllRanges(); //on peut carrément supprimer le range 
        sel.addRange(range); // et y ajouter notre range tout propre
        document.execCommand("Backcolor", true, "white");
        var parent = sel.getRangeAt(0).commonAncestorContainer;
        alert("parent  :  " + parent.outerHTML);
        var sp = parent.getElementsByTagName("FONT");
        for (var i = 0; i < sp.length; i++) {
            if (sp[i].getAttribute("style") != null && sp[i].getAttribute("style") == "") {
                sp[i].style.backgroundColor = backC;
            }
            if (sp[i].style.backgroundColor == "white") {
                sp[i].removeAttribute("style");
                if (MOD != null) {
                    sp[i].style.textShadow = "0px 0px 10px " + coul;
                }
                if (MOD == null) {
                    var par = sp[i];
                    do {
                        par = par.parentElement;
                        if (par.style.textShadow != null) {
                            sp[i].style.textShadow = "none";
                        }
                    } while (par.tagName != "P");
     
     
                }
            }
     
     
     
     
            if (sp[i].getAttribute("back") != null) {
                sp[i].style.backgroundColor = sp[i].getAttribute("back");
            }
            if (sp[i].innerText == "") {
                sp[i].parentElement.removeChild(sp[i]);
            }
            if (i < sp.length) {
                if (sp[i].getAttribute("back") != null && sp[i].nextSibling.tagName == "FONT" && sp[i].nextSibling.getAttribute("back") != null) {
                    sp[i].innerHTML = sp[i].innerHTML + sp[i].nextSibling.innerHTML;
                    sp[i].nextSibling.parentElement.removeChild(sp[i].nextSibling);
                    sp[i].removeAttribute("back");
     
     
                }
                sp[i].removeAttribute("back");
            }
        }
     
     
        document.getElementById('res').value = document.getElementById('comment').outerHTML;
     
     
     
     
     
     
    }
     
     
    function coupe() {
        document.execCommand("cut");
     
     
    }
        </script>
    </head>
     
     
    <body>
        <div id="comment" class="comment" contenteditable>
     
     
     
     
            <p align="">
                <font size=5>teste   <font style="text-shadow: 0px 0px 10px #ff00ff;">de</font><font style="text-shadow: 0px 0px 10px #ff0000;"> t</font><font style="background-color:red;">ex</font><font>te </font><font style="text-shadow: 0px 0px 10px #00ff00;">shadow</font> pour testes</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)" />
        <input type="button" id="html" value="coupe" onclick="coupe()" />
        <input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)" />
        </br>
        <textarea id="res" rows="15" cols="100">
    </textarea>
    </body>
    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

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

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 864
    Points : 3 703
    Points
    3 703
    Par défaut
    Citation Envoyé par patricktoulon Voir le message

    du coup en t'attendant j'ai poussé sur le version entourloupette a la patricktoulon :mouarf: avec execcommand backcolor et c'est viable
    Ah oui on l'avait oublié celle-là alors quand tu auras le temps poste le code pour qu'on puisse tester...

  16. #36
    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 070
    Points
    12 070
    Billets dans le blog
    8
    Par défaut alors ??
    alors t'en pense quoi ??? c'est viable ????
    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

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

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 864
    Points : 3 703
    Points
    3 703
    Par défaut
    J'ai commencé à regarder, je n'ai pas encore tester et il faut vérifier si ça fait tout ce qu'on veut... Mais de ce que j'ai vu pour l'instant cela correspond à l'idée (astuce) dont on a parlée et comme je te l'avais dit j'y avais moi-même pensé autrefois alors tu penses bien que pour moi c'est "viable" car finalement on se sert de la fonction execCommand qui travaille bien de façon optimisée...


    Par exemple j'avais ouvert un fil sur la fonction "rechercher" : rechercher un mot et mettre en surbrillance toutes les occurrences eh bien si le mot trouvé est entièrement à l'intérieur d'une balise c'est assez simple de le mettre en surbrillance mais si il est à cheval sur plusieurs balises là ça se complique d'où l'idée d'utiliser la fonction execCommand mais après il fallait aussi pouvoir repérer tous les mots mis en surbrillance entre autres pour supprimer la surbrillance...


    EDIT : J'ai voulu tester ici : http://jsbin.com/tosinefexe/edit?html,output mais pour l'instant cela ne fonctionne pas chez moi...

  18. #38
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Une approche différente et qui ne nécessite pas de « tripatouiller » les offsets, ou autres, du oRange suivant le type de noeud qui composent celui-ci
    • mette la sélection dans un SPAN, le classique « oSpan »
    • récupérer le contenu du premier node DOM_TEXT_NODE
    • traiter les espaces Avant de son contenu
    • appliquer la méthode splitText sur cet élément
    • déplacer le noeud possédant les espaces devant le « oSpan »
    • récupérer le contenu du dernier node DOM_TEXT_NODE
    • traiter les espaces Arrière de son contenu
    • appliquer la méthode splitText sur cet élément
    • déplacer le noeud possédant les espaces après le « oSpan »


    On en revient à la méthode Text.splitText()

  19. #39
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Je reviens avec une approche à peine, mais alors à peine, différente.

    La solution passe par une étendue temporaire, tous les commentaires sont dans le 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
    /**
     * Supprime les espaces avant et arrière d'un étendue Range
     * @method trimRange
     * @param {Object} range - étendue à traiter
     * @returns {Object} range - étendue sans espace avant et arrière
     */
    function trimRange(range) {
      // création d'un élément neutre
      var oSpan = document.createElement("SPAN");
      // récup des noeuds de l'étendue Range
      var oSelectedText = range.extractContents();
      // place le <span> dans l'étendue Range
      range.insertNode(oSpan);
      // ajout de la sélection en cours
      oSpan.appendChild(oSelectedText);
      // replace la sélection
      range.selectNode(oSpan);
      // traitement des espaces
      var text;
      var tab;
      var nbSpace;
      var oText;
      // récup. des nodes DOM_TEXT_NODE
      var nodesText = getTextNode(oSpan);
      if (nodesText.length) {
        var ind = getFirstNoSpace(nodesText);
        ind = ind < 0 ? 0 : ind;
        var elemFirst = nodesText[ind];
        if (elemFirst.data.length) {
          // récup. du contenu peu avoir changé
          text = elemFirst.textContent;
          // récup. nb spaces avant
          tab = text.split(/\S+/);
          nbSpace = tab[0].length;
          // application de la méthode splitText(offset)
          // oText contient la chaine à partir de la fin des espaces
          // elemFirst ne contient plus que les espaces avant
          oText = elemFirst.splitText(nbSpace);
        }
        // traitement espaces Arrière
        // récup. des nodes DOM_TEXT_NODE
        // Attention : il peut y avoir eu un changement
        nodesText = getTextNode(oSpan);
        ind = getLastNoSpace(nodesText);
        ind = ind < 0 ? 0 : ind;
        var elemLast = nodesText[ind];
        if (elemLast.data.length) {
          // récup. du contenu peu avoir changé
          text = elemLast.textContent;
          tab = text.split(/\S+/);
          nbSpace = tab[tab.length - 1].length;
          // calcul position des espaces de fin
          var posEnd = text.length - nbSpace;
          // application de la méthode splitText(offset)
          // spaceAfter contient les espaces arrières
          // elemLast contient la chaine sans les espaces de fin
          var spaceAfter = elemLast.splitText(posEnd);
        }
        // on fait le nettoyage
        range.selectNode(oSpan);
        // déplace tous les enfants d'un élément dans son parent
        var parent = oSpan.parentNode;
        // déplace tous les enfants hors du noeud
        while (oSpan.firstChild) {
          parent.insertBefore(oSpan.firstChild, oSpan);
        }
        // supprime le noeud devenu inutile
        parent.removeChild(oSpan);
        // redéfini la selection
        range.setStart(oText, 0);
        range.setEnd(elemLast, elemLast.nodeValue.length);
      }
      return range;
    }
    exemple en ligne : Trim d'un object Range

    PS : j'en ai profité pour recadrer le titre de la discussion.

  20. #40
    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 070
    Points
    12 070
    Billets dans le blog
    8
    Par défaut re
    re
    bonjour noSmoking

    3 sélections et 3 clics sur action et voila le résultat
    Nom : capture.jpg
Affichages : 426
Taille : 61,3 Ko
    pour un espace devant sélectionne j'ai tripatouillé une méthode simple et imparable regarde la dernière fonction shadow dans l'autre discution
    si j'arrivait a faire la meme chose pour 2 et 3 espaces cela serait amplement suffisant pour reprendre une erreur de sélection

    surtout q'au final seuls les espaces devant sont essentiellement traitable se d'apres n'ont pas vraiment d'importance pour une sélection futur du mots suivant

    je vais maintenant potasser ton code
    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

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

Discussions similaires

  1. Supprimer les espaces avant et après un caractère
    Par KaliMero973 dans le forum Langage SQL
    Réponses: 3
    Dernier message: 05/04/2013, 11h20
  2. Supprimer les espaces sans passer par une formule
    Par Runsh63 dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 01/06/2011, 15h25
  3. Réponses: 4
    Dernier message: 29/08/2008, 12h53
  4. [RegEx] Supprimer les espaces au début d'une chaine de caractère
    Par PoichOU dans le forum Langage
    Réponses: 2
    Dernier message: 30/01/2008, 18h49
  5. Réponses: 9
    Dernier message: 06/11/2007, 13h36

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