เรียนรู้วิธีแทนที่ช่องว่างภายในสตริงด้วย JavaScript โดยใช้ Regex (นิพจน์ทั่วไป) ซึ่งเป็นเครื่องมือสำหรับค้นหารูปแบบภายในข้อความ
Regex (มักสะกดว่า “RegEx หรือ “RegExp”) เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการทำงานกับสตริง (ข้อความ) กรณีการใช้งาน Regex ที่พบบ่อยที่สุดคือ:
- การตรวจสอบข้อความ
- ค้นหาข้อความ
วันนี้ คุณจะได้เรียนรู้จากตัวอย่างง่ายๆ ที่ใช้ regex เพื่อแทนที่ช่องว่างทั้งหมดในบรรทัดข้อความ (สตริง) ด้วย ไม่มีอะไร — แต่คุณสามารถใช้ตัวอย่างโค้ดต่อไปนี้เพื่อแทนที่ช่องว่างด้วยอักขระอื่นได้
พื้นที่สีขาวถือเป็นตัวละคร ดังนั้นทุกช่องว่างระหว่างคำในประโยคที่คุณกำลังอ่านอยู่นี้จะถูกนับเป็นอักขระเว้นวรรคหนึ่งตัว
ประโยคนี้มีอักขระช่องว่าง 6 ตัว
ในการแทนที่อักขระช่องว่าง regex มีสิ่งที่เรียกว่า meta-character เรียกว่า \s
ที่มองหาอักขระช่องว่างเดียว รวมถึงการขึ้นบรรทัดใหม่ แท็บ และ Unicode
ชอบสิ่งนี้:
const sentence = "This sentence has 6 white space characters."
console.log(sentence.replace(/\s/g, ""))
// Thissentencehas6whitespacecharacters.
เกิดอะไรขึ้นในโค้ด:
- ขั้นแรก เราแนบ
replace()
วิธีการsentence
ตัวแปรที่อ้างอิงถึงสตริงที่เราต้องการลบช่องว่างออก - จากนั้นเพิ่ม
\s
. ดังกล่าว อักขระเมตาเป็นอาร์กิวเมนต์เพื่อค้นหาอักขระช่องว่าง เพราะแบ็กสแลช (\
) เป็น หลบหนีที่สงวนไว้ อักขระใน JavaScript เราเพิ่ม/
ข้างหน้ามันเพื่อ unescape มันจึงกลายเป็น/\s/
. - จากนั้นเราใช้
g
ทั่วโลก flag ซึ่งบอก JavaScript ว่าเราต้องการค้นหา ทั้งหมด อักขระช่องว่างสีขาวจากสตริง หากคุณไม่เพิ่มg
, เฉพาะอินสแตนซ์ช่องว่างแรกเท่านั้น (ระหว่างThis sentence
) จะถูกแทนที่ - สุดท้าย เราจะแทนที่ช่องว่างสีขาวด้วยอะไร? สตริงว่าง
""
ซึ่งเป็นการลบอักขระช่องว่างและทำให้ทุกคำติดเป็นคำเดียว
หมายเหตุ:เรายังไม่ได้แก้ไข sentence
original เดิม โดยการทำเช่นนี้ เราก็แค่ใช้ console.log()
เพื่อพิมพ์ออกมาว่าจะเป็นอย่างไรหากคุณใช้ replace(/\s/g, "")
วิธี regex กับมัน
หากคุณต้องการเปลี่ยนค่าของ sentence
ตัวแปรเพื่อไม่ให้มีช่องว่าง คุณต้องกำหนดให้กับตัวแปรใหม่ จากนั้นอ้างอิงตัวแปรนั้นต่อจากนี้ไปเมื่อคุณต้องการเข้าถึง
ชอบสิ่งนี้:
const sentence = "This sentence has 6 white space characters."
const sentenceRemoveWhiteSpace = sentence.replace(/\s/g, "")
console.log(sentenceRemoveWhiteSpace)
// Thissentencehas6whitespacecharacters.
และเพื่อให้แน่ใจว่าคณิตศาสตร์ของฉันถูกต้อง ลองใช้วิธี regex อื่นที่มีประโยชน์ที่เรียกว่า match()
เพื่อนับจำนวนอักขระช่องว่างใน sentence
ต้นฉบับ ตัวแปรและดูว่าเป็น 6 จริงหรือไม่:
console.log(sentence.match(/\s/g).length)
// 6
ว้ากกก!