Trong JavaScript, có một số cách khác nhau để lọc ra khoảng trắng khỏi 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 của bạn bằng cách chỉ cho bạn cách thực hiện theo năm cách:
- Sử dụng các vòng lặp
- Sử dụng Phương pháp Mảng:Phương thức Tách / Lọc / Nối
- Sử dụng các phương thức mảng:Tách / Nối
- Sử dụng phương pháp thay thế
Sử dụng vòng lặp
Khi chúng ta sử dụng vòng lặp for, chúng ta phải khai báo một biến chuỗi mới trước vòng lặp để chúng ta có thể thêm vào nó khi tiếp tục.
<!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 xem xét từng ký tự riêng lẻ để xem đó có phải là ký tự khoảng trắng hay không. Nếu không, nó sẽ thêm nó vào biến newStr. Để phục vụ mục đích của chúng tôi ở đây, chúng tôi chèn nó vào Mô hình Đối tượng Tài liệu (DOM) để chúng tôi có thể nhìn thấy nó trên màn hình. Nếu bạn cần sử dụng nó ở nơi khác trong mã của mình, bạn sẽ trả về biến newStr.
Sử dụng phương pháp mảng:Phương thức tách / lọc / nối
Liên quan chặt chẽ đến phương thức vòng lặp được giải thích ở trên, phương thức tách / lọc lấy một chuỗi, chia nó thành một mảng và sau đó sử dụng bộ lọc phương thức ES6 để loại bỏ khoảng trắng. Đây là cách thực hiện:
<!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> Sử dụng phương pháp mảng:Tách / Nối
Trong phần trước, chúng ta đã sử dụng tách, lọc và nối để loại bỏ khoảng trắng khỏi một chuỗi. Trong thực tế, chúng ta chỉ cần sử dụng các phương thức tách và nối nếu chúng ta sử dụng phương thức mảng. Tất cả những gì chúng ta cần làm là chia nhỏ không gian và sau đó ghép từng nhân vật vào!
<!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> Thật là một lối tắt nhỏ thú vị! Bạn có thể tách một ký tự mà bạn chọn để cắt hoàn toàn ký tự đó ra khỏi chuỗi và sau đó nối mảng lại với nhau trên từng ký tự để lấy chuỗi của bạn.
Sử dụng Phương pháp Thay thế:
Phương thức Replace rất hữu ích khi bạn muốn sử dụng RegEx để lọc ra tất cả các khoảng trắng trong chuỗi của mình. Chúng tôi cần sử dụng RegEx ở đây vì thay thế, theo định nghĩa, thay thế phiên bản đầu tiên của những gì nó đang tìm kiếm. Nếu chúng ta có nhiều khoảng trắng trong chuỗi của mình, phương thức Replace sẽ chỉ lấy ra khoảng trắng đầu tiên - trừ khi chúng tôi sử dụng biểu thức chính quy để xác định khoảng trắng.
Cờ toàn cục ở cuối biểu thức chính quy là thứ cho phép chúng tôi tìm kiếm và thay thế cho nhiều trường hợp.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
<!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(" ", "");
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à một ký tự khoảng trắng và dấu + cho biết chúng ta đang tìm kiếm một hoặc nhiều ký tự khoảng trắng được nhóm thành một hàng. G ở cuối biểu thức, như một lời nhắc nhở, cho biết chúng ta đang tìm kiếm nhiều nhóm ký tự khoảng trắng khác nhau.
Kết luận
Trong bài viết này, chúng tôi đã đề cập đến bốn cách để loại bỏ khoảng trắng từ việc lưu trữ trong JavaScript. Chúng tôi đã sử dụng các vòng lặp, phương pháp lọc, phương thức tách / nối và biểu thức chính quy. Học cách thực hiện những điều cơ bản này trong JavaScript sẽ cung cấp cho bạn các công cụ cần thiết để giải quyết các vấn đề thậm chí còn phức tạp hơn trong JavaScript khi bạn tiến bộ trên hành trình của mình!