☰

Word/Character Count for Selected Text

Display word and character count for all selected text using icons

目前為 2024-12-07 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Word/Character Count for Selected Text
// @namespace    https://github.com/Iquaridys
// @version      1.0.3
// @description  Display word and character count for all selected text using icons
// @author       Iquaridys
// @license      GNU GPLv3
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Create a floating display element for the count
    const countDiv = document.createElement('div');
    Object.assign(countDiv.style, {
        position: 'fixed',
        bottom: '5px',
        right: '5px',
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        color: 'white',
        padding: '8px 12px',
        borderRadius: '5px',
        zIndex: '10000',
        display: 'none',
        fontSize: '14px',
        fontFamily: 'Arial, sans-serif',
        boxShadow: '0 2px 6px rgba(0, 0, 0, 0.3)',
        whiteSpace: 'nowrap',
    });
    document.body.appendChild(countDiv);

    // Count words and characters in the selected text
    function getTextCount(text) {
        const characterCount = text.length;
        const wordCount = text.trim().split(/\s+/).filter(Boolean).length;
        return { characterCount, wordCount };
    }

    // Event listener for text selection
    document.addEventListener('mouseup', () => {
        const selectedText = window.getSelection().toString().trim();
        if (selectedText) {
            const { characterCount, wordCount } = getTextCount(selectedText);
            
            // Use icons for word and character count
            const charIcon = '🅰️';
            const wordIcon = '🔤';

            countDiv.innerHTML = `${wordIcon} ${wordCount} | ${charIcon} ${characterCount}`;
            countDiv.style.display = 'block';
        } else {
            countDiv.style.display = 'none';
        }
    });

    // Hide the countDiv if the user clicks outside of selected text
    document.addEventListener('mousedown', () => {
        countDiv.style.display = 'none';
    });
})();