Txt文本阅读器（HTML）

锦鲤未离

已于 2024-06-19 19:44:23 修改

阅读量1.3k

点赞数 37

文章标签： html css3 javascript

于 2024-05-24 00:18:14 首次发布

本文链接：https://blog.csdn.net/koinlcsdn/article/details/139160455

版权

一、碎碎念

大家好，我是锦鲤未离！

很高兴和大家在csdn见面，祝你我喜乐安康。

这个代码可以阅读TXT文本，且只会在本地进行展示，并不会上传到云端。

可以康康这个示例：读 TXT 文件-作者：锦鲤未离（示例为v1.9版本）

二、便捷点

丰富检测各章节	目录全覆盖
多种类型潮按钮	具备快捷键
美化界面不累眼	沉浸式浏览

可以康康这个示例：读 TXT 文件-作者：锦鲤未离（示例为v1.9版本）

说明：可以按目录来。但如果没按目录来，请自行修改正则表达式，本篇文章并不适用全部“第X章”“00X”等！

这个是当前阅读图片结果（图片为v1.4版本，第6.5章已订正成功，可以正常读取，预计在后续版本中实装）：

版本介绍：

v1.9版本：
增加文本提示信息，便于快速入手。
优化按钮样式，使按钮更醒目。

v1.8版本：
增加“选择书籍”按钮，可以选择单个书籍进行查看。
优化移动端页面布局，使移动端阅读更舒适。
增加读取失败逻辑，确保所有TXT文本都能被正常读取。

v1.7版本：
增加“锦鲤未离”Logo。
增加判定条件，防止误操作。
增加鼠标移动到的目录加粗显示，更凸显。
优化正则表达式，更精准。
优化按钮名称，更精简。
优化移动端适配，更精美。

v1.6版本：
优化了正则表达式，现在可以匹配更精确的章节目录了。
优化了章节目录布局，以及章节目录点按逻辑。
优化代码逻辑，添加部分文本注释，修改不适当的文本注释。

v1.5版本：
增加了显隐章节目录。快捷键L，可移除目录，提供更加沉浸式的浏览。另外，点按目录框以外的部分，也可以显示或隐藏目录。
优化了正则表达式。
优化了正文布局、文章列表布局，适配手机、平板、电脑，确保居中观看且文本排版合适。
优化了按钮布局，仅在阅读时会出现返回文件列表和显隐章节目录，仅在章节列表时会出现选择文件夹和重选文件夹操作，并且当无法点击按钮时，相应快捷键也会被停用而无法使用。
优化了整体布局。

v1.4版本：
增加了第一章之前的文本读取功能，现在第一章之前的文本也能够正常读取了。
优化了正则表达式逻辑，现在可以匹配更多类型的文章了。

v1.3版本：
增加了按钮快捷键提示文本。
优化了文章列表页的布局。
优化字体滑动条在亮色和暗色模式下的颜色。
修复了切换暗色模式后不能全屏暗色的问题。
修复了暗色模式在查看文章正文时不能查看文章名称的问题。

v1.2版本：
1.优化正则表达式逻辑，现在能对绝大多数正常性文章作读取。如果读取不了，请自行在python中进行数据处理，优化文本文件逻辑！笔者正则表达式学的不深，还请见谅。后续有机会的话也会将python中处理的代码发出来，敬请期待。

v1.1版本：
1.新增重选文件夹功能。
2.新增重置桌面功能。
3.优化正则表达式逻辑，可以筛选出更多文章了（但仍有漏洞）。
4.优化文章列表UI，令它全屏显示。
5.优化文章内容功能UI，令它固定于右上块。
6.优化按钮UI，统一样式。

v1.0版本：
1.键盘左右键快捷上下章。
2.alt快捷返回文章列表。
3.d键快捷暗黑模式。
4.enter键快捷添加文件夹。
5.可以改字的大小。

三、代码（代码为最新版本）

可以康康这个示例：读 TXT 文件-作者：锦鲤未离（示例为v1.9版本）


<!DOCTYPE html> <html lang="zh-CN"> <author name="KoiNL, 锦鲤未离"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>读 TXT 文件-作者：锦鲤未离</title> 
<style> body { justify-content: space-between; height: 100%; margin: 0; padding: 0; background-color: #faebd7; } .hidden { display: none; } pre { font-family: inherit; white-space: pre-wrap; tab-size: 2; } button { border: none; outline: none; background: #faebd7ef; cursor: pointer; border: 1px solid orange; border-radius: 20px; padding: 8px 16px; color: orange; font-size: 13px; } button:hover { background-color: #ffa500; color: #ffffff; border-color: orange; } #folderInput, #fileInput { width: 0%; opacity: 0; position: absolute; z-index: -1; } #folderInput+label, #fileInput+label { display: inline-block; border: 1px solid orange; border-radius: 20px; padding: 8px 16px; color: orange; font-size: 13px; cursor: pointer; } #folderInput+label:hover, #fileInput+label:hover { background-color: #ffa500; color: #ffffff; border-color: orange; } #fileListContainer { min-width: 23%; max-width: 45%; position: fixed; top: 0; left: 0; bottom: 0; padding: 10px; box-sizing: border-box; background: #faebd7ed; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } #fileListContainer::-webkit-scrollbar { display: none; } #fileContent h2 { margin-top: 60px; } #fileContentContainer { display: flex; flex-direction: column; flex: 1; overflow-y: auto; box-sizing: border-box; } #topControls { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); } #fontSizeRangediv { display: inline-block; } #fontSizeRangediv input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; background: #ffa500; border-radius: 5px; outline: none; margin: 10px 0; } #fileList { display: flex; flex-wrap: wrap; width: 65%; margin: 0 auto; justify-content: center; margin-top: 10px; position: absolute; left: 50%; transform: translateX(-50%); } #fileList div { padding: 0 5px 0 5px; } #fileList div:hover { padding: 0 3.7px 0 3.7px; } #fileList.hidden, #fileContent.hidden { display: none; } .chapter-link { display: block; } #fileList div a, #chapterLinks a { display: block; text-decoration: none; color: #b24224; padding-bottom: 5px; padding-top: 5px; } #fileList div a:hover, #fileListContainer div a:hover { font-weight: bold; } #fileContent { font-size: 20px; margin: 0 27px 0 27px; overflow-y: auto; overflow-x: hidden; } .dark-mode { background-color: #000000; } .dark-mode #fileListContainer { background-color: #000000ed; } .dark-mode button, .dark-mode #folderInput+label, .dark-mode #fileInput+label { border: 1px solid #ffa50090; color: #ffa50090; background: #000000ef; } .dark-mode button:hover, .dark-mode #folderInput+label:hover, .dark-mode #fileInput+label:hover { background-color: #ffa50090; color: #ffffff90; border-color: #ffa50090; } .dark-mode #fileList div a, .dark-mode #chapterLinks a { color: #b2422490; } .dark-mode #fileContentContainer, .dark-mode #chapterLinks h1 { color: #ffffff90; } .dark-mode #fontSizeRangediv input[type="range"] { background: #ffa50080; } @media (min-width: 0px) { #fileContent { padding: 120px 10px; } #fileList { width: 90%; } } @media (min-width: 700px) { #fileContent { padding: 60px 100px; } #fileList { width: 80%; } } @media (min-width: 1024px) { #fileContent { padding: 30px 180px; } #fileList { width: 70%; } } @media (min-width: 1366px) { #fileContent { padding: 15px 310px; } #fileList { width: 65%; } } </style> </head> <body id="body"> <div id="fileListContainer" style="display: none;"> <div id="chapterLinks"></div> </div> <div id="fileContentContainer"> <div id="topControls"> <button id="toggleDarkModeBtn">切换暗色(D)</button> <input type="file" id="folderInput" webkitdirectory directory multiple /> <label for="folderInput" id="folderInputLabel">选择书库(Enter)</label> <input type="file" id="fileInput" multiple /> <label for="fileInput" id="fileInputLabel">选择书籍</label> <button id="fileReselect">重置界面(R)</button> <button id="toggleChapterLinksBtn" style="display: none;">书籍目录(L)</button> <button id="backToListBtn" style="display: none;">返回书库(Alt)</button> <div id="fontSizeRangediv" style="display: none;"> <input type="range" id="fontSizeRange" min="10" max="30" value="20" step="1"> </div> </div> <div id="fileList"></div> <pre id="fileContent" class="hidden"></pre> </div> <script> var zzbds = '[　 第]*[零一二三四五六七八九十百千 至到0-9]+[章篇卷梦].*?|\\n[　 ]*番外\\d*.*?|\\n[　 ]*[0-9]+[．、.].*?|书籍介绍.*?'; function FilesInputAfter(files) { var fileListDiv = document.getElementById('fileList'); fileListDiv.innerHTML = ""; for (var i = 0; i < files.length; i++) { var file = files[i]; if (file.name.endsWith('.txt')) { var listItem = document.createElement('div'); var link = document.createElement('a'); link.textContent = file.name.split('.').slice(0, -1).join('.'); link.href = "#"; link.addEventListener('click', function (file) { return function () { readFileContent(file); hideFileList(); showButton(); }; }(file)); listItem.appendChild(link); fileListDiv.appendChild(listItem); } } } function hideFileList() { document.getElementById('fileList').classList.add('hidden'); document.getElementById('folderInputLabel').style.display = 'none'; document.getElementById('fileInputLabel').style.display = 'none'; } function showButton() { document.getElementById('backToListBtn').style.display = ''; document.getElementById('toggleChapterLinksBtn').style.display = ''; document.getElementById('fontSizeRangediv').style.display = ''; } var MaxcurrentChapterIndex = 0; var chapterPattern = new RegExp(`(${zzbds}|\\n)(?=\\n${zzbds}|\\n?$)`, 'gs'); var introMatching = new RegExp(`[\\s\\S]*?(?=${zzbds})`); function readFileContent(file) { var reader = new FileReader(); reader.onload = function (e) { var contents = "书籍介绍" + '\n' + e.target.result; var fileContent = document.getElementById('fileContent'); fileContent.innerHTML = ""; var chapterLinksDiv = document.getElementById('chapterLinks'); chapterLinksDiv.innerHTML = ""; var bookTitleElement = document.createElement('h1'); bookTitleElement.textContent = file.name.split('.').slice(0, -1).join('.'); chapterLinksDiv.appendChild(bookTitleElement); var introMatch = contents.match(introMatching); var introContent = introMatch ? introMatch[0] : ''; if (introContent) { var introElement = document.createElement('pre'); introElement.innerHTML = introContent.replace(/\n/g, '<br>'); fileContent.appendChild(introElement); } var matches; var index = 1; chapterPattern.lastIndex = 0; while ((matches = chapterPattern.exec(contents)) !== null) { var chapterContent = matches[0].trim(); var chapterTitle = chapterContent.split('\n')[0].trim(); var chapterLink = document.createElement('a'); chapterLink.textContent = chapterTitle; chapterLink.href = "#chapter" + index; chapterLink.className = 'chapter-link'; chapterLinksDiv.appendChild(chapterLink); var chapterAnchor = document.createElement('a'); chapterAnchor.name = "chapter" + index; fileContent.appendChild(chapterAnchor); var chapterHeader = document.createElement('h2'); chapterHeader.textContent = chapterTitle; fileContent.appendChild(chapterHeader); var chapterParagraph = document.createElement('pre'); chapterParagraph.textContent = chapterContent; fileContent.appendChild(chapterParagraph); index++; MaxcurrentChapterIndex = index; } fileContent.classList.remove('hidden'); }; reader.readAsText(file); } var folderOrfileInput = 0; document.getElementById('folderInput').addEventListener('change', function (e) { folderOrfileInput = 0; document.getElementById('fileInputLabel').style.display = 'none'; document.getElementById('folderInputLabel').textContent = '重选书库(Enter)'; FilesInputAfter(e.target.files); }); document.getElementById('fileInput').addEventListener('change', function (e) { folderOrfileInput = 1; document.getElementById('folderInputLabel').style.display = 'none'; document.getElementById('fileInputLabel').textContent = '重选书籍'; FilesInputAfter(e.target.files); }); document.getElementById('fileReselect').addEventListener('click', function () { location.reload(); }); document.getElementById('toggleChapterLinksBtn').addEventListener('click', function () { document.getElementById('fileListContainer').classList.toggle('hidden'); }); document.getElementById('toggleDarkModeBtn').addEventListener('click', function () { document.body.classList.toggle('dark-mode'); }); document.getElementById('fontSizeRange').addEventListener('input', function () { document.getElementById('fileContent').style.fontSize = document.getElementById('fontSizeRange').value + 'px'; }); document.getElementById('backToListBtn').addEventListener('click', function () { document.getElementById('fileList').classList.remove('hidden'); fileListContainer.style.display = 'none'; document.getElementById('fileContent').classList.add('hidden'); document.getElementById('chapterLinks').innerHTML = ''; document.getElementById('fileContent').innerHTML = ''; document.getElementById('backToListBtn').style.display = 'none'; document.getElementById('toggleChapterLinksBtn').style.display = 'none'; document.getElementById('fontSizeRangediv').style.display = 'none'; if (folderOrfileInput == 0) { document.getElementById('folderInputLabel').style.display = ''; } else { document.getElementById('fileInputLabel').style.display = ''; } }); document.addEventListener('DOMContentLoaded', function () { topControlsOffsetHeight = document.getElementById('topControls').offsetHeight + 30 + 'px'; document.getElementById('fileList').style.marginTop = topControlsOffsetHeight; document.getElementById('fileContent').style.marginTop = topControlsOffsetHeight; }); const fileList = document.getElementById('fileList'); if (!fileList.hasChildNodes()) { var comment = document.createElement('p'); comment.innerHTML = "锦鲤未离书库小提示：<br><br>" + "1. 可以通过“导入书库（即选择文件夹）”或“导入书籍（即选择文件）”两种方式进行导入。<br>" + "需要注意的是，系统会自动筛选所有txt文件进行导入。<br>" + "在“导入书籍（即选择文件）”时，可以一次性导入多个文件。<br><br>" + "2. 在进入书籍阅读界面时，点按一次除目录外的区域即可隐藏目录，再次点按可以展开。<br><br>" + "3. 网站支持快捷键。左右键可以跳转到上下章;<br>" + "D、Enter、R、L、Alt键分别表示按下暗色模式、选择书库、重置页面、显隐章节目录、返回书籍列表操作。<br>"; fileList.appendChild(comment); } document.addEventListener('click', function (event) { var fileListContainer = document.getElementById('fileListContainer'); var isClickInsidefileListContainer = fileListContainer.contains(event.target); var isClickInsidetoggleDarkModeBtn = toggleDarkModeBtn.contains(event.target); var isClickInsidefontSizeRangediv = fontSizeRangediv.contains(event.target); if (!isClickInsidefileListContainer && !isClickInsidetoggleDarkModeBtn && !isClickInsidefontSizeRangediv && fileList.classList.contains('hidden')) { if (fileListContainer.style.display === 'none' || fileListContainer.style.display === '') { fileListContainer.style.display = 'block'; } else { fileListContainer.style.display = 'none'; } } }); function handleKeyboardEvent(event) { if (event.keyCode === 39 || event.keyCode === 37) { event.preventDefault(); var currentHash = window.location.hash; var currentChapter; if (currentHash.startsWith("#chapter")) { currentChapter = parseInt(currentHash.substring(8)); } else { currentChapter = 1; } var nextChapter; if (event.keyCode === 39) { nextChapter = Math.min(currentChapter + 1, MaxcurrentChapterIndex - 1); } else if (event.keyCode === 37) { nextChapter = Math.max(currentChapter - 1, 1); } var nextChapterAnchor = '#chapter' + nextChapter; location.hash = nextChapterAnchor; } } document.addEventListener('keydown', handleKeyboardEvent); document.addEventListener('keydown', function (event) { if (event.altKey) { document.getElementById('backToListBtn').click(); } }); document.addEventListener('keydown', function (event) { if (folderInputLabel.style.display !== 'none') { if (event.key === "Enter") { document.getElementById('folderInput').click(); } } }); document.addEventListener('keydown', function (event) { if (event.keyCode === 68) { document.getElementById('toggleDarkModeBtn').click(); } }); document.addEventListener('keydown', function (event) { if (event.keyCode === 82) { document.getElementById('fileReselect').click(); } }); document.addEventListener('keydown', function (event) { if (event.keyCode === 76) { document.getElementById('toggleChapterLinksBtn').click(); } }); </script><script src="https://koinl.github.io/js/logo.js"></script></body> </html>