按字数翻页js

需求分析

按字数翻页的核心是将长文本按指定字数分割为多页，并实现翻页功能，需解决以下问题：

1. 文本分割：将文本按每页字数均匀分割，最后一页可能不足。
2. 翻页逻辑：根据当前页码显示对应内容，支持动态调整每页字数。
3. 边界处理：处理空文本、字数为0或负数、文本长度不足等情况。

核心逻辑

1. 计算总页数：总页数 = Math.ceil(文本总字数 / 每页字数)。
2. 分割文本：使用 substring 或 slice 方法按字数截取文本。
3. 翻页控制：根据当前页码索引显示对应文本片段。

代码实现

核心函数：按字数分割文本

/
  按字数分割文本
  @param {string} text 原始文本
  @param {number} wordsPerPage 每页字数
  @returns {string[]} 分页后的文本数组
 /
function splitTextByWordCount(text, wordsPerPage) {
    if (wordsPerPage <= 0) return []; // 无效字数
    const pages = [];
    let start = 0;
    while (start < text.length) {
        const end = Math.min(start + wordsPerPage, text.length);
        pages.push(text.substring(start, end));
        start = end;
    }
    return pages;
}

翻页逻辑

let currentPage = 0; // 当前页码（从0开始）
const pages = splitTextByWordCount(longText, wordsPerPage); // 调用分割函数
// 显示当前页内容
function renderPage() {
    const content = pages[currentPage] || ""; // 处理越界
    document.getElementById("content").innerText = content;
    updatePaginationControls(); // 更新翻页按钮状态
}
// 跳转到指定页码
function goToPage(page) {
    if (page >= 0 && page < pages.length) {
        currentPage = page;
        renderPage();
    }
}
// 更新翻页按钮状态（上一页/下一页）
function updatePaginationControls() {
    document.getElementById("prevBtn").disabled = currentPage === 0;
    document.getElementById("nextBtn").disabled = currentPage === pages.length 1;
}

边界处理

动态调整每页字数

<input type="number" id="wordsPerPageInput" value="100" min="1"/>  
<button onclick="updateWordsPerPage()">调整每页字数</button> 

function updateWordsPerPage() {
    const newWords = parseInt(document.getElementById("wordsPerPageInput").value);
    if (isNaN(newWords) || newWords <= 0) {
        alert("请输入有效的每页字数");
        return;
    }
    wordsPerPage = newWords; // 更新全局变量
    pages = splitTextByWordCount(longText, wordsPerPage); // 重新分页
    currentPage = 0; // 重置到第一页
    renderPage();
}

完整示例

<div>
    <div id="content"></div>
    <button id="prevBtn" onclick="goToPage(currentPage 1)">上一页</button>
    <button id="nextBtn" onclick="goToPage(currentPage + 1)">下一页</button>
</div>
<script>
    const longText = "这是一个超长文本，用于测试按字数翻页功能，假设每页显示10个字符..."; // 示例文本
    let wordsPerPage = 10; // 默认每页字数
    let pages = splitTextByWordCount(longText, wordsPerPage);
    renderPage(); // 初始化显示
</script>

相关问题与解答

问题1：如何处理中文字符的分页（避免截断词语）？

解答：
中文字符可能占多个字节，但按字符数分割可能截断词语，可通过正则匹配中文并优先在词语边界分割：

function splitTextByWordCountChinese(text, wordsPerPage) {
    const regex = /(?:[u4e00-u9fa5]){1,}/g; // 匹配连续中文字符
    const words = text.match(regex) || []; // 提取中文词语数组
    const pages = [];
    let start = 0;
    while (start < words.length) {
        const end = Math.min(start + wordsPerPage, words.length);
        pages.push(words.slice(start, end).join(''));
        start = end;
    }
    return pages;
}

问题2：如何优化长文本的分页性能？

解答：

1. 惰性分割：仅在用户翻页时动态生成当前页内容，而非一次性分割全部文本。
2. 缓存机制：对已分割的页进行缓存，避免重复计算。
3. Web Worker：将分页计算放入后台线程，防止阻塞主