Bạn có biết rằng chuỗi .replace() phương pháp chấp nhận chức năng gọi lại? Tôi chỉ phát hiện ra nó ngày hôm nay và nghĩ rằng tôi muốn chia sẻ.
Bạn cần chức năng này để làm gì? Tại sao nó tồn tại? Tôi sẽ trả lời tất cả những câu hỏi này khi bạn xem qua bài viết này.
Các replace() Phương pháp
Các replace() phương thức chuỗi thay thế các ký tự văn bản trong một chuỗi. Nó có hai đối số: chuỗi cần thay thế và giá trị mà nó sẽ được thay thế.
Với phương pháp này, bạn có thể thay thế các ký tự chuỗi (như “xin chào”) hoặc các ký tự khớp với mẫu RegEx (như /hi/).
Đây là cú pháp của phương pháp này:
String.replace(string/pattern, replacer)
Dưới đây là một số ví dụ cho thấy cách sử dụng phương pháp này:
const sentence = "Hi my name is Dillion"
const replaced1 = sentence.replace("Dillion", "JavaScript")
console.log(replaced1)
// "Hi my name is JavaScript"
const replaced2 = sentence.replace(/\s/g, "-")
console.log(replaced2)
// "Hi-my-name-is-Dillion"
Nhưng replacer đối số cũng có thể là một chức năng.
Tại sao bạn cần sử dụng một hàm làm phương thức thay thế?
Lý do là đôi khi, bạn muốn làm điều gì đó với những ký tự khớp với mẫu đã chỉ định.
Đây là cú pháp:
String.replace(/pattern/, function(matched){
// do something with matched and return
// the replace value
})
Nếu bạn đang sử dụng mẫu chuỗi ký tự như “Dillion”, thì bạn không cần hàm gọi lại vì bạn đã biết rằng bạn chỉ khớp “Dillion” trong câu.
Nhưng với các mẫu RegEx, nó có thể khớp với nhiều thứ. Đây là một ví dụ:
const sentence = "I am a good guy and you too"
const replaced = sentence.replace(/g\S*/g, "😂")
console.log(replaced)
// I am a 😂 😂 and you too
Mẫu biểu thức chính quy khớp với tất cả các từ bắt đầu bằng “g” và hai từ khớp với nhau; “giỏi” và “thằng”. Trong trường hợp này, nếu chúng tôi muốn làm điều gì đó với giá trị phù hợp, chúng tôi sẽ cần gọi lại.
Đây là một ví dụ khác:
const sentence = "I am a good guy and you too"
const replaced = sentence.replace(/g\S*/g, function(matched){
console.log("matched", matched)
return "😂"
})
console.log(replaced)
// matched good
// matched guy
// I am a 😂 😂 and you too
Ví dụ về những điều chúng ta có thể làm với các giá trị phù hợp là gì? Có rất nhiều kịch bản, nhưng tôi sẽ sử dụng một trường hợp đã giúp tôi phát hiện ra điều này.
Cách tìm và thay thế URL trong văn bản bằng RegEx
Trên các nền tảng như WhatsApp và Twitter, bạn sẽ phát hiện ra rằng khi bạn tạo một bài đăng hoặc tin nhắn có liên kết, liên kết đó có màu khác với văn bản khác và hoạt động giống như một liên kết. Sau đó, khi được nhấp vào, nó sẽ điều hướng người dùng đến một trang riêng.
Làm thế nào để họ đạt được điều này? Ý tưởng là thay thế các liên kết trong văn bản bằng một phần tử có một số kiểu và cũng hoạt động như một liên kết.
Đây là cách tôi đã làm điều này với JavaScript:
const text = "My website is https://dillionmegida.com and I write on http://freecodecamp.org/"
const regex = /https?:\/\/\S*/gi
const modifiedText = text.replace(regex, (url) => {
return `<a class="text--link" href="https://www.freecodecamp.org/news/how-to-pass-callback-functions-to-string-replace-javascript/${url}">${url}</a>`
})
console.log(modifiedText)
// My website is <a class="text--link" href="https://dillionmegida.com">https://dillionmegida.com</a> and I write on <a class="text--link" href="http://freecodecamp.org/">http://freecodecamp.org/</a>
Biểu thức chính quy khớp với các mẫu có “https://…” (với s tùy chọn). Sử dụng gọi lại, tôi có thể nhận được url khớp với biểu thức chính quy và sử dụng biểu thức chính quy đó để tạo chuỗi thẻ liên kết có lớp “liên kết văn bản”.
Với chuỗi trả về này, tôi có thể đưa nó vào DOM. Trong trường hợp của tôi, tôi đang sử dụng React, vì vậy tôi đã sử dụng một cách nguy hiểmSetInnerHTML để đưa nó vào một đoạn văn. Tôi có thể chỉ định màu cho lớp “liên kết văn bản” trong biểu định kiểu của mình.
Phần kết luận
Chúng tôi học những điều mới mỗi ngày và tôi hy vọng hôm nay bạn đã học được điều gì đó về JavaScript – chức năng gọi lại trong String.replace().
Ngoài ra, trong bài viết này, tôi đã chỉ ra một trường hợp sử dụng tốt để tận dụng chức năng này.
Vui lòng chia sẻ điều này nếu bạn thấy nó hữu ích.
