HTML、JS、CSS3实现文本格式清除

铁头大蚂蚁
于 2025-03-10 13:18:46 发布
阅读量264
点赞数 3
文章标签： css3 javascript html
本文链接：https://blog.youkuaiyun.com/u011739075/article/details/146151993
版权
有时候从网站上或者word里复制的内容，粘贴到某些网站上会携带各种文本格式，清除起来比较麻烦。所以写了个文本格式清除小工具。
效果图如下：
复制代码，在桌面新建wordtool.html 贴进去就可以使用了
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: #f5f5f5;
            overflow: hidden;
        }
        
        .header {
            background-color: #333;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 1px;
        }
        
        .toolbar {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .btn {
            background-color: #555;
            color: white;
            border: none;
            padding: 8px 15px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 14px;
            min-width: 80px;
            text-align: center;
        }
        
        .btn:hover {
            background-color: #777;
        }
        
        .btn:active {
            background-color: #444;
        }
        
        .main {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }
        
        .editor {
            flex: 1;
            width: 100%;
            padding: 15px;
            font-size: 16px;
            line-height: 1.6;
            border: 1px solid #ddd;
            background-color: white;
            resize: none;
            outline: none;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .status-bar {
            margin-top: 10px;
            color: #555;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
        }
        
        .notification {
            position: fixed;
            top: 70px;
            right: 20px;
            background-color: #333;
            color: white;
            padding: 10px 20px;
            opacity: 0;
            transition: opacity 0.3s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">文本工具</div>
        <div class="toolbar">
            <button class="btn" id="paste">粘贴</button>
            <button class="btn" id="copy">复制</button>
            <button class="btn" id="clear">清空</button>
            <button class="btn" id="removeFormat">去除格式</button>
            <button class="btn" id="addParagraph">每段增加</button>
            <button class="btn" id="removeSpaces">消除空格</button>
            <button class="btn" id="addSpacing">增加段落间距</button>
            <button class="btn" id="autoFormat">自动排版</button>
            <button class="btn" id="exportTxt">导出TXT</button>
        </div>
    </div>
    
    <div class="main">
        <textarea class="editor" id="editor" placeholder="在此粘贴或输入文本..."></textarea>
        <div class="status-bar">
            <div id="wordCount">字数: 0 | 字符: 0</div>
            <div id="timestamp">最后编辑: --</div>
        </div>
    </div>
    
    <div class="notification" id="notification"></div>
    
    <script>
        // 获取DOM元素
        const editor = document.getElementById('editor');
        const wordCount = document.getElementById('wordCount');
        const timestamp = document.getElementById('timestamp');
        const notification = document.getElementById('notification');
        
        // 更新字数统计
        function updateWordCount() {
            const text = editor.value;
            const words = text.trim() ? text.trim().split(/\s+/).length : 0;
            const chars = text.length;
            wordCount.textContent = `字数: ${words} | 字符: ${chars}`;
            
            // 更新时间戳
            const now = new Date();
            timestamp.textContent = `最后编辑: ${now.toLocaleTimeString()}`;
        }
        
        // 显示通知
        function showNotification(message) {
            notification.textContent = message;
            notification.classList.add('show');
            setTimeout(() => {
                notification.classList.remove('show');
            }, 2000);
        }
        
        // 监听编辑器内容变化
        editor.addEventListener('input', updateWordCount);
        
        // 粘贴功能
        document.getElementById('paste').addEventListener('click', async () => {
            try {
                const text = await navigator.clipboard.readText();
                editor.value = text;
                updateWordCount();
                showNotification('已粘贴文本');
            } catch (err) {
                showNotification('粘贴失败，请手动粘贴');
            }
        });
        
        // 复制功能
        document.getElementById('copy').addEventListener('click', async () => {
            try {
                await navigator.clipboard.writeText(editor.value);
                showNotification('已复制到剪贴板');
            } catch (err) {
                showNotification('复制失败');
            }
        });
        
        // 清空功能
        document.getElementById('clear').addEventListener('click', () => {
            editor.value = '';
            updateWordCount();
            showNotification('已清空文本');
        });
        
        // 去除格式
        document.getElementById('removeFormat').addEventListener('click', () => {
            editor.value = editor.value.replace(/[\r\n]+/g, '\n').trim();
            updateWordCount();
            showNotification('已去除格式');
        });
        
        // 每段增加
        document.getElementById('addParagraph').addEventListener('click', () => {
            const paragraphs = editor.value.split(/\n+/).filter(p => p.trim());
            editor.value = paragraphs.map(p => `　　${p.trim()}`).join('\n\n');
            updateWordCount();
            showNotification('已为每段增加缩进');
        });
        
        // 消除空格
        document.getElementById('removeSpaces').addEventListener('click', () => {
            editor.value = editor.value.replace(/[ 　]+/g, '');
            updateWordCount();
            showNotification('已消除空格');
        });
        
        // 增加段落间距
        document.getElementById('addSpacing').addEventListener('click', () => {
            const paragraphs = editor.value.split(/\n+/).filter(p => p.trim());
            editor.value = paragraphs.join('\n\n');
            updateWordCount();
            showNotification('已增加段落间距');
        });
        
        // 自动排版
        document.getElementById('autoFormat').addEventListener('click', () => {
            // 分段并过滤空段落
            let paragraphs = editor.value.split(/\n+/).filter(p => p.trim());
            
            // 为每段添加缩进，并确保段落间有空行
            paragraphs = paragraphs.map(p => `　　${p.trim()}`);
            
            // 更新编辑器内容
            editor.value = paragraphs.join('\n\n');
            updateWordCount();
            showNotification('已自动排版');
        });
        
        // 导出TXT
        document.getElementById('exportTxt').addEventListener('click', () => {
            const text = editor.value;
            if (!text.trim()) {
                showNotification('没有内容可导出');
                return;
            }
            
            const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `文本导出_${new Date().toISOString().slice(0, 10)}.txt`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            showNotification('已导出TXT文件');
        });
        
        // 初始化
        updateWordCount();
    </script>
</body>
</html>