Đếm số ký tự trong tiêu đề trang web bằng JavaScript

JavaScript Examples | 13/06/2025 by Học Javascript

Trong lập trình web, việc tương tác và xử lý các thành phần trên trang là một kỹ năng quan trọng mà người học cần thành thạo. Một trong những phần tử quen thuộc của một trang web là tiêu đề (title) – thông tin hiển thị trên tab trình duyệt. Bài tập "Đếm số ký tự trong tiêu đề trang web bằng JavaScript" sẽ giúp người học rèn luyện kỹ năng thao tác với Document Object Model (DOM) và thực hành xử lý chuỗi cơ bản trong JavaScript. Thông qua bài tập này, người học sẽ hiểu rõ hơn cách truy xuất dữ liệu từ trang web và áp dụng các phương thức đơn giản để tính toán và hiển thị kết quả, từ đó làm nền tảng cho các kỹ thuật lập trình web phức tạp hơn sau này.

Mục tiêu bài tập cách lấy tiêu đề trang web bằng JavaScript

Hiểu cách lấy tiêu đề trang web bằng JavaScript

Người học cần nắm được cách truy cập và lấy thông tin tiêu đề của trang web thông qua thuộc tính document.title trong JavaScript.
Hiểu rõ rằng document.title trả về nội dung của thẻ <title> trong phần <head> của tài liệu HTML, là nội dung hiển thị trên tab trình duyệt.
Rèn luyện kỹ năng đọc và khai thác dữ liệu từ DOM mà không cần tác động thủ công vào mã HTML.

Thực hành đếm số lượng ký tự trong một chuỗi

Sử dụng thuộc tính .length để xác định số lượng ký tự có trong chuỗi tiêu đề vừa lấy được.
Hiểu được sự khác biệt khi đếm ký tự bao gồm hoặc không bao gồm khoảng trắng, dấu câu (nếu yêu cầu mở rộng).
Luyện tập cách xử lý chuỗi đơn giản như cắt bớt khoảng trắng (trim()) hoặc thay thế chuỗi (replace()).

Ứng dụng các kiến thức cơ bản về DOM và xử lý chuỗi trong JavaScript

Áp dụng kỹ năng thao tác với DOM để không chỉ lấy dữ liệu mà còn cập nhật nội dung trang web (ví dụ: hiển thị kết quả đếm lên trang).
Thực hành kỹ thuật lập trình JavaScript cơ bản: khai báo biến, thao tác chuỗi, in kết quả ra console hoặc giao diện người dùng.
Tăng cường khả năng tư duy lập trình logic: lấy dữ liệu → xử lý dữ liệu → hiển thị kết quả.
Đặt nền tảng cho những bài học phức tạp hơn như theo dõi thay đổi trong DOM, tối ưu hóa xử lý dữ liệu, và xây dựng các tính năng động cho trang web.

Yêu cầu bài tập

Lấy tiêu đề (title) của trang web

Sử dụng JavaScript để truy xuất tiêu đề hiện tại của trang web thông qua đối tượng document.
Cụ thể, sử dụng thuộc tính document.title để lấy chuỗi văn bản bên trong thẻ <title>...</title> trong phần <head> của trang HTML.
Đảm bảo việc lấy tiêu đề thực hiện tự động bằng mã JavaScript, không phải nhập tay hoặc gán cứng.

Tính số ký tự của tiêu đề

Sau khi lấy được chuỗi tiêu đề, tính số lượng ký tự của chuỗi đó bằng cách sử dụng thuộc tính .length.

Số lượng ký tự được tính bao gồm:

Các ký tự chữ cái (hoa và thường),
Các ký tự số,
Các dấu câu,
Khoảng trắng,
Các ký tự đặc biệt (nếu có).
Không cần loại bỏ khoảng trắng hay ký tự đặc biệt trừ khi bài yêu cầu nâng cao thêm.

Hiển thị kết quả

Có 2 cách để hiển thị kết quả:

In ra console:

Sử dụng console.log() để in số lượng ký tự tiêu đề vào bảng console trong trình duyệt.

Hiển thị trên giao diện trang web:

Tạo một phần tử HTML như <p>, <div>, hoặc <span>.
Dùng JavaScript để gán nội dung kết quả vào phần tử đó, thông qua innerText, innerHTML, hoặc textContent.

Người học có thể chọn thực hiện một trong hai cách trên hoặc thực hiện đồng thời cả hai để rèn luyện thêm.

Yêu cầu bổ sung (khuyến khích)

Giao diện hiển thị (nếu có) cần rõ ràng, dễ quan sát.
Mã nguồn JavaScript phải ngắn gọn, dễ đọc, dễ hiểu.
Khuyến khích kiểm tra lại kết quả bằng cách thay đổi tiêu đề trang và thử lại để đảm bảo tính chính xác.

Các bước hướng dẫn cách lấy tiêu đề trang web bằng JavaScript

Lấy tiêu đề trang web

Để lấy nội dung tiêu đề của trang web, sử dụng thuộc tính document.title trong JavaScript.
document.title sẽ trả về một chuỗi (string) chứa văn bản nằm trong thẻ <title> ở phần <head> của trang HTML.
Ví dụ đơn giản:

const pageTitle = document.title;

Lúc này, biến pageTitle sẽ chứa nội dung tiêu đề hiện tại của trang.

Đếm số ký tự

Sau khi đã lấy được tiêu đề, ta tiến hành đếm số lượng ký tự có trong tiêu đề đó.
Dùng thuộc tính .length của chuỗi để lấy ra số lượng ký tự.

Cách thực hiện:

const titleLength = pageTitle.length;

Giá trị của titleLength sẽ là tổng số ký tự trong tiêu đề, bao gồm:

Chữ cái,
Số,
Khoảng trắng,
Dấu câu,
Ký tự đặc biệt.

Hiển thị kết quả

Cách 1: In kết quả ra console

Dùng console.log() để in ra giá trị số lượng ký tự.
Ví dụ:

console.log("Số ký tự trong tiêu đề là:", titleLength);

Kết quả sẽ hiển thị trong bảng console của trình duyệt, thường truy cập bằng phím F12 → tab Console.

Cách 2 (Nâng cao): Hiển thị trực tiếp trên giao diện

Tạo sẵn một thẻ HTML như <div>, <p>, hoặc <span> trong phần thân <body>.
Gán nội dung số lượng ký tự vào phần tử này bằng JavaScript.
Ví dụ HTML:

<p id="result"></p>

Ví dụ JavaScript:

document.getElementById('result').innerText = `Số ký tự trong tiêu đề là: ${titleLength}`;

Kết quả sẽ được hiển thị trực tiếp lên trang web cho người dùng nhìn thấy ngay lập tức.

Gợi ý cách lấy tiêu đề trang web bằng JavaScript

Tạo một file HTML đơn giản có <title> cụ thể

Tạo một file HTML với cấu trúc cơ bản, trong đó có phần <head> chứa thẻ <title> để đặt tiêu đề cho trang web.
Ví dụ về cấu trúc cơ bản của file HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Đếm số ký tự trong tiêu đề</title>
</head>
<body>
    <h1>Kiểm tra số ký tự trong tiêu đề trang</h1>
    <p id="result"></p>
</body>
</html>

Trong ví dụ trên, tiêu đề trang được đặt là "Đếm số ký tự trong tiêu đề".

Thêm mã JavaScript vào trong file HTML (trong thẻ <script> hoặc file .js riêng)

Bạn có thể nhúng trực tiếp mã JavaScript vào file HTML trong thẻ <script> hoặc tạo một file JavaScript riêng và liên kết vào file HTML.

Cách nhúng mã JavaScript trực tiếp trong HTML:

<script>
    const pageTitle = document.title;
    const titleLength = pageTitle.length;
    console.log("Số ký tự trong tiêu đề là:", titleLength);

    document.getElementById('result').innerText = `Số ký tự trong tiêu đề là: ${titleLength}`;
</script>

Hoặc tạo một file .js riêng:

File script.js:

const pageTitle = document.title;
const titleLength = pageTitle.length;
console.log("Số ký tự trong tiêu đề là:", titleLength);

document.getElementById('result').innerText = `Số ký tự trong tiêu đề là: ${titleLength}`;

Sau đó, liên kết file script.js vào trong thẻ <body> của file HTML:

<script src="script.js"></script>

Thực hiện các bước lấy và đếm số ký tự theo yêu cầu

Đảm bảo thực hiện đầy đủ các bước như đã hướng dẫn:

Lấy tiêu đề trang (document.title).
Đếm số ký tự (.length).
Hiển thị kết quả ra console hoặc giao diện người dùng.

Mở rộng cách lấy tiêu đề trang web bằng JavaScript

Loại bỏ các khoảng trắng đầu/cuối trước khi đếm (trim())

Để đảm bảo rằng việc đếm số ký tự không bao gồm khoảng trắng thừa ở đầu và cuối chuỗi, có thể sử dụng phương thức .trim() để loại bỏ chúng.
Cách thực hiện:

const pageTitle = document.title.trim();  // Loại bỏ khoảng trắng đầu/cuối
const titleLength = pageTitle.length;
console.log("Số ký tự trong tiêu đề là:", titleLength);
document.getElementById('result').innerText = `Số ký tự trong tiêu đề là: ${titleLength}`;

Sau khi dùng .trim(), khoảng trắng thừa sẽ không bị tính vào số ký tự.

Tính số ký tự không bao gồm dấu cách (replace(/\s/g, ''))

Nếu yêu cầu tính số ký tự mà không bao gồm bất kỳ dấu cách nào trong tiêu đề (ví dụ: nếu muốn đếm số ký tự chỉ gồm chữ cái và số), bạn có thể thay thế tất cả các khoảng trắng bằng một chuỗi rỗng ('') trước khi tính độ dài.
Cách thực hiện:

const pageTitleNoSpaces = document.title.replace(/\s/g, '');  // Loại bỏ tất cả khoảng trắng
const titleLength = pageTitleNoSpaces.length;
console.log("Số ký tự không bao gồm khoảng trắng là:", titleLength);
document.getElementById('result').innerText = `Số ký tự không bao gồm khoảng trắng là: ${titleLength}`;

Trong đoạn mã trên, replace(/\s/g, '') thay thế tất cả các khoảng trắng trong chuỗi tiêu đề bằng chuỗi rỗng, giúp đếm được số ký tự không có dấu cách.

Cập nhật kết quả khi tiêu đề trang thay đổi

Nếu bạn muốn theo dõi sự thay đổi tiêu đề của trang và cập nhật lại kết quả mỗi khi tiêu đề thay đổi, bạn có thể sử dụng MutationObserver để lắng nghe sự kiện thay đổi của thẻ <title>.
Cách thực hiện:

// Tạo một MutationObserver để theo dõi thay đổi trong thẻ <title>
const titleElement = document.querySelector('title');

const observer = new MutationObserver(() => {
    const updatedTitle = document.title;
    const titleLength = updatedTitle.length;
    console.log("Tiêu đề mới có số ký tự là:", titleLength);
    document.getElementById('result').innerText = `Tiêu đề mới có số ký tự là: ${titleLength}`;
});

// Cấu hình để theo dõi sự thay đổi nội dung trong thẻ <title>
observer.observe(titleElement, { childList: true });

Sự kiện này sẽ được kích hoạt mỗi khi tiêu đề trang thay đổi, và kết quả sẽ được cập nhật tự động lên giao diện.

Kết quả đầy đủ :

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Event Bubbling</title>
</head>
<body>
    <h2>Kiểm tra độ dài tiêu đề</h2>
    <p id="result">Chưa có thay đổi tiêu đề</p>
    <button onclick="document.title = 'Tiêu đề mới thay đổi'">Thay đổi tiêu đề</button>

    <script>
        // Tạo một biến lưu tiêu đề hiện tại
        let lastTitle = document.title;

        // Thiết lập interval để kiểm tra tiêu đề mỗi 500ms
        setInterval(() => {
            if (document.title !== lastTitle) {
                lastTitle = document.title;
                const titleLength = lastTitle.length;
                console.log("Tiêu đề mới có số ký tự là:", titleLength);
                document.getElementById('result').innerText = `Tiêu đề mới có số ký tự là: ${titleLength}`;
            }
        }, 500);
    </script>
</body>
</html>

Kết bài

Bài tập "Đếm số ký tự trong tiêu đề trang web bằng JavaScript" không chỉ giúp người học làm quen với các kỹ năng cơ bản của JavaScript như thao tác với DOM và xử lý chuỗi mà còn mở rộng khả năng sử dụng các công cụ mạnh mẽ như MutationObserver để theo dõi sự thay đổi trên trang. Qua việc thực hành bài tập này, người học sẽ cải thiện khả năng tư duy logic, cũng như nắm vững cách áp dụng JavaScript để tương tác và thay đổi nội dung của trang web một cách động và hiệu quả.

Đây là một bước đầu quan trọng để tiến tới việc xây dựng các trang web và ứng dụng phức tạp hơn, nơi việc xử lý dữ liệu và giao diện người dùng luôn đóng vai trò quan trọng. Chúc bạn thực hành thành công và khám phá thêm nhiều khả năng sáng tạo với JavaScript trong các dự án web của mình!