You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,17 +2,17 @@ importance: 5
2
2
3
3
---
4
4
5
-
# Selectable list
5
+
# Liste sélectionnable
6
6
7
-
Create a list where elements are selectable, like in file-managers.
7
+
Créer une liste dont les éléments sont sélectionnables,comme dans les gestionnaire de fichiers
8
8
9
-
-A click on a list element selects only that element (adds the class`.selected`), deselects all others.
10
-
-If a click is made with`key:Ctrl` (`key:Cmd`for Mac), then the selection is toggled on the element, but other elements are not modified.
9
+
-Un click sur un élément de la liste sélectionne seulement cet élément(ajoute la classe`.selected`), désélectionne tous les autres.
10
+
-Si un click est effectué avec`key:Ctrl` (`key:Cmd`sur Mac), alors la sélection est inversée sur l'élément, mais les autres éléments ne sont pas modifiés
11
11
12
-
The demo:
12
+
La demo:
13
13
14
14
[iframe border="1" src="solution" height=180]
15
15
16
-
P.S. For this task we can assume that list items are text-only. No nested tags.
16
+
P.S. Pour cette tâche on peut assumer que les éléments de cette liste sont uniquement du texte.Pas de tags imbriqués.
17
17
18
-
P.P.S. Prevent the native browser selection of the text on clicks.
18
+
P.P.S. Empêcher la séléction des textes déclenchée par défaut par le navigateur lors d'un click.
Sometimes we need to find only those matches for a pattern that are followed or preceded by another pattern.
3
+
Parfois nous avons juste besoin de trouver les motifs précédents ou suivant un autre motif.
4
4
5
-
There's a special syntax for that, called "lookahead" and "lookbehind", together referred to as "lookaround".
5
+
Il existe pour cela des syntaxes spéciales, appelées "lookahead" et "lookbehind", ensemble désignées par "lookaround".
6
6
7
-
For the start, let's find the price from the string like `subject:1 turkey costs 30€`. That is: a number, followed by `subject:€` sign.
7
+
Pour commencer, trouvons le prix à partir d'une chaîne de caractères comme `sujet:1 dindes coûte 30€`.C'est un nombre suivi par le signe `sujet:€`
8
8
9
9
## Lookahead
10
10
11
-
The syntax is: `pattern:X(?=Y)`, it means "look for`pattern:X`, but match only if followed by `pattern:Y`". There may be any pattern instead of `pattern:X`and`pattern:Y`.
11
+
La syntaxe est: `pattern:X(?=Y)`, cela veut dire "recherche `pattern:X`, mais renvoie une correspondance seulement si il est suivi de `pattern:Y`". Tous les motifs peuvent être utilisés au lieu de `pattern:X`et`pattern:Y`.
12
12
13
-
For an integer number followed by `subject:€`, the regexp will be`pattern:\d+(?=€)`:
13
+
Pour un nombre entier suivi de `sujet:€`, l'expression régulière sera`pattern:\d+(?=€)`:
14
14
15
15
```js run
16
-
let str ="1 turkey costs 30€";
16
+
let str ="1 dinde coûte 30€";
17
17
18
-
alert( str.match(/\d+(?=€)/) ); // 30, the number 1 is ignored, as it's not followed by €
18
+
alert( str.match(/\d+(?=€)/) ); // 30, le nombre 1 est ignoré, vu qu'il n'est pas suivi de €
19
19
```
20
20
21
-
Please note: the lookahead is merely a test, the contents of the parentheses`pattern:(?=...)`is not included in the result`match:30`.
21
+
NB: Le lookahead est seulement un test, le contenu de la parenthèse`pattern:(?=...)`n'est pas include dans le resultat`match:30`.
22
22
23
-
When we look for `pattern:X(?=Y)`, the regular expression engine finds`pattern:X`and then checks if there's`pattern:Y`immediately after it. If it's not so, then the potential match is skipped, and the search continues.
23
+
Quand nous recherchons `pattern:X(?=Y)`, le moteur d'expressions régulières trouve`pattern:X`et verifie s'il y a`pattern:Y`immediatemment après. Si ce n'est pas le cas, la correspondqnce possible est ignoré, et la recherche continue.
24
24
25
-
More complex tests are possible, e.g.`pattern:X(?=Y)(?=Z)`means:
25
+
Des tests plus complexes sont possibles, ex:`pattern:X(?=Y)(?=Z)`signifie:
26
26
27
-
1.Find `pattern:X`.
28
-
2.Check if`pattern:Y`is immediately after`pattern:X` (skip if isn't).
29
-
3.Check if `pattern:Z`is also immediately after `pattern:X` (skip if isn't).
30
-
4.If both tests passed, then the `pattern:X`is a match, otherwise continue searching.
3.Verifier si `pattern:Z`se situe aussi immédiatement après `pattern:X` (ignorer sinon)..
30
+
4.Si les deux tests sont réussis, alors le motif `pattern:X`correspond, sinon continuer à chercher.
31
31
32
-
In other words, such pattern means that we're looking for `pattern:X`followed by`pattern:Y`and`pattern:Z`at the same time.
32
+
En d'autres mots, ce genre de motif signifie que nous recherchons `pattern:X`suivi de`pattern:Y`et`pattern:Z`en meme temps
33
33
34
-
That's only possible if patterns `pattern:Y`and`pattern:Z`aren't mutually exclusive.
34
+
C'est possible seulement si `pattern:Y`et`pattern:Z`ne s'excluent pas mututellement.
35
35
36
-
For example, `pattern:\d+(?=\s)(?=.*30)`looks for `pattern:\d+`that is followed by a space `pattern:(?=\s)`, and there's `30`somewhere after it`pattern:(?=.*30)`:
36
+
Par exemple, `pattern:\d+(?=\s)(?=.*30)`recherche `pattern:\d+`suivi du motif `pattern:(?=\s)`, et il y a `30`quelque part apres lui`pattern:(?=.*30)`:
37
37
38
38
```js run
39
-
let str ="1 turkey costs 30€";
39
+
let str ="1 dinde coute 30€";
40
40
41
41
alert( str.match(/\d+(?=\s)(?=.*30)/) ); // 1
42
42
```
43
43
44
-
In our string that exactly matches the number`1`.
44
+
Dans notre chaîne de caractères cela correspond exactement au nombre`1`.
45
45
46
-
## Negative lookahead
46
+
## Lookahead negatif
47
47
48
-
Let's say that we want a quantity instead, not a price from the same string. That's a number `pattern:\d+`, NOT followed by `subject:€`.
48
+
Supposons que nous recherchons plutôt une quantité, non un prix, a partir de la même chaîne de caractères.
49
49
50
-
For that, a negative lookahead can be applied.
50
+
Pour cela, le loopahead negatif peut etre utilisé.
51
51
52
-
The syntax is: `pattern:X(?!Y)`, it means "search`pattern:X`, but only if not followed by`pattern:Y`".
52
+
La syntaxe est: `pattern:X(?!Y)`, cela veut dire`pattern:X`, mais seulement si il n'est pas suivi de `pattern:Y`".
53
53
54
54
```js run
55
55
let str ="2 turkeys cost 60€";
56
56
57
-
alert( str.match(/\d+\b(?!€)/g) ); // 2 (the price is not matched)
57
+
alert( str.match(/\d+\b(?!€)/g) ); // 2 (le prix ne correspond pas au motif)
58
58
```
59
59
60
60
## Lookbehind
61
61
62
-
Lookahead allows to add a condition for "what follows".
62
+
Lookahead permet d'ajouter une condition sur "ce qui suit".
63
63
64
-
Lookbehind is similar, but it looks behind. That is, it allows to match a pattern only if there's something before it.
64
+
Lookbehind est similaire a loopahead, mais il regarde derrière.Ça veut dire qu'il établit une correspondance seulement si il y a quelquechose avant lui,
65
65
66
-
The syntax is:
67
-
-Positive lookbehind: `pattern:(?<=Y)X`, matches `pattern:X`, but only if there's `pattern:Y`before it.
68
-
-Negative lookbehind: `pattern:(?<!Y)X`, matches `pattern:X`, but only if there's no `pattern:Y`before it.
66
+
La syntaxe est:
67
+
-Lookbehind positif: `pattern:(?<=Y)X`, correspond à `pattern:X`, mais seulement si il y a `pattern:Y`avant lui.
68
+
-Lookbehind negatif: `pattern:(?<=Y)X`, correspond à `pattern:X`, mais seulement si il n'y a pas `pattern:Y`avant lui.
69
69
70
-
For example, let's change the price to US dollars. The dollar sign is usually before the number, so to look for `$30`we'll use `pattern:(?<=\$)\d+` -- an amount preceded by`subject:$`:
70
+
Pqr exemple,changeons le prix en dollars US. Le signe dollar est généralement placé avant le chiffre,donc pour recupérer `$30` nous utiliserons`pattern:(?<=\$)\d+` -- Une quantité précédé de`subject:$`:
71
71
72
72
```js run
73
73
let str ="1 turkey costs $30";
74
74
75
-
//the dollar sign is escaped \$
76
-
alert( str.match(/(?<=\$)\d+/) ); // 30 (skipped the sole number)
75
+
//le signe dollar est echappé \$
76
+
alert( str.match(/(?<=\$)\d+/) ); // 30 (ignore le nombre sans dollar)
77
77
```
78
78
79
-
And, if we need the quantity -- a number, not preceded by `subject:$`, then we can use a negative lookbehind `pattern:(?<!\$)\d+`:
79
+
Et si nous avons besoin d'une quantité -- un nombre non précédé de `subject:$`, alors nous pouvons utiliser un lookbehind négatif`pattern:(?<!\$)\d+`:
80
80
81
81
```js run
82
-
let str ="2 turkeys cost $60";
82
+
let str ="2 dndes coûte $60";
83
83
84
-
alert( str.match(/(?<!\$)\b\d+/g) ); // 2 (the price is not matched)
84
+
alert( str.match(/(?<!\$)\b\d+/g) ); // 2 (le prix ne correspond pas )
85
85
```
86
86
87
-
## Capturing groups
87
+
## Groupes capturants
88
88
89
-
Generally, the contents inside lookaround parentheses does not become a part of the result.
89
+
Généralement, le contenu d'une parenthese de lookaround ne fait partie des resultats.
90
90
91
-
E.g. in the pattern `pattern:\d+(?=€)`, the `pattern:€`sign doesn't get captured as a part of the match. That's natural: we look for a number `pattern:\d+`, while `pattern:(?=€)`is just a test that it should be followed by`subject:€`.
91
+
Par exmple dans le motif `pattern:\d+(?=€)`, le signe `pattern:€`n'est pas capture comme une partie de la corredpondance. C'est naturel: nous recherchons un nombre `pattern:\d+`, tandis que `pattern:(?=€)`iest juste un test qui doit etre suivi de`subject:€`.
92
92
93
-
But in some situations we might want to capture the lookaround expression as well, or a part of it. That's possible. Just wrap that part into additional parentheses.
93
+
Mais dans certains cas, nous voulons capturer l'expression du lookaround aussi, comme une partie de la correspondance.C'est possible.Il suffit juste de le l'entourer d'une parenthese supplementaire.
94
94
95
-
In the example below the currency sign `pattern:(€|kr)` is captured, along with the amount:
95
+
Dans l'exemple suivant, le signe de la monnaie est capture, en meme temps aue la quqntite.
96
96
97
97
```js run
98
98
let str ="1 turkey costs 30€";
99
-
let regexp =/\d+(?=(€|kr))/; //extra parentheses around €|kr
99
+
let regexp =/\d+(?=(€|kr))/; // parentheses supplemetaires autour de €|kr
Lookahead and lookbehind (commonly referred to as "lookaround") are useful when we'd like to match something depending on the context before/after it.
115
+
Lookahead et lookbehind (ensemble désignés sous le nom de looparound) sont utiles quand nous voulons identifier quelquechose selon le contexte avant/après lui.
116
116
117
-
For simple regexps we can do the similar thing manually. That is: match everything, in any context, and then filter by context in the loop.
117
+
Pour les expressions regulières simple, nous pouvons une chose similaire manuellement: considerer tous les elemets, dans tous les contextes et alors filtrer par contexte en boucle
118
118
119
-
Remember, `str.match` (without flag `pattern:g`) and`str.matchAll`(always) return matches as arrays with `index` property, so we know where exactly in the text it is, and can check the context.
119
+
Vous vous souvenez que `str.match` (sans le drapeau `pattern:g`) et`str.matchAll`retournent (toujours) les correspondances comme des tableaux avec une propriete `index`, et donc nous connaissons où exactement il est et nous pouvons verifier le contexte
0 commit comments