实现字数统计工具

分类：developer ｜标签：字数、统计、字符、阅读统计中文字数、词数、字符数、行数与预计阅读时长

2.1 功能说明

统计中文字数、词数、字符数、行数与预计阅读时长

2.1.1 使用指南

字数统计使用指南

统计指标

字符数（含空格 / 不含空格）：按 Unicode 码点精确计数。
中文字数：匹配 CJK 统一汉字范围。
英文词数：连续字母数字为一个词。
行数 / 段落数：按换行与空行切分。

典型场景

论文、公众号推文、简历、字幕的字数核对与阅读时长估算。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

vue

import { ref, computed } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const text = ref('')

const charsTotal = computed(() => [...text.value].length)
const charsNoSpace = computed(() => [...text.value.replace(/\s/g, '')].length)
const chinese = computed(() => (text.value.match(/[一-鿿㐀-䶿]/g) || []).length)
const words = computed(() => (text.value.match(/[A-Za-z0-9]+/g) || []).length)
const lines = computed(() => (text.value ? text.value.split(/\r\n|\r|\n/).length : 0))
const paragraphs = computed(() => {
  if (!text.value.trim()) return 0
  return text.value.split(/\n\s*\n/).filter(p => p.trim()).length
})

const stats = computed(() => [
  { label: '字符数(含空格)', value: charsTotal.value },
  { label: '字符数(不含空格)', value: charsNoSpace.value },
  { label: '中文字数', value: chinese.value },
  { label: '英文词数', value: words.value },
  { label: '行数', value: lines.value },
  { label: '段落数', value: paragraphs.value }
])

const readingTime = computed(() => {
  const minutes = Math.max(
    chinese.value / 300,
    words.value / 200
  )
  if (minutes <= 0) return '0 分钟'
  if (minutes < 1) return '不到 1 分钟'
  return `约 ${Math.ceil(minutes)} 分钟`
})

2.3 效果截图

暂未生成该工具的效果截图。

工具访问地址：https://www.i91tools.com/tools/word-counter

实现 字数统计 工具 ​

2.1 功能说明 ​

2.1.1 使用指南 ​