วิธีนับคำทั้งหมดบนหน้าเว็บด้วย Vanilla JavaScript

เรียนรู้วิธีนับคำทั้งหมดบนส่วนเฉพาะของเว็บไซต์ด้วย Vanilla JavaScript

บางครั้งการนับคำทั้งหมดในโพสต์หรือหน้าเว็บมีประโยชน์ คุณกำลังสร้างฟีเจอร์ Word Counter สำหรับเว็บไซต์ไหม? คุณสามารถใช้โค้ดสนิปเพท JavaScript ต่อไปนี้ทำได้ — และรวดเร็ว

var wordsInPost = wordCount(document.querySelectorAll(".posts-content")) function wordCount(words) { var count = 0 for (var i = 0; i < words.length; i++) { count += words[i].textContent.split(" ").length } return count } console.log(wordsInPost)

คัดลอกและวางโค้ด JS ลงในคอนโซลเบราว์เซอร์เพื่อทดสอบบนเว็บไซต์ใดๆ เพียงแค่แน่ใจว่าคุณเลือกตัวเลือก (selector) ที่ถูกต้อง

วิธีนับคำทั้งหมดบนหน้าเว็บด้วย Vanilla JavaScript

สิ่งที่ฟังก์ชัน JavaScript ทำ

นับคำทั้งหมดภายในอิลีเมนต์เป้าหมาย ในตัวอย่างข้างต้น เราเป้าหมายที่ตัวเลือกคลาส .post-content
การนับคำรวมทุกอิลีเมนต์ข้อความ (หัวข้อ, ย่อหน้า, รายการ, blockquotes ฯลฯ) ทุกอย่างที่เกี่ยวข้อง
ไม่นับ whitespace, คอมมา ฯลฯ

วิธีใช้ฟังก์ชัน JavaScript

แทนที่คลาส .post-content ด้วยคลาส, id, หรือตัวเลือกอิลีเมนต์ที่คุณมีสำหรับโพสต์หรือหน้าเว็บ

หมายเหตุ: คุณสามารถใช้ getElementsByClassName() แทน querySelectorAll() ได้

คุณสามารถทดสอบด้วยโค้ดในคอนโซลเบราว์เซอร์โปรด หรือบน CodePen นี้