ตัวอย่างการจับคู่ JavaScript Regex - วิธีใช้ JS Replace บนสตริง

นักพัฒนาใช้โปรแกรมแก้ไขข้อความมานานแล้ว และเช่นเดียวกับเครื่องมือส่วนใหญ่โปรแกรมแก้ไขข้อความทั้งหมดมีคุณสมบัติเหมือนกันคือค้นหาและแทนที่

หากคุณใช้การค้นหาและแทนที่มาระยะหนึ่งแล้วคุณอาจทราบว่าคุณลักษณะนี้มีประโยชน์อย่างไร แต่พวกเราส่วนใหญ่ไม่รู้ว่าเครื่องมือนี้มีพลังมากกว่าที่เราคิดเสียอีก

ไม่เพียง แต่แทนที่สตริงธรรมดาเท่านั้น แต่ยังสามารถเปลี่ยนรูปแบบได้อีกด้วย รูปแบบเหล่านี้เรียกว่านิพจน์ทั่วไป

นิพจน์ทั่วไปมีอยู่ใน JavaScript และภาษาโปรแกรมอื่น ๆ ส่วนใหญ่ Regex (สำหรับระยะสั้น) เป็นเครื่องมือที่ทรงพลังมากที่จะช่วยคุณค้นหารูปแบบการค้นหาที่เรียบง่ายและซับซ้อน

อัลกอริทึมการค้นหาสตริงเป็นสาขาที่สำคัญของวิทยาการคอมพิวเตอร์ ในบทความนี้เราจะเรียนรู้วิธีใช้เครื่องมือที่น่าทึ่งนี้ใน JavaScript

ทำไมต้องใช้นิพจน์ทั่วไป

คุณจะไม่เข้าใจความสำคัญที่แท้จริงของนิพจน์ทั่วไปจนกว่าคุณจะได้รับเอกสารขนาดยาวและได้รับคำสั่งให้ดึงอีเมลทั้งหมดออกจากเอกสารนั้น

คุณสามารถทำได้ด้วยตนเอง แต่มีวิธีที่รวดเร็วมากที่สามารถทำเพื่อคุณได้ โปรแกรมแก้ไขข้อความสมัยใหม่ส่วนใหญ่อนุญาตให้ Regex อยู่ในตัวเลือกค้นหา .*มันมักจะแสดงโดย

และนั่นไม่ใช่ทั้งหมดที่ regex สามารถทำได้อีเมลเป็นเพียงตัวอย่างเท่านั้น คุณสามารถค้นหาสตริงประเภทใดก็ได้ที่เป็นไปตามรูปแบบตัวอย่างเช่น URL หรือข้อความระหว่างวงเล็บ

Regex ยังสามารถใช้เพื่อตรวจสอบความถูกต้องของรูปแบบบางประเภทเช่นการตรวจสอบอีเมล คุณสามารถแทนที่ตรรกะการตรวจสอบความถูกต้องที่ยาวนานเช่นนี้:

function IsValidEmail(email) { if (email.length <= 2) { return false; } if (email.indexOf("@") == -1) { return false; } var parts = email.split("@"); var dot = parts[1].indexOf("."); var len = parts[1].length; var dotSplits = parts[1].split("."); var dotCount = dotSplits.length - 1; if (dot == -1 || dot  2) { return false; } for (var i = 0; i < dotSplits.length; i++) { if (dotSplits[i].length == 0) { return false; } } return true; };

ด้วยบรรทัดเดียวดังนี้:

function isValidEmail(email) { return /^(([^()\[\]\\.,;:\[email protected]"]+(\.[^()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); }

แม้ว่าการแสดงออกปกตินั้นจะดูน่ากลัว แต่ก็ไม่ใช่สิ่งที่คุณต้องจำ เมื่อคุณเข้าใจวิธีการทำงานแล้วก็จะใช้งานได้ง่ายมาก

การจับคู่ JavaScript Regex

ใน JavaScript เรามีวิธีการจับคู่สตริง วิธีนี้สามารถใช้เพื่อจับคู่ Regex ในสตริง

วิธีนี้เหมือนกับวิธีการค้นหาในโปรแกรมแก้ไขข้อความ มันค้นหาสตริงที่กำหนดด้วย Regex และส่งคืนอาร์เรย์ของการจับคู่ทั้งหมด ต้นแบบของวิธีการจับคู่มีดังนี้:

str.match(regexp)

สิ่งนี้จะส่งคืนอาร์เรย์ของการจับคู่ทั้งหมดในการค้นหาสตริง ( str) สำหรับนิพจน์ทั่วไป ( regexp)

การใช้วิธีนี้ขั้นพื้นฐานคือการนับคำทั้งหมดในสตริง ตัวอย่างเช่น:

var str = "This is a test string"; var matchArr = str.match(/\w+/g); console.log(matchArr.length); //prints 5

เราจะเรียนรู้เกี่ยวกับ\w+นิพจน์ทั่วไปนี้ในบทความนี้

การใช้นิพจน์ทั่วไปดังกล่าวทำให้เราสามารถทำงานต่างๆได้ซึ่งจะทำให้เราต้องเขียนตรรกะที่น่าเบื่อหน่าย ตัวอย่างคือฟังก์ชันการตรวจสอบอีเมล เราต้องทดสอบเกณฑ์ทั้งหมด แต่การใช้ regex คุณสามารถทำให้ง่ายขึ้น

นิพจน์ทั่วไปใช้ได้ในฟังก์ชันสตริงส่วนใหญ่ แต่คุณควรตรวจสอบต้นแบบของฟังก์ชันหากต้องการให้แน่ใจ วิธีหนึ่งคือวิธีแทนที่ ลองเรียนรู้เพิ่มเติมด้านล่าง

วิธีการแทนที่ JavaScript

JavaScript มีฟังก์ชันยูทิลิตี้สตริงจำนวนมาก แทนที่เป็นหนึ่งในนั้น ต้นแบบของวิธีการแทนที่มีดังนี้:

const newStr = str.replace(regexp|substr, newSubstr|function)

อย่างที่คุณเห็นวิธีการแทนที่ทำหน้าที่กับสตริงและส่งคืนสตริง ต้องใช้สองพารามิเตอร์: สตริงที่จะถูกแทนที่และสิ่งที่จะถูกแทนที่

พารามิเตอร์แรกอาจเป็นสตริงหรือนิพจน์ทั่วไปก็ได้ ที่นี่เราสามารถใช้พลังของนิพจน์ทั่วไปเพื่อแทนที่รูปแบบการค้นหาที่ซับซ้อนด้วยสตริงบางส่วน

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

var str = "This is a test string"; var newStr = str.replace(/\w+/g, function(match) { return match.split("").reverse().join(""); }); console.log(newStr); //prints "sihT si a tset gnirts"

ตัวอย่างนี้ย้อนกลับทุกคำในสตริง อย่างที่คุณเห็นการแทนที่ด้วย regex เป็นเครื่องมือที่มีประสิทธิภาพมากใน JavaScript

วิธีการแทนที่จะมีประโยชน์หากคุณต้องการแทนที่รูปแบบการค้นหาเฉพาะด้วยสตริงอื่นหลังจากการประมวลผลสตริงเดิมบางส่วน

นอกจากนี้ยังสามารถใช้เพื่อแก้ไขการจับคู่ที่ไม่ถูกต้องเช่นเพื่อตรวจสอบความถูกต้องของอีเมลและหากเป็นไปได้เพื่อแก้ไขอีเมลที่ไม่ถูกต้อง

ตอนนี้เรารู้แล้วว่า Regex มีประโยชน์แค่ไหนมาเรียนรู้นิพจน์ทั่วไปพื้นฐานและค้นหาสตริง

นิพจน์ทั่วไปพื้นฐาน

แม้ว่านิพจน์ทั่วไปจะเป็นหัวข้อที่กว้างขวาง แต่ก็ง่ายมากที่จะเข้าใจและจดจำ ให้เราพยายามทำความเข้าใจคำศัพท์พื้นฐานที่เกี่ยวข้องกับนิพจน์ทั่วไป

ตัวอักษร

ลิเทอรัลคืออักขระใด ๆ ที่ถูกประเมินว่าเป็นตัวมันเองไม่ใช่ในรูปแบบทั่วไปใด ๆ ดังนั้นจึงwordเป็นนิพจน์ทั่วไปที่ถูกต้องซึ่งจะจับคู่เฉพาะ"word"เท่านั้น

หากคุณต้องการแทนที่อินสแตนซ์ทั้งหมดของคำที่ระบุใน JavaScript คุณสามารถทำได้:

var str = "JavaScript is a very popular programming language. javascript is used in web developement. javascript is very easy to learn."; var newStr = str.replace(/javascript/gi,"js"); console.log(newStr); /* prints "js is a very popular programming language. js is used in web developement. js is very easy to learn." */

สิ่งนี้จะแทนที่ JavaScript ที่เกิดขึ้นทั้งหมดด้วย JS เราทำได้โดยใช้gตัวระบุซึ่งหมายถึงการค้นหาทั่วโลก นั่นคือจะค้นหาเหตุการณ์ทั้งหมดมากกว่าที่จะเกิดขึ้นครั้งแรก

นอกจากนี้ยังมีiตัวระบุ ย่อมาจากการค้นหาแบบไม่คำนึงถึงขนาดตัวพิมพ์ ตรงกับสตริงโดยไม่สนใจตัวพิมพ์

Thus a literal can be used to match a specific character or group of characters.

Meta-characters

A meta-character is used for generic search, such as to search any digit, any character, or any alpha-numeric character. These are some common meta-characters:

  • \d matches any digit, that is, digits from 0 to 9
  • \w matches any alpha-numeric character, That is, alphabets a-z, A-Z and digits 0-9.
  • \s matches any whitespace

Similarly, \D , \W and \S match any non-digit, non-alphanumeric, and non-whitespace characters, respectively. For example, \d\d\d would match any three digits in a row.

Quantifiers

A quantifier is used to quantify any literal or meta-character. It can be used to select multiple occurrences of a given character. There are four types of quantifiers defined in regex:

  • * is used to match 0 or more occurrences of a given character.
  • + is used to match 1 or more occurrences of a given character.
  • . is used to match either no occurrence or 1 occurrence of a given character.
  • {min,max} or {n} can be used to match a number of occurrences in a range or a given number of times n

An example would be the one we used above to reverse every word in a string.

  • \w+ matches every word in a string
  • \w matches any alpha-numeric character
  • \w+ matches one or more occurrences of an alpha-numeric character, that is, every word in a string.

We could also use quantifiers to replace multiple whitespaces with a single whitespace. For example:

var str = "This is a string with multiple whitespaces"; var newStr = str.replace(/\s\s+/g, " "); console.log(newStr); //prints "This is a string with multiple whitespaces"

There are plenty of other uses for quantifiers.

Position meta-characters

There are also position meta-characters which represent a position. For example ^ represents the start of a line, $ represents end of a line, and \b represents word boundaries.

Conclusion

In this article, we learned how important regular expressions are. We also saw how they can be used for searching simple as well as complex search patterns.

This has great potential in programming with text. String-matching algorithms are used in DNA matching and form a significant branch of computer science.

Once you master regex you can use it with JavaScript's match and replace methods to simplify long programs and use it for validation of certain patterns. Regex can also help shorten long programs and make them more understandable.

Now you can use your own creativity and make wonderful regex – so good luck with your new skill.

This was a very basic overview of regular expressions. If you want to master the art of regex, I suggest you to check out Daniel Shiffman's tutorial here.

Hey, I hope you loved this article and learned something. You can find me at my internet home, theabbie.github.io  or my Github. Do checkout my other articles. Thank you.