Trong quá trình làm việc trong các dự án, có nhiều khi bạn cần đếm số lượng từ hoặc ký tự để dùng vào các chức năng khác nhau, như giới hạn số lượng từ, hoặc ký tự trong bài viết ...
Để đếm được số lượng từ và ký tự có nhiều cách trên internet, hôm nay tôi xin giới thiệu một cách mà tôi hay dùng để đếm số từ và ký tự bằng Javascript.
Mã HTML
Đầu tiên chúng ta cần thiết kế khung nhập liệu và hiển thị số từ cũng như số ký tự, mã HTML như sau:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="wrapper">
<div class="count">
<div>
<h5 id="word-count">0</h5>
<p>Từ</p>
</div>
<div>
<h5 id="charac-count">0</h5>
<p>Ký tự</p>
</div>
</div>
<div class="container">
<textarea
id="input-textarea"
rows="12"
placeholder="Nhập dữ liệu..."
></textarea>
</div>
</div>
</body>
</html>
Mã CSS
Làm đẹp mã HTML bằng cách thê mã css như sau:
Ví dụ
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #8bc1f7;
}
.wrapper {
position: absolute;
width: 75vmin;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.container {
background-color: #ffffff;
padding: 30px 20px 20px 20px;
border-radius: 0px 0px 8px 8px;
box-shadow: 0 30px 50px rgba(30, 21, 49, 0.3);
}
.count {
background-color: #0547ad;
width: 100%;
padding: 7px;
position: relative;
display: flex;
font-family: sans-serif;
justify-content: space-around;
text-align: center;
border-radius: 5px 5px 0px 0px;
}
.count p {
color: #ceced7;
}
.count h5 {
color: #ffffff;
font-size: 22px;
}
textarea {
width: 100%;
border: none;
resize: none;
outline: none;
font-size: 16px;
line-height: 28px;
padding: 10px;
max-height: 280px;
color: #0e101a;
box-shadow: 0 20px 65px rgba(61, 139, 190, 0.33);
}Mã JavaScript
Để đếm và hiển thị số từ, số ký tự chúng ta thêm mã JS sau:
Ví dụ
let inputTextArea = document.getElementById("input-textarea");
let characCount = document.getElementById("charac-count");
let wordCount = document.getElementById("word-count");
inputTextArea.addEventListener("input", () => {
characCount.textContent = inputTextArea.value.length;
let txt = inputTextArea.value.trim();
wordCount.textContent = txt.split(/\s+/).filter((item) => item).length;
});Code mẫu hoàn chỉnh
Đây là code mẫu hoàn chỉnh theo hướng dẫn trên đây
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<style media="screen">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #8bc1f7;
}
.wrapper {
position: absolute;
width: 75vmin;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.container {
background-color: #ffffff;
padding: 30px 20px 20px 20px;
border-radius: 0px 0px 8px 8px;
box-shadow: 0 30px 50px rgba(30, 21, 49, 0.3);
}
.count {
background-color: #0547ad;
width: 100%;
padding: 7px;
position: relative;
display: flex;
font-family: sans-serif;
justify-content: space-around;
text-align: center;
border-radius: 5px 5px 0px 0px;
}
.count p {
color: #ceced7;
}
.count h5 {
color: #ffffff;
font-size: 22px;
}
textarea {
width: 100%;
border: none;
resize: none;
outline: none;
font-size: 16px;
line-height: 28px;
padding: 10px;
max-height: 280px;
color: #0e101a;
box-shadow: 0 20px 65px rgba(61, 139, 190, 0.33);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="count">
<div>
<h5 id="word-count">0</h5>
<p>Từ</p>
</div>
<div>
<h5 id="charac-count">0</h5>
<p>Ký tự</p>
</div>
</div>
<div class="container">
<textarea
id="input-textarea"
rows="12"
placeholder="Nhập dữ liệu..."
></textarea>
</div>
</div>
<!-- Script -->
<script type="text/javascript">
let inputTextArea = document.getElementById("input-textarea");
let characCount = document.getElementById("charac-count");
let wordCount = document.getElementById("word-count");
inputTextArea.addEventListener("input", () => {
characCount.textContent = inputTextArea.value.length;
let txt = inputTextArea.value.trim();
wordCount.textContent = txt.split(/\s+/).filter((item) => item).length;
});
</script>
</body>
</html>