در این مقاله قصد دارم به شما نشان دهم که چگونه با استفاده از جاوا اسکریپت کلمه شمارنده بسازید. من از شمارشگر کلمات برای شمارش کلمات مقالاتم استفاده می کنم. ما قصد داریم شمارشگر کلمات ساده ای بسازیم که تعداد کلمات موجود در ناحیه متن را نشان می دهد.
توضیح اولیه کلمه شمارنده که می خواهیم بسازیم.
چگونه می خواهیم کلمات را با استفاده از جاوا اسکریپت بشماریم. اول از همه، ما فضای (trim();) را از مقدار textarea که فاصله را از دو طرف رشته حذف می کند، برش می دهیم. سپس فضای موجود بین رشته را با یک فاصله (” “) جایگزین می کنیم، به طوری که اگر کاربر دو فاصله یا بیشتر اضافه کرده باشد، با یک فاصله ((“”) به (“”) جایگزین شود. پس از آن، می‌خواهیم آن رشته را با روش split() به آرایه تبدیل کنیم، رشته را با فاصله تقسیم می‌کنیم (split(“”))، و تمام، سپس طول کلمات را بدست می‌آوریم. برای جزئیات بیشتر ادامه مطلب را بخوانید.
آموزش تصویری برای واژه شمار با استفاده از جاوا اسکریپت.
https://www.youtube.com/watch?v=reBxrp-Zmic
شمارش کلمات با استفاده از جاوا اسکریپت.
بنابراین، بیایید شروع به ساخت آن کنیم. اول از همه، من دو فایل index.html و index.css ساخته ام. سپس فایل css را به فایل html پیوند داد. من جاوا اسکریپت را در فایل html در تگ اسکریپت زیر تگ بسته شدن بدنه اضافه کرده ام. می توانید فایل دیگری برای جاوا اسکریپت با پسوند js ایجاد کنید و آن را به فایل html پیوند دهید. ().
در زیر مراحل ساخت واژه شمار آورده شده است.
مرحله 1: برای نمایش تعداد کلمات، ناحیه متن، دکمه و شمارنده را اضافه کنید.
بنابراین در زیر ابتدا ساختار html اولیه را ایجاد کردم. و افزود:
- برچسب H2 برای عنوان.
- تگ P برای نمایش تعداد کلمات.
- ناحیه متن
- دکمه، با کلیک بر روی آن، تعداد کلمات موجود در ناحیه متن ظاهر می شود.
کد html زیر را می توانید ببینید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://dev.to/maketechstuff/index.css">
</head>
<body>
<div class="box">
<h2>Word counter</h2>
<p class="counter"></p>
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
<button type="button" class="button">Count</button>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
background-color: #fff;
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 400px;
text-align: center;
}
h2{
font-size: 40px;
margin-bottom: 20px;
}
.counter{
font-size: 30px;
font-weight: bold;
text-align: left;
}
#textarea{
width: 100%;
height: 100%;
border: 2px solid #000;
font-size: 30px;
}
.button{
color: #fff;
background-color: blue;
font-size: 30px;
border: none;
padding: 10px 20px;
border-radius: 4px;
}
خروجی:
اکنون ساختار اولیه انجام شده است. حالا بیایید قابلیتی برای شمارش تعداد کلمات موجود در ناحیه متن اضافه کنیم.
مرحله 2: جاوا اسکریپت را برای شمارش تعداد کلمات اضافه کنید.
بنابراین ابتدا، متغیرهایی را برای ناحیه متن، شمارنده (که در آن تعداد کلمات را نشان می دهیم) و دکمه تعریف کرده ام.
let counter = document.querySelector('.counter');
let button = document.querySelector('.button');
let textarea = document.getElementById('textarea');
اکنون رویداد onclick را اضافه کنید که تابع را فراخوانی می کند. در این تابع یک متغیر دیگر با کلمات نام ایجاد کرده ام. که در آن طول کلمات را ذخیره می کنیم.
بنابراین، برای پیدا کردن طول یا نه. از کلمات ابتدا مقدار ناحیه متن را برش می دهیم، که فضا را از طرفین حذف می کند.
button.onclick = function(){
let words = textarea.value.trim();
}
حالا بعد از برش مقدار. فضاها یا فضاها را با یک فاصله جایگزین می کنیم. به عنوان مثال، اگر کاربر بنویسد “صبح بخیر”، یک فاصله در آن وجود دارد، پس از جایگزینی آن، به نظر می رسد “صبح بخیر”. اگر کاربر «صبح بخیر» را بنویسد، با یک فاصله جایگزین می‌شود، شبیه «صبح بخیر» خواهد بود. همانطور که می بینید، ما Space ها یا Space ها را با Space تک جایگزین می کنیم.
button.onclick = function(){
let words = textarea.value.trim().replace(/\s+/g," ");
}
اکنون پس از جایگزینی تمام فاصله بین مقدار با یک فاصله. حالا بیایید آن مقدار را با روش تقسیم به آرایه تبدیل کنیم. می‌خواهیم مقدار ناحیه متن را با یک split(” “) تقسیم کنیم.
button.onclick = function(){
let words = textarea.value.trim().replace(/\s+/g," ").split(" ");
}
اکنون کلمه شمارش تقریباً انجام شده است، اما هنگامی که در ابتدا در ناحیه متن یک فاصله وجود دارد، یک کلمه را می شمارد. بنابراین، بیایید آن را درست کنیم.
if(words[0] == ""){
words.length = 0;
}
اکنون کلمه شمار آماده است. بیایید تعداد کلمات را در نام کلاس شمارنده نشان دهیم.
counter.innerHTML = 'Words :' + words.length;
خروجی:
همچنین ممکن است دوست داشته باشید:
کد نهایی:
کد نهایی را اینجا پیدا خواهید کرد.
بنابراین به این ترتیب می توانید با استفاده از جاوا اسکریپت کلمه شمارنده بسازید. امیدوارم ازش خوشتان بیاید. اگر سوال یا پیشنهادی دارید می توانید در قسمت نظرات بنویسید.
