docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,215 @@
|
||||
---
|
||||
id: javascript-regexp
|
||||
title: "JavaScript RegExp"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["regular expressions", "regex", "RegExp object", "pattern matching", "regex flags", "metacharacters"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["javascript", "js", "web", "frontend", "w3schools", "regexp", "regex", "string"]
|
||||
raw_sources: ["https://www.w3schools.com/js/js_regexp.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[JavaScript RegExp]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A regular expression is a sequence of characters forming a search pattern (`/pattern/flags`), used in JavaScript for searching, replacing, and validating text through string methods and the RegExp object. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **A regex is a search pattern** — "A Regular Expression is a sequence of characters that forms a search pattern." [S1]
|
||||
- **Syntax** — written as `/pattern/modifier flags`. [S1]
|
||||
- **String methods** — `match(regex)` returns an array of results, `replace(regex)` returns a new string, and `search(regex)` returns the index of the first match. [S1]
|
||||
- **Flags** — `/g` global match, `/i` case-insensitive, `/u` Unicode support (new 2015). [S1]
|
||||
- **Metacharacters** — `\d` digits, `\w` word characters, `\s` spaces. [S1]
|
||||
- **Quantifiers** — `x+`, `x*`, `x?` control how many occurrences match. [S1]
|
||||
- **Assertions** — `^`, `$`, `\b`, lookahead `(?=...)`, lookbehind `(?<=...)`. [S1]
|
||||
- **Character classes** — `[a]`, `[abc]`, `[a-z]`, `[0-9]` match sets/ranges of characters. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **String method + regex literal** — call `text.match(/.../)`, `text.search(/.../)`, or `text.replace(/.../, ...)` with an inline regex. [S1]
|
||||
- **Flag-driven behavior** — append `g` to find all matches and `i` to ignore case. [S1]
|
||||
- **`pattern.test(text)` for boolean validation** — use anchored patterns (`^`, `$`) with `.test()` to validate where a substring sits. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
**Regular Expressions Overview**
|
||||
"A Regular Expression is a sequence of characters that forms a search pattern." Regular expressions in JavaScript are handled through the RegExp object and are used for text searching, replacing, and validation. [S1]
|
||||
|
||||
**Syntax** — `/pattern/modifier flags`. [S1]
|
||||
|
||||
**Using String Methods** — three primary string methods work with regex: `match(regex)` returns an array; `replace(regex)` returns a new string; `search(regex)` returns the index of the first match. [S1]
|
||||
|
||||
Case-insensitive search: [S1]
|
||||
```javascript
|
||||
let text = "Visit W3Schools";
|
||||
let n = text.search(/w3schools/i);
|
||||
```
|
||||
Using `match()`: [S1]
|
||||
```javascript
|
||||
let text = "Visit W3Schools";
|
||||
let n = text.match(/W3schools/);
|
||||
```
|
||||
Using `replace()`: [S1]
|
||||
```javascript
|
||||
let text = "Visit Microsoft!";
|
||||
let result = text.replace(/Microsoft/i, "W3Schools");
|
||||
```
|
||||
Using `search()`: [S1]
|
||||
```javascript
|
||||
let text = "Visit W3Schools";
|
||||
let n = text.search(/W3Schools/);
|
||||
```
|
||||
Alternation (OR): [S1]
|
||||
```javascript
|
||||
let text = "Black, white, red, green, blue, yellow.";
|
||||
let result = text.match(/red|green|blue/g);
|
||||
```
|
||||
|
||||
**Regex Flags** [S1]
|
||||
|
||||
| Flag | Description |
|
||||
|------|-------------|
|
||||
| `/g` | Performs a global match (find all) |
|
||||
| `/i` | Performs case-insensitive matching |
|
||||
| `/u` | Enables Unicode support (new 2015) |
|
||||
|
||||
Global flag: [S1]
|
||||
```javascript
|
||||
let text = "Is this all there is?";
|
||||
const pattern = /is/g;
|
||||
let result = text.match(pattern);
|
||||
```
|
||||
Case-insensitive flag: [S1]
|
||||
```javascript
|
||||
let text = "Visit W3Schools";
|
||||
const pattern = /w3schools/i;
|
||||
let result = text.match(pattern);
|
||||
```
|
||||
|
||||
**Metacharacters** — common metacharacters include `\d` (digits), `\w` (words), and `\s` (spaces). [S1]
|
||||
|
||||
Digits metacharacter: [S1]
|
||||
```javascript
|
||||
let text = "Give 100%!";
|
||||
const pattern = /\d/g;
|
||||
let result = text.match(pattern);
|
||||
```
|
||||
Word characters: [S1]
|
||||
```javascript
|
||||
let text = "Give 100%!";
|
||||
const pattern = /\w/g;
|
||||
let result = text.match(pattern);
|
||||
```
|
||||
|
||||
**Quantifiers** [S1]
|
||||
|
||||
| Quantifier | Description |
|
||||
|------------|-------------|
|
||||
| `x+` | Matches any string with at least one occurrence of x |
|
||||
| `x*` | Matches any string with zero or more occurrences of x |
|
||||
| `x?` | Matches any string with zero or one occurrence of x |
|
||||
|
||||
Question-mark quantifier: [S1]
|
||||
```javascript
|
||||
let text = "1, 100 or 1000?";
|
||||
const pattern = /10?/g;
|
||||
let result = text.match(pattern);
|
||||
```
|
||||
|
||||
**Assertions** — string boundaries and lookarounds: [S1]
|
||||
|
||||
| Syntax | Name | Description |
|
||||
|--------|------|-------------|
|
||||
| `^` | String boundary | Matches the beginning of a string |
|
||||
| `$` | String boundary | Matches the end of a string |
|
||||
| `\b` | Word boundary | Matches the beginning or end of a word |
|
||||
| `(?=...)` | Lookahead | Matches the subsequent string |
|
||||
| `(?<=...)` | Lookbehind | Matches the previous string |
|
||||
|
||||
Caret (beginning) — true: [S1]
|
||||
```javascript
|
||||
const pattern = /^W3Schools/;
|
||||
let text = "W3Schools Tutorial";
|
||||
let result = pattern.test(text); // true
|
||||
```
|
||||
Caret (beginning) — false: [S1]
|
||||
```javascript
|
||||
const pattern = /^W3Schools/;
|
||||
let text = "Hello W3Schools";
|
||||
let result = pattern.test(text); // false
|
||||
```
|
||||
Dollar (end) — true: [S1]
|
||||
```javascript
|
||||
const pattern = /W3Schools$/;
|
||||
let text = "Hello W3Schools";
|
||||
let result = pattern.test(text); // true
|
||||
```
|
||||
Dollar (end) — false: [S1]
|
||||
```javascript
|
||||
const pattern = /W3Schools$/;
|
||||
let text = "W3Schools tutorial";
|
||||
let result = pattern.test(text); // false
|
||||
```
|
||||
|
||||
**Character Classes** [S1]
|
||||
|
||||
| Class | Description |
|
||||
|-------|-------------|
|
||||
| `[a]` | Matches the character between the brackets |
|
||||
| `[abc]` | Matches all characters between the brackets |
|
||||
| `[a-z]` | Matches all characters in the range from a to z |
|
||||
| `[0-9]` | Matches all characters in the range from 0 to 9 |
|
||||
|
||||
Character class `[0-9]`: [S1]
|
||||
```javascript
|
||||
let text = "More than 1000 times";
|
||||
const pattern = /[0-9]/g;
|
||||
let result = text.match(pattern);
|
||||
```
|
||||
|
||||
The page concludes with links to related topics including RegExp flags, character classes, meta characters, assertions, groups, quantifiers, patterns, objects, and methods. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The page's snippets are the canonical applied examples — case-insensitive `search`, `match`/`replace`, alternation, the `g`/`i` flags, the `\d`/`\w` metacharacters, the `?` quantifier, anchored `.test()` validation, and the `[0-9]` character class. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Search, match, and replace with regex literals (language: JavaScript):
|
||||
```javascript
|
||||
text.search(/w3schools/i); // index of first match, case-insensitive
|
||||
text.match(/red|green|blue/g); // all alternation matches
|
||||
text.replace(/Microsoft/i, "W3Schools"); // returns new string
|
||||
```
|
||||
Validate position with anchors and `.test()`:
|
||||
```javascript
|
||||
/^W3Schools/.test("W3Schools Tutorial"); // true (starts with)
|
||||
/W3Schools$/.test("Hello W3Schools"); // true (ends with)
|
||||
```
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
No contradictions found in the source.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[JavaScript Tutorial]]
|
||||
- **관련 개념:** [[JavaScript String Methods]], [[JavaScript String Search]], [[JavaScript Type Conversion]], [[JavaScript Form Validation]]
|
||||
- **참조 맥락:** The pattern-matching toolkit used by string methods for searching, replacing, and validating text input.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — JavaScript RegExp — https://www.w3schools.com/js/js_regexp.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript RegExp" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user