คู่มือการใช้เมธอด replace() ใน JavaScript: จากพื้นฐานถึงการใช้งานจริง

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. บทนำ

2. พื้นฐานของเมธอด replace()

เมธอด replace() คืออะไร?

โครงสร้างการใช้งาน

string.replace(pattern, replacement)

• pattern: สตริงหรือ Regular Expression ที่ต้องการค้นหา
• replacement: ข้อความที่ใช้แทนที่ หรือฟังก์ชัน callback

การใช้งานพื้นฐาน

let text = "Hello, world!";
let result = text.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

ข้อควรระวัง

1. replace() จะทำการแทนที่เพียงครั้งแรกที่พบเท่านั้น
2. หากต้องการแทนที่ทุกตำแหน่งที่ตรงกัน ต้องใช้ Regular Expression พร้อมแฟลก g

3. การแทนค่าขั้นสูงด้วย Regular Expression

Regular Expression คืออะไร?

ตัวอย่างการใช้ Regular Expression

let text = "apple, banana, apple";
let result = text.replace(/apple/g, "orange");
console.log(result); // "orange, banana, orange"

ประเภทของแฟลก

• g: การแทนที่แบบ global (แทนที่ทุกตำแหน่งที่ตรงกัน)
• i: การแทนที่โดยไม่สนใจตัวพิมพ์เล็ก/ใหญ่
• m: โหมดหลายบรรทัด

ตัวอย่างการใช้งาน: การแทนที่โดยไม่สนใจตัวพิมพ์เล็ก/ใหญ่

let text = "Hello, hello, HELLO";
let result = text.replace(/hello/gi, "hi");
console.log(result); // "hi, hi, hi"

4. การแทนค่าหลายตำแหน่ง

การแทนค่าทั้งหมดที่ตรงกัน

let text = "cat dog cat bird";
let result = text.replace(/cat/g, "fish");
console.log(result); // "fish dog fish bird"

เทคนิคการแทนที่หลายคำพร้อมกัน

let text = "red blue green";
let replacements = {red: "pink", blue: "cyan", green: "lime"};

Object.keys(replacements).forEach(key => {
  let regex = new RegExp(key, "g");
  text = text.replace(regex, replacements[key]);
});

console.log(text); // "pink cyan lime"

5. การแทนค่าด้วย Callback Function

Callback Function คืออะไร?

ตัวอย่างการแทนค่าแบบไดนามิก

1. การสลับลำดับข้อความ

let text = "Tanaka, Taro";
let result = text.replace(/(w+), (w+)/, (match, p1, p2) => {
  return `${p2} ${p1}`;
});
console.log(result); // "Taro Tanaka"

2. การเปลี่ยนรูปแบบวันที่

let date = "2024-12-25";
let formattedDate = date.replace(/(d{4})-(d{2})-(d{2})/, (match, year, month, day) => {
  return `${month}/${day}/${year}`;
});
console.log(formattedDate); // "12/25/2024"

6. การจัดการอักขระพิเศษและ Escape Sequence

อักขระพิเศษคืออะไร?

การแทนค่าข้อความที่มีอักขระพิเศษ

ตัวอย่างที่ 1: การแทนค่าข้อความที่มีจุด (.)

let text = "www.example.com";
let result = text.replace(/./g, "-");
console.log(result); // "www-example-com"

ตัวอย่างที่ 2: การลบสัญลักษณ์ดอลลาร์ ($)

let price = "$1,000";
let result = price.replace(/$/g, "");
console.log(result); // "1,000"

การแทนค่าอักขระ Escape ใน HTML

ตัวอย่าง: Escape แท็ก HTML

let html = "<div>Hello!</div>";
let result = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(result);
// "&lt;div&gt;Hello!&lt;/div&gt;"

7. ตัวอย่างการใช้งานจริงและเทคนิคขั้นสูง

การแปลงรหัสขึ้นบรรทัดใหม่เป็นแท็ก <br>

let text = "HellonWorldnJavaScript";
let result = text.replace(/n/g, "<br>");
console.log(result);
// "Hello<br>World<br>JavaScript"

การจัดการพารามิเตอร์ใน URL

let url = "https://example.com/?id=123&lang=en";
let result = url.replace(/lang=en/, "lang=ja");
console.log(result);
// "https://example.com/?id=123&lang=ja"

การ Sanitization ข้อมูลจากผู้ใช้

function sanitizeInput(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = "<script>alert('XSS');</script>";
let safeInput = sanitizeInput(userInput);
console.log(safeInput);
// "&lt;script&gt;alert('XSS');&lt;/script&gt;"

8. ข้อควรระวังและแนวทางปฏิบัติที่ดีที่สุด

ข้อควรระวัง: จะมีการแทนที่เฉพาะครั้งแรกที่ตรงกัน

let text = "apple apple orange";
let result = text.replace("apple", "banana");
console.log(result); // "banana apple orange"

ข้อควรระวัง: การแยกแยะตัวพิมพ์เล็ก/ใหญ่

let text = "JavaScript is powerful. javascript is versatile.";
let result = text.replace(/javascript/gi, "JS");
console.log(result);
// "JS is powerful. JS is versatile."

ข้อควรระวัง: การ Escape อักขระพิเศษที่ตกหล่น

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[]\]/g, "\$&");
}

let text = "Price: $100";
let result = text.replace(new RegExp(escapeRegExp("$"), "g"), "USD ");
console.log(result);
// "Price: USD 100"

9. สรุป

ทบทวนบทความ

• การใช้งานพื้นฐาน: อธิบายโครงสร้างของเมธอด replace() และยกตัวอย่างการแทนค่าข้อความแบบง่าย
• การประยุกต์ใช้ Regex: เรียนรู้การใช้ Regular Expression และแฟลกต่าง ๆ เพื่อการแทนค่าขั้นสูง
• Callback Function: นำเสนอวิธีการแทนค่าแบบไดนามิกและตัวอย่างการใช้งานจริง
• ตัวอย่างเชิงปฏิบัติ: เทคนิคที่เป็นประโยชน์ เช่น การจัดการ URL และการ Sanitization ข้อมูลผู้ใช้
• แนวทางปฏิบัติที่ดีที่สุด: อธิบายข้อควรระวังและการปรับปรุงประสิทธิภาพในการใช้งาน

บทส่งท้าย