在线汉字计数器 - 检测文本中的汉字数量 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>汉字检测器</title>
	<style>
		body{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}
		h1{
			text-align: center;
		}
		.container{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
			border: 1px solid #ccc;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0 0 10px #ccc;
			background-color: #f5f5f5;
		}
		label{
			font-weight: bold;
		}
		input[type='text']{
			width: 300px;
			height: 100px;
			font-size: 24px;
			padding: 10px;
			margin: 10px 0;
			border: 1px solid #ccc;
			border-radius: 5px;
		}
		button{
			background-color: #4CAF50;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-size: 18px;
			margin-top: 10px;
		}
		button:hover{
			background-color: #3e8e41;
		}
		.clear{
			background-color: #f44336;
		}
		.clear:hover{
			background-color: #d32f2f;
		}
		.result{
			display: none;
			margin-top: 20px;
			padding: 20px;
			border: 1px solid #ccc;
			border-radius: 5px;
			background-color: #fff;
			box-shadow: 0 0 10px #ccc;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>汉字检测器</h1>
	<div class='container'>
		<label for='text'>请输入文本：</label>
		<input type='text' id='text' placeholder='在这里输入文本...' />
		<button id='check'>检测</button>
		<button id='clear' class='clear'>清空</button>
		<div id='result' class='result'></div>
	</div>
<pre><code>&lt;script&gt;
	const textInput = document.getElementById('text');
	const checkBtn = document.getElementById('check');
	const clearBtn = document.getElementById('clear');
	const resultDiv = document.getElementById('result');

	checkBtn.addEventListener('click', function(){
		const text = textInput.value.trim();
		if(text === ''){
			alert('请输入文本！');
			return;
		}

		const chineseReg = /[一-龥豈-鶴]/g;
		const chineseCount = text.match(chineseReg).length;
		resultDiv.innerHTML = `文本中共有${chineseCount}个汉字。`;
		resultDiv.style.display = 'block';
	});

	clearBtn.addEventListener('click', function(){
		textInput.value = '';
		resultDiv.style.display = 'none';
	});
&lt;/script&gt;
</code></pre>
</body>
</html>