我做了一个很屌的Nodejs网页阅读器

我做了一个很屌的Nodejs网页阅读器

具体到底有多叼呢？ 他能让你一次读一句话，专注阅读！ 请看这个链接

18 回复

好的，下面是一个简单的Node.js网页阅读器的实现示例。这个网页阅读器允许用户一次阅读一句话，从而帮助他们更专注于阅读内容。

示例代码

首先，我们需要安装必要的依赖包：

npm install express ejs axios cheerio

然后，创建一个简单的Express服务器，并使用axios来获取网页内容，cheerio来解析HTML并提取文本。

server.js

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');

const app = express();
app.set('view engine', 'ejs');

app.get('/', async (req, res) => {
    try {
        // 获取网页内容
        const response = await axios.get('https://example.com'); // 替换为你要读取的网页URL
        const html = response.data;

        // 使用Cheerio解析HTML
        const $ = cheerio.load(html);
        let textContent = $('body').text(); // 提取页面的纯文本内容
        textContent = textContent.replace(/\s+/g, ' ').trim(); // 清理空白字符

        // 将文本分割成句子
        const sentences = textContent.split('. ');

        // 渲染页面，传递句子数组
        res.render('index', { sentences });
    } catch (error) {
        console.error(error);
        res.status(500).send('An error occurred.');
    }
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页阅读器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #sentence {
            font-size: 24px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>网页阅读器</h1>
    <div id="sentence"><%= sentences[currentSentence] %></div>
    <button onclick="prev()">上一句</button>
    <button onclick="next()">下一句</button>

    <script>
        let currentSentence = 0;
        const totalSentences = <%= sentences.length %>;

        function next() {
            if (currentSentence < totalSentences - 1) {
                currentSentence++;
                document.getElementById('sentence').innerText = sentences[currentSentence];
            }
        }

        function prev() {
            if (currentSentence > 0) {
                currentSentence--;
                document.getElementById('sentence').innerText = sentences[currentSentence];
            }
        }
    </script>
</body>
</html>

解释

  1. 获取网页内容：使用axios从指定的URL获取网页内容。
  2. 解析HTML：使用cheerio解析HTML并提取文本内容。
  3. 分割句子：将提取的文本按句号分割成句子数组。
  4. 渲染页面：使用EJS模板引擎渲染页面，并将句子数组传递给前端。
  5. 前端交互：使用JavaScript实现前后句的切换功能。

这样，用户就可以一次阅读一句话，专注于当前的阅读内容。


不停地弹对话框，看起来不累么……

愚人节已经过了

是不是很二呢， 又不是取消不了，还这么幼稚啊

有可能是句子太短了，如果每次弹一段话的话应该就不累了。。

现在看来是有些幼稚，可这不是恶作剧，这个方式让你按回车就能看完一篇文字。。

我明明是在愚人节发的

有前途 把 alert 换成 customize 的

哈哈，楼主好“贱”，调戏人家。

你这么屌，你家人知道么

吊

反人类设计 现在好的阅读器，无一不是让人专注阅读，方便切换，这个倒好，和愚人节的弹窗一样毫无区别。 按回车就能看完整篇文章，会比滚动下鼠标滚轮好么。。或者上下方向键。。

强迫症不能忍啊

好屌！点赞……！

好屌，如果是死循环就好了！

阅读器弱爆了

大爷的

我做了一个很屌的Nodejs网页阅读器

具体到底有多叼呢？他能让你一次读一句话，专注阅读！

请看这个链接

实现思路与代码

这是一个简单的Node.js应用，结合了前端HTML和JavaScript来实现逐句阅读的功能。以下是一个基本的实现步骤：

  1. 后端（Node.js）：

    • 使用Express框架创建一个简单的Web服务器。
    • 提供静态文件服务。

  2. 前端（HTML + JavaScript）：

    • 创建一个HTML页面，包含文本内容。
    • 使用JavaScript来逐句展示内容。
示例代码

后端（Node.js + Express）:

const express = require('express');
const path = require('path');

const app = express();
const port = 3000;

// Serve static files from the "public" directory
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

前端（HTML + JavaScript）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逐句阅读器</title>
</head>
<body>
    <div id="content"></div>
    <button id="nextSentence">下一句</button>

    <script>
        const text = `这是一段测试文本。这是第二句话。这是第三句话。`;
        const sentences = text.split('.').filter(sentence => sentence.trim() !== '');
        let currentIndex = 0;

        function displayNextSentence() {
            document.getElementById('content').innerText = sentences[currentIndex].trim() + '.';
            currentIndex++;
        }

        document.getElementById('nextSentence').addEventListener('click', displayNextSentence);

        // 初始显示第一句
        displayNextSentence();
    </script>
</body>
</html>

这个示例中，用户每次点击“下一句”按钮时，会显示文本中的下一句话。这种设计有助于提高用户的专注力，使他们能够更好地吸收每一句话的内容。

回到顶部