const text = "hello world hello";

// replace() — แทนที่ "hello" ตัวแรกที่เจอ ด้วย "hi"
const result = text.replace("hello", "hi");

console.log(text);   // "hello world hello" — ต้นฉบับไม่เปลี่ยน
console.log(result); // "hi world hello" — เฉพาะ hello ตัวแรกถูกแทนที่

// === สังเกต: hello ตัวที่สองยังอยู่เหมือนเดิม
// เพราะ replace() เปลี่ยนเฉพาะ match แรก

const text = "hello world";

// ค้นหา "xyz" — ซึ่งไม่มีใน string
const result = text.replace("xyz", "abc");

console.log(result); // "hello world" — คืนค่าเดิม ไม่เปลี่ยน ไม่ error

// === เปรียบเทียบกับการเจอ match
console.log(text.replace("hello", "hi")); // "hi world" — เจอ match → แทนที่

const text = "hello world hello hello";

// replaceAll() — แทนที่ "hello" ทุกตัว ด้วย "hi"
const result = text.replaceAll("hello", "hi");

console.log(text);   // "hello world hello hello" — ต้นฉบับไม่เปลี่ยน
console.log(result); // "hi world hi hi" — hello ทุกตัวถูกแทนที่ ✓

// === เปรียบเทียบกับ replace() ตรง ๆ
const replaceOnly = text.replace("hello", "hi");
console.log(replaceOnly); // "hi world hello hello" — แค่ตัวแรก

// === แทนที่ตัวอักษรที่ซ้ำกัน
const spaced = "a-b-c-d-e";
console.log(spaced.replaceAll("-", " ")); // "a b c d e"

// === แทนที่ช่องว่างทั้งหมด
const messy = "one   two   three";
console.log(messy.replaceAll("   ", " ")); // "one two three"

// === แทนที่ substring ยาว ๆ
const html = "<div><div><div>";
console.log(html.replaceAll("<div>", "<section>"));
// "<section><section><section>"

// === ถ้าไม่เจอ searchValue — ไม่ error ไม่เปลี่ยน
console.log("hello".replaceAll("xyz", "abc")); // "hello"

const text = "cat dog cat bird cat";

// replace() — เปลี่ยนเฉพาะ "cat" ตัวแรก
const replaceFirst = text.replace("cat", "panda");
console.log(replaceFirst); // "panda dog cat bird cat"

// replaceAll() — เปลี่ยน "cat" ทุกตัว
const replaceAll = text.replaceAll("cat", "panda");
console.log(replaceAll); // "panda dog panda bird panda"

// === ต้นฉบับไม่เปลี่ยนทั้งคู่
console.log(text); // "cat dog cat bird cat"

// === ใช้แทนตัวคั่นใน path
const path = "home/about/contact";
console.log(path.replace("/", " > "));     // "home > about/contact"
console.log(path.replaceAll("/", " > "));  // "home > about > contact"

// === ผู้ใช้กรอกเบอร์โทรมาหลายรูปแบบ
const phone1 = "081-234-5678";
const phone2 = "081 234 5678";
const phone3 = "  0812345678  ";

// replaceAll() + trim() — ทำความสะอาดให้เหลือแค่ตัวเลข
const clean1 = phone1.replaceAll("-", "").trim();
const clean2 = phone2.replaceAll(" ", "").trim();
const clean3 = phone3.trim();

console.log(clean1); // "0812345678"
console.log(clean2); // "0812345678"
console.log(clean3); // "0812345678"

// === ใช้ replaceAll() chain — ลบทั้งขีดและ space
const messy = "081 - 234 - 5678";
const clean = messy.replaceAll("-", "").replaceAll(" ", "");
console.log(clean); // "0812345678"

// === สร้าง slug จากชื่อบทความ
const title = "  Learn JavaScript  Basics  ";

// trim() → replaceAll(" ", "-") → toLowerCase()
const slug = title.trim().replaceAll(" ", "-").toLowerCase();

console.log(slug); // "learn-javascript-basics"

// === ใช้ซ้ำกับหลายหัวข้อ
function toSlug(text) {
  return text.trim().replaceAll(" ", "-").toLowerCase();
}

console.log(toSlug("  Hello World  "));     // "hello-world"
console.log(toSlug("My First Post"));       // "my-first-post"
console.log(toSlug("  What Is Node JS  ")); // "what-is-node-js"

// === คนส่วนใหญ่คาดว่า replace() จะเปลี่ยนทุกตัว — แต่ไม่ใช่!
const text = "a a a a a";

// ❌ ผิดคาด — replace() เปลี่ยนแค่ตัวแรก
const wrong = text.replace("a", "b");
console.log(wrong); // "b a a a a" — แค่ตัวแรก!

// ✅ ถูก — ใช้ replaceAll() เพื่อเปลี่ยนทุกตัว
const correct = text.replaceAll("a", "b");
console.log(correct); // "b b b b b"

// === replace() ไม่เปลี่ยน string ต้นฉบับ — ต้องรับค่าใหม่
let name = "Mali";

// ❌ ผิด — คิดว่า name จะเปลี่ยน
name.replace("M", "P");
console.log(name); // "Mali" — ยังเหมือนเดิม!

// ✅ ถูก — ต้อง assign กลับ
name = name.replace("M", "P");
console.log(name); // "Pali"

// === ใช้ chain method ได้ — เพราะแต่ละขั้นคืน string ใหม่
const raw = "  HELLO WORLD  ";
const result = raw.trim().replaceAll(" ", "-").toLowerCase();
console.log(result); // "hello-world"

// === replace() มอง "Hello" กับ "hello" เป็นคนละคำ
const text = "Hello hello HELLO";

console.log(text.replace("hello", "hi"));    // "Hello hi HELLO"
console.log(text.replace("Hello", "hi"));    // "hi hello HELLO"
console.log(text.replaceAll("hello", "hi")); // "Hello hi HELLO"

// === ถ้าอยากเปลี่ยนทุกแบบ — ใช้ toLowerCase() ก่อน
const unified = text.toLowerCase().replaceAll("hello", "hi");
console.log(unified); // "hi hi hi"