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

Version imprimable

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

20/03/2017, 17h51
Beginner.

Ça marche bien chez moi !
20/03/2017, 18h00
patricktoulon

heu

re
heu .. ben ca dépends de ce qui est attendu alors
pour moi non ca marche pas
dans la capture on voit:
"contenus "et "plus" dans 2 span imbriqués on ne devrait pas
on voit un span class test avec 2 espace on ne devrait pas
on voit "long" et "que" dans 2 span test on ne devrait pas
avez vous regarder la méthode que j'ai employé dans la discussion remplacement ......
y a pas plus simple et imparable

une chose essentielle
en fait le tout est de distinguer les " " et "  "
  doit etre un espaces entre 2 balises
" " est un espace entre 2 mots dans une balises
a la sélection on standardise ces deux sans distinction ca devient qoi qu'il en soit un " "
a la repose du text avec le "tSpan"(span secondaire temporaire) le " " redevient  
20/03/2017, 18h26
Beginner.

Oui mais on doit juste prendre la <span> qui nous interesse...

Si tu veux que des espaces et plus de &nbsp je t'avais déjà dit ceci :

Citation:

Envoyé par Beginner.

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  
20/03/2017, 18h35
NoSmoking

Citation:

heu .. ben ca dépends de ce qui est attendu alors
pour moi non ca marche pas

Patrick STOP, tu es encore en train de nous pourrir une de tes discussions avec tes problèmes de shadow.

Je te rappelles l'objet de TA discussion, reprend le post #1 si tu ne t'en souviens pas. STRUCTURE ton développement, déjà dit d'ailleurs, et les vaches seront bien gardées.

Citation:

Envoyé par c'est toi qui l'a écrit

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

Il me semble que l'objectif primaire est atteint donc basta !
20/03/2017, 18h49
patricktoulon

re

oui
si tu veux mais je crois avoir précisé peut être pas dans cette discussion mais de toute façon les 3 post font partie d'un même lot et pour la même raison finale

en ce qui concerne ta démo elle fonctionne mais des espaces tout seuls dans un span c'est justement ce que je voulais Eviter
car le nettoyage après est encore plus délicat car il y en a que je dois garder et pour les déterminer ensuite court forrest

regarde dans l'autre discussion comment j'ai fait pour supprimer l'espace devant
20/03/2017, 19h01
NoSmoking

Citation:

si tu veux mais je crois avoir précisé peut être pas dans cette discussion mais de toute façon les 3 post font partie d'un même lot et pour la même raison finale

de ton point de vue mais pas de celui d'un forum !

Un forum sert également à d'autres pour trouver une réponse à une question posée ce qui devient extrêmement difficile, voire impossible, dans tes discussions.

Me concernant cette discussion est close!
22/03/2017, 13h03
patricktoulon

re

re
Bonjour
ou est la fonction " getTextNode" chez moi elle est "indéfinie"

bon ben pour tes codes je suis allé récupérer les lien dans le head

puis-je toute fois proposer la mienne de solution

nous somme d'accords que le sujet est supprimer les espaces(caractères invisibles) devant et après dans selection

et rien que ca

et ben voila

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
 
function trimL_Rrange(){
var espG = "";
var espD = "";
  var sel = window.getSelection();
 
 
  var parent = sel.getRangeAt(0).commonAncestorContainer;
  if (parent.nodeType === 3) {
      parent = parent.parentNode;
  }
  var mySelecthtml = sel.getRangeAt(0).cloneContents();
  var oSpan = document.createElement("SPAN");
  oSpan.appendChild(mySelecthtml);
  var B = oSpan.getElementsByTagName("*")
  var str = oSpan.innerHTML
  for (var i = 0; i < B.length; i++) {
      if (B[i].tagName == "SPAN") {
          str = str.replace(B[i].outerHTML, B[i].innerHTML);
      }
      if (B[i].innerText == "" && B[i].tagName != "IMG") {
          str = str.replace(B[i].outerHTML, "");
      }
  }
  var midle = str.replace(/&nbsp\;/gi, "");
  if (midle.substring(0, 1) == " ") {
      midle = midle.substring(1, midle.length);
  }
  if (midle.substring(midle.length - 1, midle.length) == " ") {
      midle = midle.substring(0, midle.length - 1);
  }
 
 
  espG = str.split(midle)[0]
  espD = str.substring(espG.length + midle.length, str.length);
  alert(":" + espD + ":");
  oSpan.innerHTML = midle;
 
 
  var range = sel.getRangeAt(0)
  range.deleteContents(); // on delete le range complet 
  if (range.createContextualFragment) {
      fragment = range.createContextualFragment(espG + oSpan.outerHTML + espD); //on créé un fragment
  }
 
 
  if (fragment.childNodes.length == 2) {
      var indC = 0;
  } else {
      var indC = 1;
  }
  var firstInsertedNode = fragment.childNodes[indC]; //on determine le debut du fragment
  var lastInsertedNode = fragment.childNodes[indC]; //on determine fin  du fragment
  range.insertNode(fragment);
  if (firstInsertedNode) {
      range.setStartBefore(firstInsertedNode);
      range.setEndAfter(lastInsertedNode);
  }
  sel.removeAllRanges(); //on peut carrément supprimer le range 
  sel.addRange(range); // on garde la selection active 
 
 
  // en utilisant les fragments ci dessus je n'ai plus la main mise sur oSpan Alors......
  //pour garder la main mise sur oSpan pour le reste de, la fonction  (shadow) maintenant que le texte est bien ciblé on réinsere ospan en tant que range complet 
  //ainsi on a la possibilité de faire ce que l'on veut sur lui  jusqu'a la fin de la fonction   
  var range = sel.getRangeAt(0)
  range.deleteContents();
  range.insertNode(oSpan);
  sel.removeAllRanges(); //on peut carrément supprimer le range 
  sel.addRange(range); // on garde la selection active ( ici facultatif) oSpan est bien ciblé
 
 
 
 
  alert(oSpan.parentElement); //la preuve 
 
 
  //////////////////////////////////////////////////////////////////// 
  document.getElementById('res').value = document.getElementById('comment').outerHTML;
 
 
  }

j'ajouterais que si l'on veut parfaire la chose a la place de insertNode(oSpan) a la fin on peut recréer un fragment avec dedans le innerHTML de oSpan ainsi on se retrouve avec le bon texte sélectionné sans avoir modifié quoi que se soit dans le code du parent

voila

23/03/2017, 19h48
Beginner.

Salut,

Je suis de nouveau un peu perdu : ici tu nous dit que c'est bon mais dans l'autre fil tu nous dit qu'il y a toujours le problème des espaces successifs ??? Alors pourrais-tu clarifier la situation, ça marche ou pas ?

Si tu as toujours le problème des espaces successifs alors il faudrait se pencher sur la solution de NoSmoking qui, me semble-t-il, marche même dans le cas où on a affaire à des espaces multiples et successifs... Certes il y a le dom qui est modifié (notamment ajout de span en partie pour montrer le résultat visuellement) mais on a là le principe qu'on peut adapter pour qu'il n'y ait aucune modification du dom...
23/03/2017, 19h54
patricktoulon

re

re
bonsoir beguinner
non quand je parle des successifs je parle des éléments même tag même attributs c'est pour cela que je ne l'ai pas poster ici
de toute facon je suis limité a des   devant et après un mots mais quand j'en ai entre plusieurs mots c'est plus bon

mais pour l'instant c'est les successifs qui m'ennuie et cela se règle dans l'autre post

Bonjour noSmoking et beguinner
voila j'ai enfin trouver ma formule pour trimer un range sans modifier le code html
il me reste que vos ecriture d'experts pour mettre cela au propre et faire un peu plus pro

le principe que j'ai trouvé est

il y a 3 variable essentielles(espG,midle,espD)
selection avec la souris
cretaion du span "oSpan" avec pour ID"spp"
mettre le clonecontent du range dans oSpan( tres important l'utilisation de clone ,extract reconstruit les balise )
récupération du string globale dans variable str
test si le firstchild de ospan est un nodetext(nodetype 3)
si oui trimer le firstchild
splitter str avec le trim du firstchild
idem pour le last child

nous avons notre portion de code sans espaces dans midle

on resplit str par midle
l'item 0 sera espg ,l'item 2 sera espD

la différence avec avant elle se passe a partir de la
je met tout le reste de la fonction dans un if sur espG!="" ou espD !=""

si oui
Attention c'est la que vous allez faire les gros yeux

création d'un fragment
avec espG+oSpan.outerHTML+espD
repérage du oSpan dans le fragment il devient le start et le end
on insert le fragment
application du start et end
nous avons maintenant notre selection sans espaces MAIS!!!! dans un span
création d'un fragment 2 avec seulement le innerHTML de oSpan ( il est fou ce toulonnais y va ou comme ca , ca y est on l'a perdu )
un dernier removerange puis un addrange
et enfin insernode du fragment 2

la nous nous retrouvons avec dans la sélection le oSpan complet + le oSpan innerhtml (Alors la!!!! il est définitivement perdu le toulonnais )

mais non

le span qui a le id"spp".parentElement.removeChild(le span qui a le id"spp")

voili voilou on a bien notre sélection sans espaces et sans!!!! modifier le code html de base

alors vous en dites quoi on met cela au propre????peut etre avec des techniques plus conventionnelles
code indenté

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
 
function trimrangeLR() {
    var espG = "";
     var espD = "";
 
    var sel = window.getSelection();
    var parent = sel.getRangeAt(0).commonAncestorContainer;
    if (parent.nodeType === 3) {
        parent = parent.parentNode;
    }
    var mySelecthtml = sel.getRangeAt(0).cloneContents();
    var oSpan = document.createElement("SPAN");
    oSpan.id = "spp"
    oSpan.appendChild(mySelecthtml);
    var str = oSpan.innerHTML;
 
    var B = oSpan.getElementsByTagName("*")
    for (var i = 0; i < B.length; i++) {
        //if (B[i].tagName == "SPAN") {   str = str.replace(B[i].outerHTML, B[i].innerHTML);}   //uniquement pour ma fonction shadow          
        //on   peut quand meme se permettre  de faire le ménage ci dessous c'est toujours mieux ( mais facultatif )
        if (B[i].innerHTML == " ") {
            str = str.replace(B[i].outerHTML, "");
            espG = " "
        }
        if (B[i].innerText == "" && B[i].tagName != "IMG") {
            str = str.replace(B[i].outerHTML, "");
        }
    }
    oSpan.innerHTML = str
    //alert("debut :"+str);
    var midle = str;
    oSpan.innerHTML = midle;
    if (oSpan.firstChild.nodeType == 3) {
        var first = oSpan.firstChild.data.trim();
        if (first.length != 0) {
            midle = first + midle.split(first)[1];
        }
    }
    if (midle.substr(0, 1) == " ") {
        midle = midle.substring(1, midle.length);
    }
 
    if (oSpan.lastChild.nodeType == 3) {
        var laste = oSpan.lastChild.data.trim();
        if (laste.length != 0) {
            midle = midle.split(laste)[0] + laste;
        }
    }
    if (midle.substr(midle.length - 1, 1) == " ") {
        midle = midle.substring(0, midle.length - 1);
    }
    espG = str.split(midle)[0];
    espD = str.split(midle)[1];
    oSpan.innerHTML = midle;
    //alert("midle:"+midle+":");
 
    if (espG != "" || espD != "") { // si il n'y a pas d'espace devant et après on fait rien 
        var range = sel.getRangeAt(0)
        range.deleteContents(); // on delete le range complet 
        if (range.createContextualFragment) {
            var fragment = range.createContextualFragment(espG + oSpan.outerHTML + espD); //on créé un fragment avec espG ,oSpan et espD
            var fragment2 = range.createContextualFragment(oSpan.innerHTML);
        }
        var fL = fragment.childNodes.length;
        for (var L = 0; L < fL; L++) {
            if (fragment.childNodes[L].id == "spp") {
                var firstInsertedNode = fragment.childNodes[L]; //on déterminé le début du fragment AVEC OSPAN
            }
 
            if (fragment.childNodes[L].id == "spp") {
                var lastInsertedNode = fragment.childNodes[L]; //on détermine le début du fragment AVEC OSPAN
            }
        }
 
        range.insertNode(fragment);
        if (firstInsertedNode) {
            range.setStartBefore(firstInsertedNode); // ET VOILA C'EST ICI QUE L'ON GARDE rien que  OSPAN DANS LA SELECTION
            range.setEndAfter(lastInsertedNode);
        }
        sel.removeAllRanges(); //on  supprime le range 
        sel.addRange(range); //  on garde la sélection active 
        range.insertNode(fragment2); //on insert aussi le fragment tel qu'il était au départ sans les espaces bien entendu!! 
        //ON PEUT MAINTENANT SUPPRIMER OSPAN
        document.getElementById("spp").parentElement.removeChild(document.getElementById("spp"));
    }
 
    //////////////////////////////////////////////////////////////////// 
    document.getElementById('res').value = document.getElementById('comment').outerHTML;
    //return window.getSelection().getRangeAt(0);
}

il y a aussi cette version qui utilise un autre moyen pour espG,espD,midle c'est au choix

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
function trimrangeLR() {    var espG = "";
    espD = ""
 
 
    var sel = window.getSelection();
    var parent = sel.getRangeAt(0).commonAncestorContainer;
    if (parent.nodeType === 3) {
        parent = parent.parentNode;
    }
    var mySelecthtml = sel.getRangeAt(0).cloneContents();
    var oSpan = document.createElement("SPAN");
    oSpan.id = "spp"
    oSpan.appendChild(mySelecthtml);
    var str = oSpan.innerHTML;
 
 
 
 
    var B = oSpan.getElementsByTagName("*")
    for (var i = 0; i < B.length; i++) {
        //if (B[i].tagName == "SPAN") {   str = str.replace(B[i].outerHTML, B[i].innerHTML);}   //uniquement pour ma fonction shadow          
        //on   peut quand meme se permettre  de faire le menage ci dessous c'est toujours mieux ( mais facultatif )
        if (B[i].innerHTML == " ") {
            str = str.replace(B[i].outerHTML, "");
            espG = " "
        }
        if (B[i].innerText == "" && B[i].tagName != "IMG") {
            str = str.replace(B[i].outerHTML, "");
        }
    }
    oSpan.innerHTML = str
    var tx = str;
    console.log(tx);
    var tx = tx.replace(/&nbsp\;/gi, "*");
    var G;
    for (G = 0; G < tx.length; G++) {
        if (tx[G] == "*" || tx[G] == " ") continue;
        else break;
    }
    var D;
    for (var D = tx.length - 1; D > 0; D--) {
        if (tx[D] == "*" || tx[D] == " ") continue;
        else break;
    }
    var espG = tx.substring(0, G).replace(/\*/gi, "&nbsp\;");
    var midle = tx.substring(G, D + 1).replace(/\*/gi, "&nbsp\;");
    var espD = tx.substring(D + 1).replace(/\*/gi, "&nbsp\;");
    oSpan.innerHTML = midle;
 
 
    if (espG != "" || espD != "") { // si il n'y a pas d'espace devant et apres on fait rien 
        var range = sel.getRangeAt(0)
        range.deleteContents(); // on delete le range complet 
        if (range.createContextualFragment) {
            var fragment = range.createContextualFragment(espG + oSpan.outerHTML + espD); //on créé un fragment avec espG ,oSpan et espD
            var fragment2 = range.createContextualFragment(oSpan.innerHTML);
        }
 
 
        var fL = fragment.childNodes.length;
        for (var L = 0; L < fL; L++) {
            if (fragment.childNodes[L].id == "spp") {
                var firstInsertedNode = fragment.childNodes[L]; //on determine le debut du fragment AVEC OSPAN
            }
 
 
            if (fragment.childNodes[L].id == "spp") {
                var lastInsertedNode = fragment.childNodes[L]; //on determine le debut du fragment AVEC OSPAN
            }
        }
 
 
 
 
        range.insertNode(fragment);
        if (firstInsertedNode) {
            range.setStartBefore(firstInsertedNode); // ET VOILA C4EST ICI QUE L'ON GARDE rien que  OSPAN DANS LA SELECTION
            range.setEndAfter(lastInsertedNode);
        }
        sel.removeAllRanges(); //on  supprime le range 
        sel.addRange(range); //  on garde la selection active 
        range.insertNode(fragment2); //on insert aussi le fragment tel qu'il etait au depart sans les espaces bien entendu!! 
        //ON PEUT MAINTENANT SUPPRIMER OSPAN
        document.getElementById("spp").parentElement.removeChild(document.getElementById("spp"));
    }
    //////////////////////////////////////////////////////////////////// 
    document.getElementById('res').value = document.getElementById('comment').outerHTML;
    //return window.getSelection().getRangeAt(0);
}

29/03/2017, 21h49
Beginner.

Salut,

J'ai regardé mais comme il n'y a que la fonction je n'ai pas testé mais si ça marche alors c'est bien tu as réussi à faire ce que tu voulais (si j'ai bien compris) ?
30/03/2017, 00h55
patricktoulon

re

re oui combiné avec la fonction shadow ca donne un résultat nikel
c'est quand même la version qui utilise les deux boucle que tu a conçu qui fonctionne en toute circonstance

le seul moment ou le code change c'est quand je coupe une font en deux mais ca c'est inévitable sinon les balises seraient pas refermées

prèt pour le menu table?
30/03/2017, 18h37
Beginner.

Ah ben tant si ça marche nikel...

Citation:

Envoyé par patricktoulon

prèt pour le menu table?

As-tu ouvert un fil ? Quelles sont les fonctionnalités souhaitées ? Tu veux faire par exemple comme l'éditeur de ce forum ?
30/03/2017, 21h46
patricktoulon

re

non je n'ai pas ouvert de fil mais oui c'est a peu pres cela

sauf que je veux que cela soit dynamique et pouvoir régler les colonnes séparément ainsi que les lignes
j'ouvre un fil?? t 'est partant ?
31/03/2017, 18h07
Beginner.

Il faudra peut-être plusieurs fils selon le nombre de fonctionnalités, non ?

Citation:

Envoyé par patricktoulon

sauf que je veux que cela soit dynamique et pouvoir régler les colonnes séparément ainsi que les lignes

C'est-à-dire tu veux pouvoir régler la taille des colonnes et des lignes, c'est ça ? J'ai vu que FF permet cela et d'autre choses encore lorsque la table est dans une zone éditable...

J'ai trouvé cela dans le forum :

- Redimensionner les colonnes d'un tableau ( drag and drop )
- [Article] Créer une table HTML éditable en JavaScript v2.0

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