Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 33 additions & 33 deletions 9-regular-expressions/07-regexp-escaping/article.md
Original file line number Diff line number Diff line change
@@ -1,85 +1,85 @@

# Escaping, special characters
# μ΄μŠ€μΌ€μ΄ν”„, 특수 문자

As we've seen, a backslash `pattern:\` is used to denote character classes, e.g. `pattern:\d`. So it's a special character in regexps (just like in regular strings).
λ³Έ 바와 같이 λ°±μŠ¬λž˜μ‹œ `pattern:\`λŠ” 문자 클래슀(예:`pattern:\d`)λ₯Ό λ‚˜νƒ€λ‚΄λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. λ”°λΌμ„œ μ΄λŠ” μ •κ·œμ‹(일반 λ¬Έμžμ—΄κ³Ό 같이)의 특수 λ¬Έμžμž…λ‹ˆλ‹€.

There are other special characters as well, that have special meaning in a regexp. They are used to do more powerful searches. Here's a full list of them: `pattern:[ \ ^ $ . | ? * + ( )`.
μ •κ·œμ‹μ—μ„œ νŠΉλ³„ν•œ μ˜λ―Έκ°€ μžˆλŠ” λ‹€λ₯Έ 특수 λ¬Έμžλ„ μžˆμŠ΅λ‹ˆλ‹€. μ΄λŠ” 보닀 κ°•λ ₯ν•œ 검색에 μ‚¬μš©λ©λ‹ˆλ‹€. λ‹€μŒμ€ 전체 리슀트 `pattern:[ \ ^ $ . | ? * + ( )` μž…λ‹ˆλ‹€.

Don't try to remember the list -- soon we'll deal with each of them separately and you'll know them by heart automatically.
리슀트λ₯Ό κΈ°μ–΅ν•˜λ € ν•˜μ§€ λ§ˆμ„Έμš” 각각 λ‹€λ£° 것이고 κ³§ μ•Œκ²Œ 될 κ²λ‹ˆλ‹€.

## Escaping
## μ΄μŠ€μΌ€μ΄ν”„

Let's say we want to find literally a dot. Not "any character", but just a dot.
문자 κ·ΈλŒ€λ‘œ 점을 μ°ΎλŠ”λ‹€κ³  ν•΄λ΄…μ‹œλ‹€. λͺ¨λ“  κΈ€μžκ°€ μ•„λ‹ˆλΌ μ§„μ§œ 점을 μ°ΎμŠ΅λ‹ˆλ‹€.

To use a special character as a regular one, prepend it with a backslash: `pattern:\.`.
특수 문자λ₯Ό 일반 문자둜 μ‚¬μš©ν•˜λ €λ©΄, λ°±μŠ¬λž˜μ‹œ`pattern:\.`λ₯Ό λΆ™μž…λ‹ˆλ‹€.

That's also called "escaping a character".
"문자 μ΄μŠ€μΌ€μ΄ν”„"라고도 ν•©λ‹ˆλ‹€.

For example:
μ˜ˆμ‹œ:
```js run
alert( "Chapter 5.1".match(/\d\.\d/) ); // 5.1 (match!)
alert( "Chapter 511".match(/\d\.\d/) ); // null (looking for a real dot \.)
alert( "Chapter 5.1".match(/\d\.\d/) ); // 5.1 (일치 ν•­λͺ©!)
alert( "Chapter 511".match(/\d\.\d/) ); // null (μ§„μ§œ 점\.λ₯Ό μ°Ύκ³  μžˆμŠ΅λ‹ˆλ‹€)
```

Parentheses are also special characters, so if we want them, we should use `pattern:\(`. The example below looks for a string `"g()"`:
κ΄„ν˜Έλ„ 특수 문자이기 λ•Œλ¬Έμ— `pattern:\(`λ₯Ό μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€. μ•„λž˜ μ˜ˆμ œμ—μ„œ λ¬Έμžμ—΄`"g()"`λ₯Ό μ°Ύμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.

```js run
alert( "function g()".match(/g\(\)/) ); // "g()"
```

If we're looking for a backslash `\`, it's a special character in both regular strings and regexps, so we should double it.
λ°±μŠ¬λž˜μ‹œ `\`λ₯Ό μ°Ύκ³  μžˆλ‹€λ©΄ 일반 λ¬Έμžμ—΄κ³Ό μ •κ·œμ‹μ—μ„œ λͺ¨λ‘ 특수 문자이기 λ•Œλ¬Έμ— 두 번 μž‘μ„±ν•΄μ•Ό ν•©λ‹ˆλ‹€.

```js run
alert( "1\\2".match(/\\/) ); // '\'
```

## A slash
## μŠ¬λž˜μ‹œ

A slash symbol `'/'` is not a special character, but in JavaScript it is used to open and close the regexp: `pattern:/...pattern.../`, so we should escape it too.
μŠ¬λž˜μ‹œ`'/'`κΈ°ν˜ΈλŠ” 특수 λ¬Έμžκ°€ μ•„λ‹ˆμ§€λ§Œ, μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” μ •κ·œ ν‘œν˜„μ‹`pattern:/...pattern.../`을 μ—΄κ³  λ‹«λŠ” 데 μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ— 이 λ¬Έμžλ„ μ΄μŠ€μΌ€μ΄ν”„ ν•΄μ•Ό ν•©λ‹ˆλ‹€.

Here's what a search for a slash `'/'` looks like:
μŠ¬λž˜μ‹œ`'/'`λ₯Ό μ°ΎλŠ” 방법은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

```js run
alert( "/".match(/\//) ); // '/'
```

On the other hand, if we're not using `pattern:/.../`, but create a regexp using `new RegExp`, then we don't need to escape it:
λ°˜λ©΄μ—, `pattern:/.../`을 μ‚¬μš©ν•˜μ§€ μ•Šκ³  `new RegExp`을 μ‚¬μš©ν•΄ μƒˆλ‘œμš΄ μ •κ·œμ‹μ„ λ§Œλ“ λ‹€λ©΄ μ΄μŠ€μΌ€μ΄ν”„ ν•  ν•„μš”κ°€ μ—†μŠ΅λ‹ˆλ‹€.

```js run
alert( "/".match(new RegExp("/")) ); // finds /
```

## new RegExp
## μƒˆλ‘œμš΄ μ •κ·œμ‹

If we are creating a regular expression with `new RegExp`, then we don't have to escape `/`, but need to do some other escaping.
`new RegExp`으둜 μƒˆλ‘œμš΄ μ •κ·œ ν‘œν˜„μ‹μ„ λ§Œλ“œλŠ” 경우 `/`λ₯Ό μ΄μŠ€μΌ€μ΄ν”„ ν•  ν•„μš”κ°€ μ—†μ§€λ§Œ λ‹€λ₯Έ μ΄μŠ€μΌ€μ΄ν”„ μ²˜λ¦¬ν•΄μ•Ό ν•©λ‹ˆλ‹€.

For instance, consider this:
예λ₯Ό λ“€μ–΄, 이 경우λ₯Ό 생각해 λ³΄μ„Έμš”.

```js run
let regexp = new RegExp("\d\.\d");

alert( "Chapter 5.1".match(regexp) ); // null
```

The similar search in one of previous examples worked with `pattern:/\d\.\d/`, but `new RegExp("\d\.\d")` doesn't work, why?
μ΄μ „μ˜ μœ μ‚¬ν•œ 예제`pattern:/\d\.\d/`λŠ” 잘 μž‘λ™ν–ˆμ§€λ§Œ `new RegExp("\d\.\d")`λŠ” μž‘λ™ν•˜μ§€ μ•ŠλŠ”λ° μ™œ κ·ΈλŸ΄κΉŒμš”?

The reason is that backslashes are "consumed" by a string. As we may recall, regular strings have their own special characters, such as `\n`, and a backslash is used for escaping.
λ°±μŠ¬λž˜μ‹œλŠ” λ¬Έμžμ—΄μ— μ˜ν•΄ "μ†ŒλΉ„"되기 λ•Œλ¬Έμž…λ‹ˆλ‹€. κΈ°μ–΅ν•˜λ“―μ΄ 일반 λ¬Έμžμ—΄μ—λŠ” `\n`κ³Ό 같은 각자의 특수 λ¬Έμžκ°€ 있으며 λ°±μŠ¬λž˜μ‹œλŠ” μ΄μŠ€μΌ€μ΄ν”„μ— μ‚¬μš©λ©λ‹ˆλ‹€.

Here's how "\d\.\d" is preceived:
"\d\.\d"의 예λ₯Ό λ³΄κ² μŠ΅λ‹ˆλ‹€.

```js run
alert("\d\.\d"); // d.d
```

String quotes "consume" backslashes and interpret them on their own, for instance:
λ¬Έμžμ—΄ λ”°μ˜΄ν‘œλŠ” λ°±μŠ¬λž˜μ‹œλ₯Ό "μ†ŒλΉ„"ν•˜μ—¬ λ¬Έμž₯을 λ§ˆμŒλŒ€λ‘œ ν•΄μ„ν•˜λŠ”λ° μ˜ˆμ‹œλ₯Ό μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

- `\n` -- becomes a newline character,
- `\u1234` -- becomes the Unicode character with such code,
- ...And when there's no special meaning: like `pattern:\d` or `\z`, then the backslash is simply removed.
- `\n` -- 쀄 λ°”κΏˆ 문자,
- `\u1234` -- ν•΄λ‹Ή μ½”λ“œλ₯Ό μ˜λ―Έν•˜λŠ” μœ λ‹ˆμ½”λ“œ 문자,
- ...`pattern:\d`와 `\z`같이 νŠΉλ³„ν•œ 의미λ₯Ό κ°–μ§€ μ•ŠμœΌλ©΄ λ°±μŠ¬λž˜μ‹œλŠ” μ œκ±°λ©λ‹ˆλ‹€.

So `new RegExp` gets a string without backslashes. That's why the search doesn't work!
κ·Έλž˜μ„œ `new RegExp`λŠ” λ°±μŠ¬λž˜μ‹œκ°€ μ—†λŠ” λ¬Έμžμ—΄μ„ λ°›μŠ΅λ‹ˆλ‹€. 검색이 λ™μž‘ν•˜μ§€ μ•ŠλŠ” μ΄μœ μž…λ‹ˆλ‹€!

To fix it, we need to double backslashes, because string quotes turn `\\` into `\`:
λ¬Έμžμ—΄ λ”°μ˜΄ν‘œκ°€ `\\`을 `\`으둜 λ°”κΎΈκΈ° λ•Œλ¬Έμ— 이 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄μ„œλŠ” λ°±μŠ¬λž˜μ‹œλ₯Ό 두 배둜 μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€.

```js run
*!*
Expand All @@ -92,8 +92,8 @@ let regexp = new RegExp(regStr);
alert( "Chapter 5.1".match(regexp) ); // 5.1
```

## Summary
## μš”μ•½

- To search for special characters `pattern:[ \ ^ $ . | ? * + ( )` literally, we need to prepend them with a backslash `\` ("escape them").
- We also need to escape `/` if we're inside `pattern:/.../` (but not inside `new RegExp`).
- When passing a string `new RegExp`, we need to double backslashes `\\`, cause string quotes consume one of them.
- 특수 문자`pattern:[ \ ^ $ . | ? * + ( )`λ₯Ό 문자 κ·ΈλŒ€λ‘œ κ²€μƒ‰ν•˜λ €λ©΄ λ°±μŠ¬λž˜μ‹œ`\`λ₯Ό μ•žμ— λΆ™μ—¬μ•Ό ν•©λ‹ˆλ‹€. ("특수 문자 μ΄μŠ€μΌ€μ΄ν”„ ν•˜κΈ°")
- `pattern:/.../`μ•ˆμ— μ‚¬μš© 된 `/`도 μ΄μŠ€μΌ€μ΄ν”„ ν•΄μ•Ό ν•©λ‹ˆλ‹€. (`new RegExp`μ—μ„œλŠ” ν•„μš” μ—†μŠ΅λ‹ˆλ‹€).
- λ¬Έμžμ—΄`new RegExp`을 전달할 λ•Œ λ¬Έμžμ—΄ λ”°μ˜΄ν‘œκ°€ λ°±μŠ¬λž˜μ‹œ 쀑 ν•œ 개λ₯Ό μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ— 두 배의 λ°±μŠ¬λž˜μ‹œ`\\`κ°€ ν•„μš”ν•©λ‹ˆλ‹€.