Trong JavaScript, có vài cách khác nhau để lọc bỏ khoảng trắng (whitespace) từ chuỗi. Bài viết này cố gắng minh họa các cách bạn có thể làm điều đó với các ký tự khoảng trắng trong chuỗi bằng cách chỉ cho bạn 4 cách:
- Dùng vòng lặp (Loops)
- Dùng phương thức mảng: Split/Filter/Join
- Dùng phương thức mảng: Split/Join
- Dùng phương thức Replace
1. Dùng vòng lặp
Khi dùng vòng lặp for, chúng ta phải khai báo biến chuỗi mới trước vòng lặp để thêm vào khi duyệt.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style> body { font-family: 'Roboto', Courier, monospace } </style>
<script>
const handleSubmit = str => {
// loop
let newStr = "";
for(let i = 0; i < str.length; i++) {
if(str[i] !== " ") {
newStr += str[i];
}
}
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html>
Vòng lặp nhìn từng ký tự riêng lẻ xem có phải ký tự khoảng trắng không. Nếu không, thêm vào biến newStr. Để phục vụ mục đích, chúng ta chèn vào DOM để thấy trên màn hình. Nếu cần dùng nơi khác trong mã, bạn sẽ return biến newStr.
2. Dùng phương thức mảng: Split/Filter/Join
Gần giống phương pháp vòng lặp, phương pháp split/filter lấy chuỗi, tách thành mảng rồi dùng phương thức filter ES6 loại bỏ khoảng trắng. Cách làm:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style> body { font-family: 'Roboto', Courier, monospace } </style>
<script>
const handleSubmit = str => {
// split/Filter
const splitted = str.split('');
const filtered = splitted.filter(char => {
return char !== " ";
})
let newStr = filtered.join('');
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html>
3. Dùng phương thức mảng: Split/Join
Ở phần trước, chúng ta dùng split, filter và join để xóa khoảng trắng. Thực tế, chúng ta chỉ cần split và join nếu dùng phương thức mảng. Chỉ cần split trên khoảng trắng rồi join từng ký tự!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style> body { font-family: 'Roboto', Courier, monospace } </style>
<script>
const handleSubmit = str => {
// split/join
const splitted = str.split(' ');
let newStr = splitted.join('');
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html>
Mẹo thú vị! Bạn có thể split trên ký tự tùy chọn để cắt ký tự đó hoàn toàn khỏi chuỗi rồi join mảng lại trên ký tự đơn để lấy chuỗi.
4. Dùng phương thức Replace:
Phương thức replace tuyệt vời khi muốn dùng RegEx lọc tất cả khoảng trắng trong chuỗi. Cần dùng RegEx ở đây vì replace, theo định nghĩa, chỉ thay thế instance đầu tiên tìm thấy. Nếu có nhiều khoảng trắng, replace chỉ lấy khoảng trắng đầu tiên – trừ khi dùng regular expression cho whitespace.
Cờ global (g) cuối regex là thứ cho phép tìm và thay thế nhiều hơn một instance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style> body { font-family: 'Roboto', Courier, monospace } </style>
<script>
const handleSubmit = str => {
let regex = /\s+/g
let newStr = str.replace(regex, "");
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html>
\s là ký tự whitespace và + chỉ chúng ta tìm một hoặc nhiều ký tự whitespace liền nhau. g cuối biểu thức nhắc nhở chúng ta tìm nhiều nhóm ký tự whitespace khác nhau.
Kết luận
Trong bài viết này chúng ta đã bao gồm 4 cách xóa khoảng trắng khỏi chuỗi trong JavaScript. Chúng ta dùng vòng lặp, phương thức filter, split/join và regular expressions. Học cách làm những việc cơ bản này trong JavaScript sẽ cho bạn công cụ giải quyết vấn đề phức tạp hơn khi bạn tiến bộ!