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
Laurent vilday
SAM a écrit :
Olivier Miakinen a écrit :
Ainsi, les règles suivantes sont toutes équivalentes :
1) [em|px|pc|pt]
2) [cemppptx|||]
3) [cemptx|]
4) [c]|[e]|[m]|[p]|[t]|[x]|[|]
5) c|e|m|p|t|x|[|]
6) c|e|m|p|t|x||
N'hésite pas à demander des précisions si le passage d'une ligne à une
autre n'est pas clair, par exemple 3->4.



Tu rigoles ?



ROFLMAO

Nombre à virgule :
/[0-9]*.[0-9]+/g



Là il n'y a pas moyen de raccourcir ?
/[.0-9]+/g



Je ne pense pas.

/[.0-9+]/g ne peux pas matcher par exemple "123.456", seulement ".456"

Ceci dit, j'ai encore peut être rien compris.

--
laurent
Avatar
SAM
Laurent vilday a écrit :
SAM a écrit :

Tu rigoles ?



ROFLMAO



traduc ?

Nombre à virgule :
/[0-9]*.[0-9]+/g



Là il n'y a pas moyen de raccourcir ?
/[.0-9]+/g



Je ne pense pas.

/[.0-9+]/g ne peux pas matcher par exemple "123.456", seulement ".456"



oui, mais je disais : /[.0-9]+/
- un chiffre ou un point au minimum
- autant de points et de chiffres qu'on veut
dans n'importe quel ordre au maximum

Ceci dit, j'ai encore peut être rien compris.



Pareil : si j'ai bien compris ?

vérif faite : le point tout seul le JS va pas aimer --> NaN

--
sm
Avatar
Olivier Miakinen
Le 17/07/2008 13:03, Laurent vilday a écrit :

Vi, je croyais que : [em|px] voulait dire "trouver em, ou px". Mais
visiblement non.



C'est (em|px) qui veut dire « trouver em ou px ». Voire juste em|px .

En effet : le caractère « | » n'est pas un caractère spécial dans une
classe de caractères. Par conséquent, il ne peut pas *séparer* des
valeurs, mais il *est* une des valeurs possibles.



Humm, "classe de caractères" c'est le [ ], c'est ça ?



Oui. Une classe de caractères matche toujours *exactement un* caractère,
ni plus, ni moins.

En revanche, ce caractère « | » sert à séparer des valeurs *en dehors*
des classes de caractères.



OK, donc :

/em|pt/ ça trouve "em" ou "pt"



Oui.

Tandis que /[em|pt]/ ça trouve "e", "m", "|", "p" ou "t", c'est ça ?



Oui.

Humm je crois avoir pigé. Du 3 au 4, ça va. C'est plus le "[|]" du 5 qui
devient "|" dans le 6, même si avec tes explications je pense
apercevoir l'astuce.

5) [|] c'est une classe de caractère donc on parle du caractère "|"

6) | c'est pas une classe de caractère donc le "|" possédant une
signification propre en dehors des classes de caractères, il faut l'escaper.

C'est ça ?



C'est exactement ça.

Nombre entier :
/[0-9]+/g



OK

Nombre à virgule :
/[0-9]*.[0-9]+/g



0.1111 mais aussi .1111, n'est-ce pas ?



Oui.

Ou j'ai encore rien compris au "*" :D



Je te rassure, tu as parfaitement compris.

Nombre entier ou nombre à virgule :
/[0-9]+|[0-9]*.[0-9]+/g



OK

« ac|bc » est équivalent à « (a|b)c », même avec « a » vide :
/(|[0-9]*.)[0-9]+/g



KO ....

(|[0-9]*.) je comprends pas trop à quoi ça peut correspondre.



C'est « soit rien, soit [0-9]*. ». S'il n'y a rien il reste le [0-9]+
qui suit, donc un nombre entier positif d'au moins un chiffre. S'il y
a « [0-9]*. », c'est qu'on a le point décimal, éventuellement précédé
de chiffres, mais il peut ne pas y avoir de chiffres devant ce point
décimal.

Pourquoi le pipe "|" ? Pour lui indiquer que ça peut être vide ?



Oui, car il n'y a rien à gauche du pipe. On a une alternative entre deux
expressions, l'une vide, l'autre non vide.

Dans ce
cas, le "|" possède une signification propre lorsque entre parenthèses ?



Non, non, juste sa signification habituelle de « ou ».

Non, décidémment KO sur celle là.

« (|x) » est équivalent à « (x)? » :
/([0-9]*.)?[0-9]+/g



J'ai déjà dit que j'aimais pas les regexps ? :)



Pour le dire autrement, on a toujours un ou plusieurs chiffres à droite,
qui représentent soit tout le nombre dans le cas d'un entier, soit la
partie décimale dans le cas d'un nombre à virgule. Si c'est un nombre à
virgule, on a en plus le point décimal, et peut-être des chiffres à
gauche du point.
Avatar
Olivier Miakinen
Le 17/07/2008 13:19, SAM a écrit :

En revanche, ce caractère « | » sert à séparer des valeurs *en dehors*
des classes de caractères.



Qu'est-ce que c'est une "classe" de caractères ?
o [abc]
o (abc)
o autre [ si "autre" remplir cette case ]



[abc]

Une classe de caractères matche toujours exactement un caractère, ni
plus, ni moins.

Ainsi, les règles suivantes sont toutes équivalentes :
1) [em|px|pc|pt]
2) [cemppptx|||]
3) [cemptx|]
4) [c]|[e]|[m]|[p]|[t]|[x]|[|]
5) c|e|m|p|t|x|[|]
6) c|e|m|p|t|x||
N'hésite pas à demander des précisions si le passage d'une ligne à une
autre n'est pas clair, par exemple 3->4.



Tu rigoles ?
Tu peux commencer par le 1 -> 2
et p't'et' même bien par le 1 :
(donne: rien ou e ou m ou em ou p ou x ou px ...etc.) oui/non ?



Non. Pas « rien » ni « em » ni « px » puisque ça ne peut matcher ni zéro
caractère, ni deux caractères.

[em|px|pc|pt] donne : e ou m ou | ou p ou x ou | ou ... ou t.

si je pense par exemple que le truc va répartir également les 'ou' dans
les caractères précédents
2 -> [ce|mp|pp|tx]
3 -> [cem|ptx]



Ça c'est correct puisque tu t'es juste contenté de mélanger les caractères.

sinon pour le 4 je comprends qu'on pourra avoir
rien ou c ou e ou ... toujours qu'un seul (donc différent de 1)



Non, pas « rien ». Les 6 règles matchent toutes un et un seul caractère.

Là il n'y a pas moyen de raccourcir ?
/[.0-9]+/g
sauf à vouloir ne pas matcher les coquilles comme '.px'
(je ne vois pas d'autre coquille possible dans les nombres)



Oui, il y a moyen. Ce serait même probablement une bonne idée.

J'en ai pour 3 semaines pour digérer la variante |x.



;-)
Avatar
Olivier Miakinen
Le 17/07/2008 13:27, Laurent vilday a écrit :

Nombre à virgule :
/[0-9]*.[0-9]+/g



Là il n'y a pas moyen de raccourcir ?
/[.0-9]+/g



Je ne pense pas.



Moi je pense que si.

/[.0-9+]/g ne peut pas matcher par exemple "123.456", seulement ".456"



Euh... Attention à ne pas mettre le + au mauvais endroit !
/[.0-9+]/g peut matcher "1" ou "." ou "+" mais pas ".456".
Au contraire, /[.0-9]+/g peut matcher "123.456" mais aussi "..46..3."

Ceci dit, j'ai encore peut être rien compris.



;-)
Avatar
SAM
Laurent vilday a écrit :
Olivier Miakinen a écrit :
C'est toi qui l'as mis, par trois fois, dans [em|px|pc|pt] !



Vi, je croyais que : [em|px] voulait dire "trouver em, ou px". Mais
visiblement non.



tout ce qui est entre les crochets est optionnel
on en prend n'importe lequel

/[cba]/ retrouve a dans abbé
/[cba]/g retrouve a b b dans abbé
/[cba]+/g retrouve abb dans abbé

javascript:alert('abbe'.match(/[abc]+/g).join(';'));

enfin ... je crois bien ?

Le | entre les crochets ne voudrait donc pas dire 'ou' mais '|'
au contraire de /(em|px)/ ou bien de /em|px/


Je suis bon pour relire un ènième fois "Mastering
Regular Expressions" de O'Reilly ...
<http://oreilly.com/catalog/9781565922570/>



Le truc de Moz n'est pas mal
<http://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core:Objets_globaux:RegExp>
<http://developer.mozilla.org/fr/docs/Guide_JavaScript_1.5:Expressions_rationnelles>
C'est certainement du "digest" / oRelly, mais au moins ça cause

Ainsi, les règles suivantes sont toutes équivalentes :
1) [em|px|pc|pt]
2) [cemppptx|||]
3) [cemptx|]
4) [c]|[e]|[m]|[p]|[t]|[x]|[|]
5) c|e|m|p|t|x|[|]
6) c|e|m|p|t|x||
N'hésite pas à demander des précisions si le passage d'une ligne à une
autre n'est pas clair, par exemple 3->4.



Humm je crois avoir pigé. Du 3 au 4, ça va. C'est plus le "[|]" du 5 qui
devient "|" dans le 6, même si avec tes explications je pense
apercevoir l'astuce.



pour avoir le | il faut l'échapper sinon il veut dire 'ou'

Ou j'ai encore rien compris au "*" :D



à mettre en bouton de barre perso :
<http://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core:Objets_globaux:RegExp#Caract.C3.A8res_sp.C3.A9ciaux_dans_les_expressions_r.C3.A9guli.C3.A8res>

Nombre entier ou nombre à virgule :
/[0-9]+|[0-9]*.[0-9]+/g



OK



Oui, enfin bon ... peut-être aujourd'hui ?
Demain ? c'est moins sûr.

« ac|bc » est équivalent à « (a|b)c », même avec « a » vide :
/(|[0-9]*.)[0-9]+/g



KO ....

(|[0-9]*.) je comprends pas trop à quoi ça peut correspondre.



(| le début est vide ou
[0-9] un chiffre
* une fois ou plus
. puis un point
) fin du bazar et mise en mémoire

Yaka lire ! :-)


Pourquoi le pipe "|" ? Pour lui indiquer que ça peut être vide ? Dans ce
cas, le "|" possède une signification propre lorsque entre parenthèses ?

Non, décidémment KO sur celle là.



M'enfin ! y a rien devant le 'ou' donc c'est vide, non ?

Kesk'y doit jubiler l'Olivier à nous voir se casser la tête sur pas grd
chose pour lui !

--
sm
Avatar
SAM
Olivier Miakinen a écrit :

J'en ai pour 3 semaines pour digérer la variante |x.



;-)



déjà qu'avec [cemppptx|||]
je lis [cemppptx]{2}

y a encore du taf !

--
sm
Avatar
Olivier Miakinen
Le 17/07/2008 14:59, SAM a écrit :


[ plein de choses vraies ]



Oui, rien à dire.

(|[0-9]*.) je comprends pas trop à quoi ça peut correspondre.



(| le début est vide ou
[0-9] un chiffre
* une fois ou plus
. puis un point
) fin du bazar et mise en mémoire

Yaka lire ! :-)



Juste histoire de couper les cheveux en quatre, remplacer :
* une fois ou plus
par :
* zéro fois ou plus

Tout le reste est bon.

Kesk'y doit jubiler l'Olivier à nous voir se casser la tête sur pas grd
chose pour lui !



Je ne jubile certainement pas à vous voir vous casser la tête ! Mais
j'avoue que j'aime expliquer les choses qui me semblent évidentes à des
personnes qui ne trouvent pas ça évident à priori. Là où je jubile,
c'est quand j'ai enfin réussi à le faire, et que j'ai l'impression que
ma journée n'a donc pas été perdue.
Avatar
SAM
Olivier Miakinen a écrit :
Le 17/07/2008 14:59, SAM a écrit :

[ plein de choses vraies ]



Oui, rien à dire.



Merci, merci.
Enfin ... merci Olivier, ça va finir par viendre.

(|[0-9]*.) je comprends pas trop à quoi ça peut correspondre.


(| le début est vide ou
[0-9] un chiffre
* une fois ou plus
. puis un point
) fin du bazar et mise en mémoire

Yaka lire ! :-)



Juste histoire de couper les cheveux en quatre, remplacer :
* une fois ou plus
par :
* zéro fois ou plus

Tout le reste est bon.



scrotche, j'aurais dû consulter mes notes !

Kesk'y doit jubiler l'Olivier à nous voir se casser la tête sur pas grd
chose pour lui !



Je ne jubile certainement pas à vous voir vous casser la tête !



"jubile" n'est sans doute pas le bon terme.
Mais tu dois certainement rigoler.
(enfin ! je l'espère)

Mais
j'avoue que j'aime expliquer les choses qui me semblent évidentes à des
personnes qui ne trouvent pas ça évident à priori.



Là, y a pas de lézard, tu arrives bien à te mettre à la portée. Super !
(sauf quand tt d'un coup tu te lâches un peu :-) )


Là où je jubile,
c'est quand j'ai enfin réussi à le faire, et que j'ai l'impression que
ma journée n'a donc pas été perdue.



La journée ? c'est peut-être un peut tschorte.
Compter 2 ou 3 ans ?
:-)

--
sm
Avatar
Pierre Goiffon
SAM wrote:
Dans le cadre de mon apprentissage des expressions régulières.


(...)

J'arrive un peu tard mais je profite de ce fil pour faire de la pub pour
cet excellent outil sous Windows :
http://regulator.sourceforge.net/

Pour les expressions rationnelles je n'ai jamais trouvé mieux ni même
l'embryon d'un équivalent !
On a la possibilité de lancer des match ou execute sur un texte
personnalisable, de voir une traduction en langage clair de la regexp, ...
Outil indispensable !
1 2 3