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

Version imprimable

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

14/03/2017, 18h23
patricktoulon

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

bonsoir
comment fait on pour supprimer l'espace a gauche d'une selection dans les ranges

exemple
"un avion est tombée du ciel"
je sélectionne " avion" je ne voudrais garder que "avion" dans la sélection

je dis bien supprimer de la sélection dans les ranges je ne veux pas supprimer cet espace du texte
merci pour les retours

Essaie ça. A peine testé.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function delG(anId){
 var range        = window.getSelection().getRangeAt(0);
 var start        = range.startOffset;
 var end          = range.endOffset;
 var startNode    = range.startContainer;
 
 var t        = startNode.data.substr(start, end-start);
 var changed  = false;
 var s = 0;
 while (t.substr(s,1) == ' ') {
  s++;
  changed = true;
 }
 
 if (!changed) {
  return;
 }
 
 var startOffset = start;
 var endOffset   = start+s;   
 if (window.getSelection().focusNode.parentNode.id == anId) {
  var range2      = document.createRange();
  range2.setStart(startNode,startOffset);
  range2.setEnd(startNode, endOffset);
  range2.deleteContents();
 }
} 
 
//-->
</script>
</head>
<body style="font-family:tahoma">
<hr />
Avec un div  :<br/>
<div id="d" contenteditable="true">ceci est une      phrase pour tester le javascript</div>
<br/>
<button onclick="delG('d');">Enlever espace(s) à gauche</button>
<hr />
</body>
</html>

14/03/2017, 20h21
patricktoulon

re

merci badaze
je pense que je vais pouvoir me débrouiller avec ca je n'ai pas besoins de tout ou meme du while car l'espace est toujours le premier caractère si il y a
pour celui de droite au cas ou ,c'est pareil mais inversé non?

il me faut simplement si je ne me trompe pas dans le raisonnement
le substring(0,1) et le substring(length,-1) des data
c'est bien ca ?
cet espace est du au fait que quand tu sélectionne en draguant avec la souris ,des que tu quitte le mot ca sélectionne l'espace qui suit ou l'espace qui precède selon le sens du drag

et bien non ca donne pas le résultat esconté

Code:

1
2
3
4
5
6
7
8
function backcol(coul,MOD){var sel  =window.getSelection();
var startNode    = sel.getRangeAt(0).startContainer;
var start  = sel.getRangeAt(0).startOffset;
 var end  = sel.getRangeAt(0).endOffset;
 
 
 var t  = startNode.data.substr(0,1);
alert("debut :" + t +"fin");

dans le alert je devrais avoir un espace entre les deux points et "t"

14/03/2017, 21h25
badaze

Qui t'a dit que dans data tu n'as que la sélection ? Regarde mon code.
15/03/2017, 01h29
patricktoulon

re

oui badaze j'ai testé ton code complet et justement c'est ce que je ne veut pas ca supprime l'espace du texte alors que moi je voudrais modifier seulement ce qui est en bleu
15/03/2017, 06h33
badaze

J'avions pas compris !

Citation:

Envoyé par patricktoulon

merci badaze
je pense que je vais pouvoir me débrouiller avec ca je n'ai pas besoins de tout ou meme du while car l'espace est toujours le premier caractère si il y a

Oui mais il peut y avoir plusieurs espaces dans le html mais seul un espace est visible car plusieurs espaces sont ramenés à un seul... D'ailleurs badaze a donné un exemple qui met cela en évidence. Dans certains cas le "while" ou autre sera nécessaire mais par la suite je ne vais pas traiter ces cas (je verrai cela plus tard...).

Alors reprenons ton exemple de phrase, si je met cela dans le html :

Code:

<div id="textBox" contenteditable="true">un avion est tombé du ciel...</div>

Avec trois espaces entre les mots "est" et "tombé", on se retrouve coté rendu avec un seul espace : "un avion est tombé du ciel...".

Je remplace les espaces par des points car l'éditeur du forum les ramène aussi à un apparemment :

- Si on sélectionne juste l'espace entre les mots "est" et "tombé" on obtient ceci : " " (un seul espace !!!)

- Par contre si on sélectionne ".tombé" on obtient ceci : "...tombé" (huit caractères dont trois espaces!!!)

Dans ces deux cas où un seul espace est visible il suffit d'augmenter ou de diminuer de 1 les offsets du range... Et dans ce cas on peut simplement faire ça apparemment :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function replaceRange() { var oRange = oSelection.getRangeAt(0); var oNewSpan = document.createElement('SPAN'); oNewSpan.appendChild(oRange.cloneContents()); if(oNewSpan.textContent[0]=== " ") oRange.setStart(oRange.startContainer,oRange.startOffset + 1); if(oNewSpan.textContent[oNewSpan.textContent.length-1] === " ") oRange.setEnd(oRange.endContainer,oRange.endOffset - 1); oSelection.removeAllRanges(); oSelection.addRange(oRange); }
Tu peux tester tout ça ici : http://jsbin.com/pohutaweni/edit?js,output

Quand tu cliques sur le bouton "replaceRange" juste après avoir sélectionné du texte ayant un espace avant et/ou après alors tu peux voir la sélection changée (elle diminue).

----> Par contre il y a deux cas où cela ne marche pas... Pour un de ces deux cas il faudra faire pour l'extrémité droite de la sélection ce que badaze a fait pour l'extrémité gauche.

15/03/2017, 21h24
badaze

Bravo !!!

Il manque var oSelection = window.getSelection(); avant var oRange = oSelection.getRangeAt(0);
15/03/2017, 21h34
patricktoulon

re

Bonsoir tout les deux
ta methode beguinner elle correspont a ma logique cependant
il faut prendre en compte qu'elle va aller en début de fonction shadow

et que j'ai choisi extractcontent pour la raison que j'ai révélé dans l'autre post a savoir que clonne content te donne une sélection propre et le reste avec des doubles
et que extract content fait exactement l'inverse
et donc que tout mon netoyage est basé sur ce fait

n'y a t il pas moyen d'utiliser les data comme badaze dans ta méthode afin de ne pas avoir a utiliser clonne ou extract pour le début
15/03/2017, 21h58
patricktoulon

re

c'est bon autant pour oi on remove le range apres
beguinner ca match pour 1 avant et 1 apres
pense tu que je devrait faire une boucle pour les espaces multiple ?
c'est juste pour eviter de devoir traiter des spseudo span vides qui en fait ne le sont pas
ent tout cas dans la version 23 de ma methode range ca march
15/03/2017, 22h03
Beginner.

Citation:

Envoyé par badaze

Bravo !!!

Il manque var oSelection = window.getSelection(); avant var oRange = oSelection.getRangeAt(0);

Merci et oui tu as raison, j'ai mis cette instruction en dehors de la fonction mais pour la présentation j'aurais dû la mettre dedans...

Citation:

Envoyé par patricktoulon

ta methode beguinner elle correspont a ma logique cependant

Oui mais dans certains cas il faudra quand même rajouter des "while" comme l'a fait badaze, j'en parlerai plus tard...

Citation:

Envoyé par patricktoulon

et que j'ai choisi extractcontent pour la raison que j'ai révélé dans l'autre post a savoir que clonne content te donne une sélection propre et le reste avec des doubles
et que extract content fait exactement l'inverse
et donc que tout mon netoyage est basé sur ce fait

n'y a t il pas moyen d'utiliser les data comme badaze dans ta méthode afin de ne pas avoir a utiliser clonne ou extract pour le début

Ben les data je crois que c'est pareil, cela renvoi le texte, il faudrait essayer mais de toute façon on peut éviter le clonage et utiliser extractcontent + insertNode...

Mais je pense que cela revient au même que clonage + deleterange...

Et de toute façon tu peux faire comme tu veux car après l’exécution de la fonction rempleceRange tu as une range avec laquelle tu peux travailler comme tu le fait d’habitude...
15/03/2017, 22h11
patricktoulon

re

oui oui j'ai vu apres c'est bon j'ai inséré ca juste au début c'est nikel

j'explique pourquoi c'est un soucis ces espaces

quant je met un shadow j'ai les doubles et tout le toin toin
je nettoie
sauf que dans les doubles il y a des vides et des faux vides (avec 1/+espaces) que je supprime mais dans la selection apres plusieurs changement on peut trouver des span shadow avec les espace qui sont entre les mots et ceux la on ne doit pas les supprimer on juste les remplcer par le innerhtml soit les/l' espace
voila le pourquoi
15/03/2017, 22h16
Beginner.

Citation:

Envoyé par patricktoulon

c'est bon autant pour oi on remove le range apres
beguinner ca match pour 1 avant et 1 apres
pense tu que je devrait faire une boucle pour les espaces multiple ?
c'est juste pour eviter de devoir traiter des spseudo span vides qui en fait ne le sont pas
ent tout cas dans la version 23 de ma methode range ca march

Ah ben je viens de te lire, nos messages se sont croisés...

Oui je pense qu'il faut faire une boucle dans le cas où tu mets des espaces toi-même dans la div éditable, dans ce cas les espaces sont visibles mais pourtant on a vu que le navigateur ramenait les espaces multiples à un alors c'est toujours le cas apparemment mais pour que tous les espaces soit visibles et non ramenées à un il ajoute un caractère entre chaque espace et comme ce caractère est invisible tout va bien...

Fait le test tu verras qu'il rajoute des :  

Tu mets des espaces et tu faits show html ou bien tu utilises f12
15/03/2017, 22h23
patricktoulon

1 pièce(s) jointe(s)

re

oui j'avais remarqué pour le  

une petite démo trop content moi :D
c'est presque parfait
Pièce jointe 254512
15/03/2017, 22h48
Beginner.

Citation:

Envoyé par patricktoulon

une petite démo trop content moi :D
c'est presque parfait

Eh bien bravo !

Citation:

Envoyé par patricktoulon

oui j'avais remarqué pour le  

Je viens de voir qu'en ajoutant : style="white-space : pre; on évite la fusion des espaces et du coup il n'y a plus de  
15/03/2017, 22h55
patricktoulon

re

oh si il y a a dire "bravo" je suis le dernier de la liste
noSmoking,toi,et badaze m'avez super bien coatché
donc pour ma part c'est bravo a vous et surtout merci

mais c'est pas fini il reste deux trois petits détails a régler comme par exemple les font qui se suivent identique en terme d'attribut
puis a la fin quand le principe et bon et solide la réécrire au propre facon pro
je continue sur l'autre post celui ci étant résolu
15/03/2017, 23h14
Beginner.

De rien...

Et cela marche aussi dans le cas où tu mets des espaces toi-même dans la div éditable ?

Car dans ce cas il restera des espaces dans la sélection puisque qu'on ne la diminue que de 1 caractères à gauche et/ou à droite.
15/03/2017, 23h27
patricktoulon

re

a oui tu a raison quand je tape le texte ca ne marche pas sans doute parce que ces espaces a ce moment la sont des textnodes du div et non dans une balise il faudrait que fasse des teste our voir a chaque frappe quoi appartient a qui
15/03/2017, 23h34
Beginner.

Mais il est possible que ça marche quand même avec le shadow ? C'est ce que je voulais savoir...

Sinon si il faut absolument une sélection sans aucun espace avant et après c'est simple on rajoute juste une boucle pour compter les espaces et les  ...

Je vais le faire en attendant que tu vérifies...
15/03/2017, 23h39
patricktoulon

1 pièce(s) jointe(s)

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

je confirme ca plante uniquement si l'espace de devant est un enfant direct du P
16/03/2017, 00h34
Beginner.

Si c'est seulement les espaces avant alors voilà la fonction replaceRange1() ici http://jsbin.com/noxiwanasi/1/edit?js,output
16/03/2017, 00h48
patricktoulon

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
16/03/2017, 00h56
Beginner.

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 " "...
16/03/2017, 01h02
Beginner.

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...
16/03/2017, 09h06
patricktoulon

1 pièce(s) jointe(s)

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

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:

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>

16/03/2017, 17h53
Beginner.

Salut,

Citation:

Envoyé par patricktoulon

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

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

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(" ","");. 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...
16/03/2017, 18h34
NoSmoking

Bonjour,
un coup d'oeil à la méthode Text.splitText() pourrait aider.
16/03/2017, 18h50
patricktoulon

1 pièce(s) jointe(s)

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
Pièce jointe 254823
16/03/2017, 23h19
Beginner.

Citation:

Envoyé par patricktoulon

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 et pareil pour le endContainer ---> là pas de problème ça marche

Mais parfois le endContainer a pour parent la balise (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é...

...
16/03/2017, 23h41
patricktoulon

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 :mouarf: avec execcommand backcolor et c'est viable

sinon tant pis pour l'espace je ferais des insertbefore dans la partie nettoyage

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:

1 2 3 teste de texte shadow 
On voit que le problème se pose même à droite même si il n'y a aucun espace dans la balise alors quand il y en a c'est même pas la peine...

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 :mouarf: une entourloupette a la patrick

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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>

17/03/2017, 00h06
Beginner.

Citation:

Envoyé par patricktoulon

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...
17/03/2017, 00h37
patricktoulon

alors ??

alors t'en pense quoi ??? c'est viable ????
17/03/2017, 15h03
Beginner.

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/03/2017, 15h59
NoSmoking
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() ;)

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:

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/03/2017, 17h32
patricktoulon

1 pièce(s) jointe(s)

re

re
bonjour noSmoking

3 sélections et 3 clics sur action et voila le résultat
Pièce jointe 256091
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

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