想自己原创一些小工具，便于日常工作需求，所以这款字符统计工具就诞生了，希望大家喜欢！
最终界面这段代码实现了一个字符统计工具，可以统计输入段落中的总字符数、汉字字符数、英文字符数和符号数。
以下是对这个工具的介绍：
该工具使用 PHP 和 JavaScript 实现，前端使用了 Bootstrap 框架来创建用户界面。
用户在输入框中输入段落后，点击"统计"按钮，JavaScript 代码会使用 AJAX 技术将输入内容发送到后端进行处理。
后端 PHP 代码首先检查请求的方法是否为 POST，然后获取用户输入的内容。接下来，它使用正则表达式来统计总字符数、汉字字符数、英文字符数和符号数。
统计结果被存储在一个关联数组 `$result` 中，并使用 `json_encode()` 函数将结果转换为 JSON 格式。
返回的 JSON 数据通过 AJAX 请求的成功回调函数处理，JavaScript 代码将结果显示在网页上的相应表格单元格中。
用户界面使用了 Bootstrap 的网格系统，使表单和结果容器在不同设备上呈现出良好的自适应布局。
此工具可以帮助用户快速统计输入段落中的字符信息，对于文本处理和数据分析非常有用。
请注意，为了使该工具正常工作，你需要在服务器上运行支持 PHP 的环境，并确保代码中的依赖库（如 Bootstrap 和 jQuery）可以正确加载。
完整代码如下：
代码语言：javascript复制<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$content = $_POST['content'];
$totalCharCount = mb_strlen($content); // 总字符数
$chineseCharCount = preg_match_all("/[x{4e00}-x{9fa5}]/u", $content); // 汉字字符数
$englishCharCount = preg_match_all("/[a-zA-Z]/", $content); // 英文字符数
$symbolCount = preg_match_all("/[^ws]/", $content); // 符号数
$result = [
'totalCharCount' => $totalCharCount,
'chineseCharCount' => $chineseCharCount,
'englishCharCount' => $englishCharCount,
'symbolCount' => $symbolCount
];
echo json_encode($result);
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小轻字符统计工具</title>
<meta name="description" content="这是一个字符统计工具，可帮助您统计输入段落中的字符信息。">
<meta name="keywords" content="字符统计,字符统计工具,字数统计,统计字数,统计工具,小轻原创">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<form action="" method="post">
<div class="form-group">
<h2 for="content" class="mt-5 mb-3">字符统计工具</h2>
<p class="mt-4">这是一个字符统计工具，它可以帮助您统计输入段落中的字符信息。您只需在输入框中输入段落，然后点击"统计"按钮，即可获取以下统计结果：</p>
<ul>
<li>总字符数：输入段落中的字符总数。</li>
<li>汉字字符数：输入段落中的汉字字符数。</li>
<li>英文字符数：输入段落中的英文字符数。</li>
<li>符号数：输入段落中的符号数。</li>
</ul>
<textarea class="form-control" id="content" name="content" rows="10" placeholder="请输入段落"></textarea>
</div>
<button type="submit" class="btn btn-primary mt-3">统计</button>
</form>
<div id="result" style="display: none;">
<table class="table mt-4">
<thead>
<tr>
<th>统计项</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>总字符数</td>
<td id="totalCharCount"></td>
</tr>
<tr>
<td>汉字字符数</td>
<td id="chineseCharCount"></td>
</tr>
<tr>
<td>英文字符数</td>
<td id="englishCharCount"></td>
</tr>
<tr>
<td>符号数</td>
<td id="symbolCount"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer class="footer mt-3">
<div class="container">
<p class="text-center">© 2023 <a href="http://yizw.cn" target="_blank">网络工具箱</a>. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('form').submit(function (event) {
event.preventDefault();
var content = $('#content').val();
// 发送 AJAX 请求到后端处理数据
$.ajax({
url: '',
type: 'POST',
data: {content: content},
dataType: 'json',
success: function (result) {
// 显示计算结果
$('#totalCharCount').text(result.totalCharCount);
$('#chineseCharCount').text(result.chineseCharCount);
$('#englishCharCount').text(result.englishCharCount);
$('#symbolCount').text(result.symbolCount);
$('#result').show();
}
});
});
});
</script>
</body>
</html>效果预览：http://yizw.cn/tools/word.php
被收录在网络工具箱 - 实用工具导航。
