Cách xây dựng trình tạo văn bản Lorem Ipsum bằng JavaScript và Vite

Chí Vỹ

Lorem ipsum là text mà lập trình viên và nhà thiết kế trên khắp thế giới dùng làm placeholder. Nếu tương tác với nhiều prototype UI, bạn có thể đã dùng tới nó trước đây.

Lorem ipsum text

Ở bài viết này, hãy cùng nhau học cách xây dựng một trình tạo Lorem ipsum linh hoạt bằng Vite và JavaScript. Từ đó, bạn sẽ cải thiện kỹ năng lập trình theo thời gian.

Tại sao Lorem Ipsum lại được sử dụng phổ biến?

Nguyên nhân chính là bởi nó cho phép người dùng hoặc người xem hiểu được hình thức trực quan của tài liệu hoặc nguyên mẫu mà không tập trung quá nhiều vào placeholder.

Hãy tưởng tượng bạn đang thiết kế một tạp chí. Thay vì gặp rắc rối khi sao chép văn bản từ các nguồn khác nhau để làm cho thiết kế chân thực nhất có thể, bạn chỉ cần sao chép văn bản placeholder lorem ipsum tiêu chuẩn và sử dụng văn bản đó thay thế.

Lorem ipsum phổ biến tới mức bạn thậm chí không cần phải xác định nó là một text placeholder - hầu như ai cũng ngay lập tức nhận ra nó là một văn bản bổ sung.

Thiết lập dự án và server phát triển

Bạn sẽ dùng công cụ build Vite để thiết lập mọi thứ. Đảm bảo đã cài Node.js và Node Package Manager (NP) hoặc Yarn trên máy, sau đó mở terminal và chạy:

npm create vite

Hoặc:

yarn create vite

Điều này tạo ra một dự án Vite trống. Nhập tên dự án, đặt framework vào Vanilla và biến “Vanilla”. Sau khi làm việc đó, điều hướng tới thư mục dự án bằng lệnh cd, sau đó chạy:

npm I

Hoặc:

Yarn

Sau khi cài đặt tất cả các phần phụ thuộc, mở dự án trong trình chỉnh sửa lựa chọn, sau đó chỉnh sửa cấu trúc dự án để trông giống như sau:

Node_module

Giờ làm rõ nội dung của file index.html và thay nó bằng:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lorem Ipsum Generator</title>
  </head>
  <body>
    <h1>Lorem Ipsum Generator</h1>
    <div id="app">
      <div class="controls">
        <form>
          <div class="control">
            <label for="w-count">Số từ trên mỗi đoạn</label>
            <div>
              <input type="range" id="w-count" min="10" max="100" value="25" step="10">
              <span id="w-count-label">25</span>
            </div>
          </div>
          <div class="control"> 
            <label for="p-count">Đếm đoạn</label>
            <div>
              <input type="range" id="p-count" min="1" max="20" step="1" value="3">
              <span id="p-count-label">3</span>
            </div>
          </div>
          <button type="submit">Tạo</button>
        </form>
        <button class="copy">Sao chép vào Clipboard</button>
        <div class="info">
         Dùng thanh trượt đặt các tham số, sau đó nhấn nút "Generate".
          
          Bạn có thể sao chép text bằng cách nhấn nút "Copy to Clipboard" 
        </div>
      </div>
      <div class="output"></div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Đánh dấu này chỉ đơn giản xác định giao diện người dùng. Bên trái của màn hình hiện các điều khiển, còn bên phải hiện đầu ra. Tiếp theo, mở file main.js, xóa nội dung của nó và thêm một dòng để nhập style.css:

import './style.css'

Nhập file Lorem và xác định các biến toàn cục

Mở repository GitHub của dự án, sao chép nội dung của file lorem.js và dán chúng vào bản sao cục bộ của lorem.js. Lorem.js xuất một chuỗi dài của text Lorem Ipsum mà file JavaScript khác có thể sử dụng.

Trong file main.js, nhập chuỗi lorem từ file lorem.js và xác định các biến cần thiết.

import { lorem } from './lorem';

let text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").split(' ');
let lastChar;
let wordCountControl = document.querySelector("#w-count");
let paragraphCountControl = document.querySelector("#p-count");
let wordCountLabel = document.querySelector("#w-count-label");
let paragraphCountLabel = document.querySelector("#p-count-label");
let wordCount = wordCountControl.value;
let paragraphCount = paragraphCountControl.value;
let copy = document.querySelector(".copy");

Code này dùng một biểu thức chính quy để loại bỏ bất kỳ dấu câu trong text lorem. Biến text liên kết phiên bản của text lorem đã chỉnh sửa này. Điều đó khiến việc tạo từ và đoạn văn trở nên dễ dàng hơn.

Tạo các hàm generator

Bất kỳ câu hay đoạn được tạo ngẫu nhiên một cách chân thực đều cần tới dấu chấm câu. Sau khi xác định các biến toàn cục, tạo một hàm tên generateRandomPunctuation(), trong hàm đó, tạo một mảng tên characters & điền vào đó.

function generateRandomPunctuation() {
    let characters = [",", "!", ".", "?"];
    let character = characters[Math.floor(Math.random() * characters.length)];
    lastChar = character;
    return character;
}

Khối code trên xác định mảng, ký tự, chứa các dấu chấm câu khác nhau. Nó xác định biến khác, character, mà nó đặt thành một phần tử ngẫu nhiên từ mảng characters. Biến toàn cục, lastChar, chứa cùng giá trị mà hàm này trả về sau đó.

Tiếp theo, tạo hàm generateParagraph() với tham số count có giá trị mặc định là 100.

function generateParagraph(count = 100) {
}

Trong hàm này, khai báo một mảng paragraph và tìm nạp từ ngẫu nhiên từ mảng text toàn cục, sau đó đẩy nó vào paragraph.

let paragraph = [];

for (let i = 1; i <= count; i++) {
    paragraph.push(text[Math.floor(Math.random() * text.length)].toLowerCase());
}

Tiếp theo, thêm code để viết hoa chữ cái đầu tiên ở từ đầu tiên của mỗi đoạn:

let fl=paragraph[0];
paragraph[0] = fl.replace(fl[0], fl[0].toUpperCase());

Mỗi đoạn kết thúc bằng dấu câu (thường là dấu chấm), vì thế, hãy thêm code bổ sung dấu chấm vào cuối của mỗi đoạn.

let lwPos = paragraph.length - 1;
let lWord = paragraph[lwPos];
paragraph[lwPos] = lWord.replace(lWord, lWord + ".");

Tiếp theo, triển khai chức năng thêm một dấu câu được tạo ngẫu nhiên vào một nhân tố ngẫu nhiên trong mảng paragraph.

paragraph.forEach((word, index) => {
    if (index > 0 && index % 10 === 0) {
        let randomNum = Math.floor(Math.random() * 4);
        let pos = index + randomNum;
        let randWord = paragraph[pos];
        paragraph[pos] = randWord.replace(randWord, randWord + generateRandomPunctuation());
        let nWord=paragraph[pos + 1];

        if (lastChar !== ",") {
            paragraph[pos + 1] = nWord.replace(nWord[0], nWord[0].toUpperCase());
        }
    }
})

Khối code này tạo một ký tự dấu câu ngẫu nhiên và nối nó vào phần cuối của một phần tử ngẫu nhiên từ mảng paragraph. Sau khi nối dấu câu, nó in hoa chữ cái đầu tiên của phần tử tiếp theo nếu dấu câu không phải dấu phẩy.

Cuối cùng, trả về mảng paragraph được định dạng là chuỗi:

return paragraph.join(" ");

Text lorem ipsum sẽ có cấu trúc dựa trên số đoạn người dùng lựa chọn. Bạn có thể dùng một mảng để xác định cấu trúc này. Ví dụ, nếu người dùng muốn text lorem ipsum có 3 đoạn, mảng ‘structure’ sẽ trông như thế này:

structure = ["First paragraph.", "\n \n", "Second paragraph.", "\n \n", "Third paragraph"]

Trong khối code trên, mỗi "\n \n" đại diện cho khoảng cách giữa mỗi đoạn. Nếu bạn đăng nhập structure.join("") trong console trình duyệt, bạn sẽ thấy như sau:

Tạo cấu trúc đoạn

Tạo một hàm tự động tạo cấu trúc này và gọi hàm generateParagraph:

function generateStructure(wordCount, paragraph = 1) {
    let structure = [];

    for (let i = 0; i < paragraph * 2; i++) {
        if (i % 2 === 0) structure[i] = generateParagraph(wordCount);
        else if (i < (paragraph * 2) - 1) structure[i] = "\n \n";
    }

    return structure.join("");
}

Thêm trình nghe sự kiện vào các điều khiển

Thêm trình nghe sự kiện “input” vào phần tử input wordCountControl và trong hàm callback, đặt wordCount sang giá trị input. Sau đó, update nhãn này.

wordCountControl.addEventListener("input", (e) => {
    wordCount = e.target.value;
    wordCountLabel.textContent= e.target.value;
})

Tiếp theo, thêm một trình nghe sự kiện “input” vào phần tử input paragraphCountControl và trong hàm callback, đặt paragraphCount vào giá trị nhập và update nhãn này.

paragraphCountControl.addEventListener("input", (e) => {
    paragraphCount= e.target.value;
    paragraphCountLabel.textContent = e.target.value;
})

Thêm trình nghe sự kiện “click” vào nút bấm copy gọi lại copyText() khi sự kiện kích hoạt.

copy.addEventListener("click", ()=>copyText());

Cuối cùng, thêm trình nghe sự kiện “submit” vào phần tử HTML form và gọi hàm update UI trong hàm callback.

document.querySelector("form").addEventListener('submit', (e) => {
    e.preventDefault();
    updateUI();
})

Hoàn thiện và update UI

Tạo một hàm getControlValues trả về wordCount và paragraphCount là một đối tượng.

function getControlValues() {
    return { wordCount, paragraphCount };
}

Sau đó, tạo hàm updateUI() hiển thị văn bản được tạo trên màn hình cho người dùng:

function updateUI() {
    let output = generateStructure(getControlValues().wordCount, getControlValues().paragraphCount)
    document.querySelector(".output").innerText = output;
}

Tạo hàm copyText() ghi nội dung vào clipboard bất cứ khi nào người dùng click nút "Copy to Clipboard".

async function copyText() {
    let text = document.querySelector(".output").innerText;
    try {
      await navigator.clipboard.writeText(text);
      alert('Copied to clipboard');
    } catch (err) {
      alert('Failed to copy: ', err);
    }
  }

Sau đó gọi hàm updateUI():