Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

CSS clip et RegExp pour modif par JS

30 réponses
Avatar
SAM
Salutatous,

Dans le cadre de mon apprentissage des expressions régulières.
Soit la règle de style 'clip'.

Je crois que ça doit s'écrire :
clip: rect(15px, 200px, 150px, 50px);

Il parait que certain(s) IE voudraient :
clip: rect(15px 200px 150px 50px);
et que ça ne poserait pas de problème pour les autres navigateurs.


Je mets cette règle inline pour la faire traiter le + simplement
possible par JavaScript :

<img style="clip: rect(15px 200px 150px 50px)" id="ici" blabla>

Que l'on rajoute ou non les virgules dans ce rect(...),
si je fais (en JS) :
alert(document.getElementById('ici').style.clip);
j'obtiens :
- Firefox, Opera :
rect(15px, 200px, 150px, 50px)
ils rajoutent les virgules ou les espaces si absents
- Safari.3, iCab, IE(Mac) :
rect(15px 200px 150px 50px)
ils mettent un espace comme séparateur

Alors pour retrouver les 4 réglages je fais :

var clip = getElementById('ici').style.clip;
clip = clip.replace(/[A-Za-z\(\)]/g,'').split(/[^0-9]{1,2}/);
var haut = clip[0], droite = clip[1]; // etc

Ça m'a l'air un peu laborieux comme RegExp, non ?

Accessoirement, n'y aurait-il pas une méthode + simple d'extraire les 4
réglages de clip ?

--
sm

10 réponses

1 2 3
Avatar
Olivier Miakinen
Le 16/07/2008 09:23, SAM a écrit :

[...]
j'obtiens :
- Firefox, Opera :
rect(15px, 200px, 150px, 50px)
ils rajoutent les virgules ou les espaces si absents
- Safari.3, iCab, IE(Mac) :
rect(15px 200px 150px 50px)
ils mettent un espace comme séparateur

Alors pour retrouver les 4 réglages je fais :

var clip = getElementById('ici').style.clip;
clip = clip.replace(/[A-Za-z()]/g,'').split(/[^0-9]{1,2}/);



C'est joli. ;-)
Mais essaye de remplacer cette ligne par :
clip = clip.match(/[0-9]+/g);

var haut = clip[0], droite = clip[1]; // etc

Ça m'a l'air un peu laborieux comme RegExp, non ?

Accessoirement, n'y aurait-il pas une méthode + simple d'extraire les 4
réglages de clip ?



Cf. ci-dessus. Chez moi ça marche avec :
------------------------------------------------
clip = 'clip: rect(15px 200px 150px 50px);';
clip = clip.match(/[0-9]+/g);
var haut = clip[0], droite = clip[1];
------------------------------------------------
-> haut vaut 15 et droite vaut 200
Avatar
SAM
Olivier Miakinen a écrit :
Le 16/07/2008 09:23, SAM a écrit :

clip = clip.replace(/[A-Za-z()]/g,'').split(/[^0-9]{1,2}/);



C'est joli. ;-)



N'est-ce pas ?
Je tire bien profit du maximum que je peux y mettre.

Mais essaye de remplacer cette ligne par :
clip = clip.match(/[0-9]+/g);



Rhaaa la la ! Y a pas ! j'ai vraiment pas le feeling :-(
(rester enfermer dans du clip ...
alors que c'est si évident et simple ! )

Cf. ci-dessus. Chez moi ça marche avec :



Ho, je ne vais même pas essayer !
Je ne vois pas pourquoi ça ne marcherait pas.






j'ai quand même essayé.

--
sm
Avatar
Olivier Miakinen
Le 16/07/2008 18:47, SAM a écrit :

j'ai quand même essayé.



:-D
Avatar
Laurent vilday
SAM a écrit :
Je crois que ça doit s'écrire :
clip: rect(15px, 200px, 150px, 50px);

Il parait que certain(s) IE voudraient :
clip: rect(15px 200px 150px 50px);
et que ça ne poserait pas de problème pour les autres navigateurs.



<http://www.w3.org/TR/CSS21/visufx.html#clipping&gt;

<quote>
Authors *should* separate offset values with commas. User agents *must*
support separation with commas, but *may* also support separation
without commas, because a previous revision of this specification was
*ambiguous* in this respect.
</quote>

--
laurent
Avatar
Laurent vilday
Olivier Miakinen a écrit :
Le 16/07/2008 09:23, SAM a écrit :
Accessoirement, n'y aurait-il pas une méthode + simple d'extraire les 4
réglages de clip ?



Cf. ci-dessus. Chez moi ça marche avec :
------------------------------------------------
clip = 'clip: rect(15px 200px 150px 50px);';
clip = clip.match(/[0-9]+/g);
var haut = clip[0], droite = clip[1];
------------------------------------------------
-> haut vaut 15 et droite vaut 200



Allez, je vais faire mon chieur.

"Ca" ne "passe" plus dès qu'on en vient à mélanger des unités non
entière et autres que le pixel (em,pt,px,pc), même si je ne vois pas
trop pourquoi qqun voudrait faire ça mais bon.

var clip = 'clip:rect(15em, 1.5pt, 15px, 1.5pc)';
clip = clip.match(/[0-9]+/g);

alert(clip.join(', '));

==> 15, 1, 5, 15

IMO, si qqun voulait extraire les valeurs du clip (même si j'ai bien
compris que c'est un cas d'école), il faudrait obligatoirement extraire
les unités avec. Quitte à manipuler les valeurs ensuite pour retomber
sur une unité simple comme le pixel.

J'essaye mais j'imagine qu'il y a bien plus efficace comme regexp, mes
capacités regexp sont trop limitées :/

var clip = 'clip:rect(15em, 1.5pt, 15px, 1.5pc)';
clip = clip.match(/[0-9.]+[em|px|pc|pt]{2}/g);
alert(clip.join(', '));

==> 15em, 1.5pt, 15px, 1.5pc

Mais je suis persuadé que la regexp est foireuse, le [em|px|pc|pt]{2}
surtout, je pense que ça doit pouvoir se remplacer par [empxct]{2} mais
ça continuerait à extraire des unités invalides comme ee ou tt. Je ne
sais pas comment rendre ça plus strict pour lui imposer l'extraction
seulement des unitées valides (em, pc, px, pt et pas un mélange
aléatoire de 2 de ces lettres)

--
laurent
Avatar
SAM
Laurent vilday a écrit :
SAM a écrit :
Je crois que ça doit s'écrire :
clip: rect(15px, 200px, 150px, 50px);

Il parait que certain(s) IE voudraient :
clip: rect(15px 200px 150px 50px);
et que ça ne poserait pas de problème pour les autres navigateurs.



<http://www.w3.org/TR/CSS21/visufx.html#clipping&gt;

<quote>
Authors *should* separate offset values with commas. User agents *must*
support separation with commas, but *may* also support separation
without commas, because a previous revision of this specification was
*ambiguous* in this respect.
</quote>



et ils disent :
<cite>
Value: <shape> | auto | inherit
</cite>
et M$ dit que non pas d'inherit
(si je n'me trompe pas)
et le clip ne fonctionnerait que sur des éléments en absolute
<http://msdn.microsoft.com/en-us/library/ms533569(VS.85).aspx>
(jamais ils causent en fr là ?)

--
sm
Avatar
SAM
Laurent vilday a écrit :
Olivier Miakinen a écrit :
Le 16/07/2008 09:23, SAM a écrit :
Accessoirement, n'y aurait-il pas une méthode + simple d'extraire les
4 réglages de clip ?



Cf. ci-dessus. Chez moi ça marche avec :
------------------------------------------------
clip = 'clip: rect(15px 200px 150px 50px);';
clip = clip.match(/[0-9]+/g);
var haut = clip[0], droite = clip[1];
------------------------------------------------
-> haut vaut 15 et droite vaut 200



Allez, je vais faire mon chieur.



C'est rien d'le dire :-)
Imaginer qu'en plus on puisse jouer avec les unités !

Au fait, comment déclipe t-on ?
au lieu d'enlever l'extérieur on troue (et on voit l'image de fond par
exemple)

var clip = 'clip:rect(15em, 1.5pt, 15px, 1.5pc)';
clip = clip.match(/[0-9]+/g);

alert(clip.join(', '));



alert(clip);

==> 15, 1, 5, 15



Hein ? le séparateur est out ? (et les dizaines aussi ?!)

IMO, si qqun voulait extraire les valeurs du clip (même si j'ai bien
compris que c'est un cas d'école),



Oui.

il faudrait obligatoirement extraire les unités avec.
Quitte à manipuler les valeurs ensuite pour retomber
sur une unité simple comme le pixel.

J'essaye mais j'imagine qu'il y a bien plus efficace comme regexp, mes
capacités regexp sont trop limitées :/

var clip = 'clip:rect(15em, 1.5pt, 15px, 1.5pc)';



C'est quoi des pc ? des pouces ? ça existe ?

clip = clip.match(/[0-9.]+[em|px|pc|pt]{2}/g);



Je n'aurais pas fait mieux !
Quoi ? quoi ? je ne suis pas une référence ? !

alert(clip.join(', '));



alert(clip.length==4? clip : false);

==> 15em, 1.5pt, 15px, 1.5pc

Mais je suis persuadé que la regexp est foireuse, le [em|px|pc|pt]{2}
surtout, je pense que ça doit pouvoir se remplacer par [empxct]{2} mais
ça continuerait à extraire des unités invalides comme ee ou tt.



Heu! déjà que c'est tordu de coller des unités différentes si en plus il
y a des coquilles ... faut pas non plus demander la lune.

Je ne sais pas comment rendre ça plus strict pour lui imposer l'extraction
seulement des unités valides (em, pc, px, pt et pas un mélange
aléatoire de 2 de ces lettres)



clip = clip.match(/[0-9.]+(em|p[xct])/g);

m'a l'air de bien fonctionner (avec l'exemple)

javascript:alert('clip:rect(15em, 1.5pt, 15px,
1.5pc)'.match(/[0-9.]+(em|p[xct])/g));

et les mm ? ou cm ?

Et maintenant ... les conversions en px ?

--
sm
Avatar
Olivier Miakinen
Le 16/07/2008 23:36, Laurent vilday a écrit :

Cf. ci-dessus. Chez moi ça marche avec :
------------------------------------------------
clip = 'clip: rect(15px 200px 150px 50px);';
clip = clip.match(/[0-9]+/g);
var haut = clip[0], droite = clip[1];
------------------------------------------------
-> haut vaut 15 et droite vaut 200



Allez, je vais faire mon chieur.

"Ca" ne "passe" plus dès qu'on en vient à mélanger des unités non
entière et autres que le pixel (em,pt,px,pc), même si je ne vois pas
trop pourquoi qqun voudrait faire ça mais bon.



Tu as parfaitement raison. Note que cela ne marche pas non plus avec les
longueurs exprimées en pourcentage, ni avec les longueurs négatives, ni
bien sûr avec les valeurs 'auto' ou 'inherit'.

IMO, si qqun voulait extraire les valeurs du clip (même si j'ai bien
compris que c'est un cas d'école), il faudrait obligatoirement extraire
les unités avec. Quitte à manipuler les valeurs ensuite pour retomber
sur une unité simple comme le pixel.



Moui... pas facile avec 'auto', 'inherit' ou '12.3%'.

J'essaye mais j'imagine qu'il y a bien plus efficace comme regexp, mes
capacités regexp sont trop limitées :/

var clip = 'clip:rect(15em, 1.5pt, 15px, 1.5pc)';
clip = clip.match(/[0-9.]+[em|px|pc|pt]{2}/g);



Petite confusion entre [] et (), même si tu rattrappes un peu le coup
avec le {2} qui suit. Je suppose que tu voulais (em|px|pc|pt) au lieu de
[em|px|pc|pt]. Pour info, [em|px|pc|pt] est équivalent à [cemppptx|||],
c'est-à-dire à [cemptx|].

Mais je suis persuadé que la regexp est foireuse, le [em|px|pc|pt]{2}
surtout, je pense que ça doit pouvoir se remplacer par [empxct]{2} mais



Ah oui, désolé d'avoir enfoncé une porte ouverte. Note quand même
qu'elle n'était qu'entrebaillée car tu as oublié le « | » dans ton
équivalence.

ça continuerait à extraire des unités invalides comme ee ou tt. Je ne
sais pas comment rendre ça plus strict pour lui imposer l'extraction
seulement des unitées valides (em, pc, px, pt et pas un mélange
aléatoire de 2 de ces lettres)



Allons-y. Je pars de /[0-9]+/g.

On veut accepter les nombres non entiers : « zéro, ou plusieurs
chiffres, suivi par un point (.) et un, ou plusieurs, chiffres ».
Tiens, j'apprends du coup que, bien que « .3 » soit équivalent à
« 0.3 », « 3. » n'est pas une représentation valide de « 3 ».
http://www.yoyodesign.org/doc/w3c/css2/syndata.html#q13

/([0-9]*.)?[0-9]+/g

La longueur peut être négative : « Les valeurs négatives sont admises. »
http://www.yoyodesign.org/doc/w3c/css2/visufx.html#clipping

/-?([0-9]*.)?[0-9]+/g

Il y a des unités relatives (em, ex, px), absolues (in, cm, mm, pt, pc)
et pourcentage (%).

/-?([0-9]*.)?[0-9]+(em|ex|px|in|cm|mm|pt|pc|%)/g

Et maintenant, si on veut accepter aussi auto ou inherit...

/(auto|inherit|-?([0-9]*.)?[0-9]+(em|ex|px|in|cm|mm|pt|pc|%))/g

Argh ! On a perdu la belle simplicité du début...
Avatar
Olivier Miakinen
Le 17/07/2008 09:09, Olivier Miakinen a écrit :

Et maintenant, si on veut accepter aussi auto ou inherit...

/(auto|inherit|-?([0-9]*.)?[0-9]+(em|ex|px|in|cm|mm|pt|pc|%))/g



À la réflexion, je crois que les parenthèses qui entourent le tout sont
inutiles : /(x|y|z)/ doit être équivalent à /x|y|z/. Donc :
/auto|inherit|-?([0-9]*.)?[0-9]+(em|ex|px|in|cm|mm|pt|pc|%)/g
(à vérifier tout de même).

Argh ! On a perdu la belle simplicité du début...



Pas mieux.
Avatar
Olivier Miakinen
Le 17/07/2008 09:09, Olivier Miakinen a écrit :

/([0-9]*.)?[0-9]+/g

La longueur peut être négative : « Les valeurs négatives sont admises. »
http://www.yoyodesign.org/doc/w3c/css2/visufx.html#clipping

/-?([0-9]*.)?[0-9]+/g



Encore un oubli : en relisant le standard CSS, je vois qu'une valeur
positive peut commencer par un +.

Donc :
/[-+]?([0-9]*.)?[0-9]+/g

Et maintenant, si on veut accepter aussi auto ou inherit...

/(auto|inherit|-?([0-9]*.)?[0-9]+(em|ex|px|in|cm|mm|pt|pc|%))/g



/(auto|inherit|[-+]?([0-9]*.)?[0-9]+(em|ex|px|in|cm|mm|pt|pc|%))/g
ou
/auto|inherit|[-+]?([0-9]*.)?[0-9]+(em|ex|px|in|cm|mm|pt|pc|%)/g
1 2 3