☰

网页字数统计

在网页上选中文字时，通过浮层显示字数

当前为 2024-01-13 提交的版本，查看 最新版本。

// ==UserScript==
// @name         网页字数统计
// @namespace    http://tampermonkey.net/
// @version      0.12
// @license      MIT
// @description  在网页上选中文字时，通过浮层显示字数
// @author       PPPotatooo
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建浮层元素
    const floatDiv = document.createElement('div');
    floatDiv.style.cssText = 'position: absolute; z-index: 1000; padding: 5px; background: white; border: 1px solid black; border-radius: 4px; font-size: 12px; display: none; opacity: 1; transition: opacity 1s ease;';
    document.body.appendChild(floatDiv);

    let fadeOutTimeout;

    // 新增函数：计算中英文字数
    function countWords(text) {
        // 移除标点符号
        text = text.replace(/[^\w\s\u4e00-\u9fa5]/g, '');

        // 分离中英文
        const chineseChars = text.match(/[\u4e00-\u9fa5]/g) || [];
        const englishWords = text.match(/\b[a-zA-Z]+\b/g) || [];

        return {
            chineseCount: chineseChars.length,
            englishCount: englishWords.length
        };
    }

    document.addEventListener('mouseup', function() {
        clearTimeout(fadeOutTimeout);
        const selection = window.getSelection();
        const selectedText = selection.toString();
        if (selectedText.length > 0) {
            // 调用计算字数的函数
            const { chineseCount, englishCount } = countWords(selectedText);
            floatDiv.textContent = `中文字数: ${chineseCount}, 英文单词数: ${englishCount}`;

            // 获取选中文字的范围
            const range = selection.getRangeAt(0);
            const rect = range.getBoundingClientRect();

            // 设置浮层位置
            floatDiv.style.left = `${rect.left + window.scrollX}px`;
            floatDiv.style.top = `${rect.bottom + window.scrollY}px`;
            floatDiv.style.display = 'block';
            floatDiv.style.opacity = '1';

            // 设置2秒后开始消失
            fadeOutTimeout = setTimeout(() => {
                floatDiv.style.opacity = '0';
                setTimeout(() => floatDiv.style.display = 'none', 1000); // 1秒后完全隐藏
            }, 2000);
        } else {
            floatDiv.style.display = 'none';
        }
    });
})();