简易文本处理网页工具｜AI 通识课第三次作业

一、项目简介

本次实现一个浏览器端的简易文本处理网页工具，无需安装额外软件，双击本地 HTML 文件就可以直接在浏览器运行。实现两大核心功能：

1.统计输入框中文本的总字符数量

2.将输入内容里的英文字母全部转为大写

二、开发环境

开发工具：系统记事本
技术栈：HTML + CSS + JavaScript
运行方式：普通浏览器打开，不需要服务器部署

三、完整源码

html

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>AI简易文本工具</title>
    <style>
        body{font-family:Microsoft Yahei;max-width:700px;margin:40px auto;padding:0 20px;}
        button{padding:10px 24px;font-size:16px;margin:10px 5px;cursor:pointer;}
        #result{margin-top:20px;padding:15px;background:#f5f7fa;border-radius:6px;}
    </style>
</head>
<body>
    <h2>AI简易文本处理工具</h2>
    <p>请输入需要处理的文本：</p>
    <textarea id="inputText" placeholder="在这里粘贴文字..."></textarea>
    <br>
    <button onclick="calcWord()">统计字数</button>
    <button onclick="toUpper()">全部转为大写</button>
    <div id="result"></div>

    <script>
        function calcWord(){
            let text = document.getElementById("inputText").value;
            let len = text.length;
            document.getElementById("result").innerText = `总字符数：${len}`;
        }
        function toUpper(){
            let text = document.getElementById("inputText").value;
            document.getElementById("result").innerText = text.toUpperCase();
        }
    </script>
</body>
</html>

四、功能原理说明

1.统计字符数功能通过getElementById获取文本框输入内容，调用字符串属性length获取字符总数，把结果渲染到页面结果 div。

2.字母转大写功能获取输入文本，调用 JS 内置方法toUpperCase()，将英文字母全部转换成大写，中文不受影响，输出展示。

五、运行步骤

1.将上面全部代码复制，粘贴到记事本

2.文件另存为，文件名填写 index.html，编码选择UTF‑8

3.双击该文件，自动用浏览器打开页面

4.在文本框输入内容，点击按钮测试两个功能，截图保存运行效果图

六、项目仓库地址

复制代码

https://github.com/822240082/AI-Text-Tool

七、总结

本项目使用基础前端三件套完成轻量网页小工具，没有复杂框架，纯原生 JS 实现交互。加深了对 DOM 获取元素、字符串内置函数的理解。