Discussion :

[grafistolage]

Bonjour.

Voici une fonction qui a pour but de remplacer une chaine de caractères par une autre dans un DIV contenteditable.

La chaine à remplacer ressemble à ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="12345">
     <div id="ad12345" style="width: 50%; float: left;">ICI, DU TEXTE</div>
</div>

J'ai une fonction déclenchée par "onClick" sur plusieurs boutons qui permettent de transformer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

float: left;

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

float: right;

et ça fonctionne.
Cette même fonction est sensée transformer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

width: 50%;

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

width: 25%;

mais là, ça ne fonctionne pas du tout et probablement à cause du signe "%".

Voici la fonction Javascript qui permet ces changements :

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
 
function modifierEncadre(encId, code, newValeur) {
     encIdAddress = "ad"+encId;  
 
     var tailleDiv = document.getElementById(encId).offsetWidth;
     var tailleSsDiv = document.getElementById(encIdAddress).offsetWidth;
     var ratio = Math.ceil((tailleSsDiv/tailleDiv)*100);
 
     if (code == "aFloat") {
          valeur = getComputedStyle(document.getElementById(encIdAddress)).cssFloat;
     } else if (code == "aWidth") {
          var perc = String.fromCharCode(37);
          valeur = ratio+perc;
     }
 
     str = document.getElementById(encId).innerHTML;
     expReg = new RegExp(valeur, 'gi');
     remplacement = str.replace(expReg, newValeur);
 
     artTexte = document.getElementById("artTexte").innerHTML;
     expRegFin = new RegExp(str, 'gi');
     remplacementFinal = artTexte.replace(expRegFin,remplacement);
     document.getElementById("artTexte").innerHTML=remplacementFinal;
}

Pour le changement de largeur, je n'utilise pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

valeur = getComputedStyle(document.getElementById(encIdAddress)).width;

parce que cette dernière renvoie une valeur en px. Or, j'ai besoin d'une valeur en pourcentage.

J'espère avoir été assez explicite et surtout, que quelqu'un saura m'aider sur cette problématique.

Merci par avance.

[SpaceFrog]

le % ne pose aucun souci ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
chaine="width:50%;"
prop="width"
remp="25%"
var reg=new RegExp("("+prop+")\\s*:\\s*[^;]+;","gi")
alert(chaine.replace( reg,"$1:"+remp) )

[grafistolage]

Merci SpaceFrog.

En effet ta fonction fonctionne correctement mais, n'a pas le même comportement sur les différents navigateurs que j'ai pu tester (FF, Safari, Chrome et Opera). Du coup cela me pose d'autres problèmes trop hasardeux pour que j'utilise ta fonction.

Pour information, j'ai tenté de procéder autrement en utilisant ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("encIdAddress").style.width="25%";

J'ai remarqué qu'en l'absence de style css, les navigateurs créaient automatiquement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="12345" style="width: 25%;">blabla</div>

.
Ainsi, en utilisant : document.getElementById("12345").innerHTML, j'obtiens exactement ce que je recherchais initialement.

Ceci n'a pas encore été testé sous IE mais j'ai bon espoir...

[SpaceFrog]

Rien à voir avec le regex ...


mais ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("12345")

Mais un id ne doit pas etre uniquement numérique ni commencer par du numérique