add word counter

chn-lee-yumi · Feb 21, 2024 · 9607343 · 9607343
1 parent e085d73
commit 9607343
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 1 deletion.
diff --git a/en/word_count.html b/en/word_count.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Online word counter, character counter. Count words, characters, Chinese characters, punctuation (full-width), English words, letters, numbers.">
+    <title>Online Word Counter & Character Counter</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background-color: #ffffff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+            width: 90%;
+            max-width: 800px;
+            text-align: center;
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 20px;
+        }
+        textarea {
+            width: 100%;
+            height: 300px;
+            padding: 10px;
+            margin-bottom: 10px;
+            border-radius: 4px;
+            border: 1px solid #ccc;
+            background-color: #fff;
+            color: #333;
+            font-size: 16px;
+            box-sizing: border-box;
+            resize: vertical;
+        }
+        #countResults {
+            margin-top: 20px;
+            text-align: left;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Online Word Counter & Character Counter</h1>
+        <textarea id="textInput" placeholder="Please Input Text" oninput="countWords()"></textarea>
+        <div id="countResults"></div>
+    </div>
+    <script>
+        // 初始化页面时执行一次字数统计
+        countWords();
+
+        function countWords() {
+            const textInput = document.getElementById("textInput").value;
+
+            // 字数统计(包含空白字符)
+            const wordCount = textInput.length;
+
+            // 字数统计(不包含空白字符)
+            const charCount = textInput.replace(/\s/g, "").length;
+
+            // 汉字统计
+            const chineseCount = (textInput.match(/[\u4e00-\u9fa5]/g) || []).length;
+
+            // 标点（全角）统计
+            const punctuationCount = (textInput.match(/[\u3000-\u303f\uff00-\uffef]/g) || []).length;
+
+            // 英文单词统计
+            const englishWordCount = textInput.match(/\b\w+\b/g) ? textInput.match(/\b\w+\b/g).length : 0;
+
+            // 字母统计
+            const letterCount = textInput.match(/[a-zA-Z]/g) ? textInput.match(/[a-zA-Z]/g).length : 0;
+
+            // 数字统计
+            const digitCount = textInput.match(/\d/g) ? textInput.match(/\d/g).length : 0;
+
+            // 显示统计结果
+            const countResults = `
+                <p>Word Count (including white spaces): ${wordCount}</p>
+                <p>Word Count (excluding white spaces): ${charCount}</p>
+                <p>Chinese Characters: ${chineseCount}</p>
+                <p>Punctuation (full-width): ${punctuationCount}</p>
+                <p>English Words: ${englishWordCount}</p>
+                <p>Letters: ${letterCount}</p>
+                <p>Numbers: ${digitCount}</p>
+            `;
+
+            document.getElementById("countResults").innerHTML = countResults;
+        }
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -63,6 +63,7 @@ <h2>Tools list:</h2>
             <li><a href="en/base_converter.html" target="_blank">Number Base Conversion</a></li>
             <li><a href="en/base64.html" target="_blank">Base64 Encoding/Decoding</a></li>
             <li><a href="en/utf8.html" target="_blank">UTF-8 Encoding/Decoding</a></li>
+            <li><a href="en/word_count.html" target="_blank">Online Word Counter & Character Counter</a></li>
             <li><a href="https://ip.gcc.ac.cn/" target="_blank">Show My IP Address</a></li>
         </ul>
     </div>

diff --git a/index_zh.html b/index_zh.html
@@ -62,6 +62,7 @@ <h2>工具列表：</h2>
             <li><a href="zh/base_converter.html" target="_blank">进制转换</a></li>
             <li><a href="zh/base64.html" target="_blank">Base64 编解码</a></li>
             <li><a href="zh/utf8.html" target="_blank">UTF-8 编解码</a></li>
+            <li><a href="zh/word_count.html" target="_blank">字数和单词统计</a></li>
             <li><a href="https://ip.gcc.ac.cn/" target="_blank">查看我的 IP 地址</a></li>
         </ul>
     </div>

diff --git a/sitemap.txt b/sitemap.txt
@@ -4,7 +4,9 @@ https://tool.gcc.ac.cn/en/ascii.html
 https://tool.gcc.ac.cn/en/base64.html
 https://tool.gcc.ac.cn/en/base_converter.html
 https://tool.gcc.ac.cn/en/utf8.html
+https://tool.gcc.ac.cn/en/word_count.html
 https://tool.gcc.ac.cn/zh/ascii.html
 https://tool.gcc.ac.cn/zh/base64.html
 https://tool.gcc.ac.cn/zh/base_converter.html
-https://tool.gcc.ac.cn/zh/utf8.html
+https://tool.gcc.ac.cn/zh/utf8.html
+https://tool.gcc.ac.cn/zh/word_count.html
diff --git a/zh/word_count.html b/zh/word_count.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="在线字数和单词统计。统计字数、字符、汉字、标点(全角)、英文单词、字母、数字">
+    <title>在线字数和单词统计</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background-color: #ffffff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+            width: 90%;
+            max-width: 800px;
+            text-align: center;
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 20px;
+        }
+        textarea {
+            width: 100%;
+            height: 300px;
+            padding: 10px;
+            margin-bottom: 10px;
+            border-radius: 4px;
+            border: 1px solid #ccc;
+            background-color: #fff;
+            color: #333;
+            font-size: 16px;
+            box-sizing: border-box;
+            resize: vertical;
+        }
+        #countResults {
+            margin-top: 20px;
+            text-align: left;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>在线字数和单词统计</h1>
+        <textarea id="textInput" placeholder="请输入文本" oninput="countWords()"></textarea>
+        <div id="countResults"></div>
+    </div>
+    <script>
+        // 初始化页面时执行一次字数统计
+        countWords();
+
+        function countWords() {
+            const textInput = document.getElementById("textInput").value;
+
+            // 字数统计(包含空白字符)
+            const wordCount = textInput.length;
+
+            // 字数统计(不包含空白字符)
+            const charCount = textInput.replace(/\s/g, "").length;
+
+            // 汉字统计
+            const chineseCount = (textInput.match(/[\u4e00-\u9fa5]/g) || []).length;
+
+            // 标点（全角）统计
+            const punctuationCount = (textInput.match(/[\u3000-\u303f\uff00-\uffef]/g) || []).length;
+
+            // 英文单词统计
+            const englishWordCount = textInput.match(/\b\w+\b/g) ? textInput.match(/\b\w+\b/g).length : 0;
+
+            // 字母统计
+            const letterCount = textInput.match(/[a-zA-Z]/g) ? textInput.match(/[a-zA-Z]/g).length : 0;
+
+            // 数字统计
+            const digitCount = textInput.match(/\d/g) ? textInput.match(/\d/g).length : 0;
+
+            // 显示统计结果
+            const countResults = `
+                <p>字数(包含空白字符): ${wordCount}</p>
+                <p>字数(不包含空白字符): ${charCount}</p>
+                <p>汉字: ${chineseCount}</p>
+                <p>标点(全角): ${punctuationCount}</p>
+                <p>英文单词: ${englishWordCount}</p>
+                <p>字母: ${letterCount}</p>
+                <p>数字: ${digitCount}</p>
+            `;
+
+            document.getElementById("countResults").innerHTML = countResults;
+        }
+    </script>
+</body>
+</html>