반응형
글자수 세는 프로그램 구현하기
자기소개서, 블로그글등을 작성함에 있어서 적절한 글자수 유지하는 것은 때론 필수적인 일이 되기도 합니다. 글자수 세기를 보다 빠르게 사용하는 프로그램을 작성해봅시다. 보다 간편하고 효과적으로 글을 전달하기 위한 도구가 될 것입니다. 오늘은 HTML과 JavaScript를 사용하여 사용자가 입력한 글의 글자 수(공백 제외), 글자 수(공백 포함), 단어 수, 줄 수를 계산하는 프로그램을 작성해보겠습니다. 방법은 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자수 세기</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
textarea {
width: 100%;
height: 150px;
}
.results {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>글자수 세기</h1>
<textarea id="textInput" placeholder="여기에 텍스트를 입력하세요"></textarea>
<div class="results">
<p>공백 제외 글자수: <span id="charCountNoSpaces"></span></p>
<p>공백 포함 글자수: <span id="charCountWithSpaces"></span></p>
<p>단어 수: <span id="wordCount"></span></p>
<p>줄 수: <span id="lineCount"></span></p>
</div>
<script>
function countText() {
const text = document.getElementById('textInput').value;
// 공백 제외 글자수
const charCountNoSpaces = text.replace(/\s/g, '').length;
// 공백 포함 글자수
const charCountWithSpaces = text.length;
// 단어 수
const wordCount = text.trim().split(/\s+/).filter(word => word.length > 0).length;
// 줄 수
const lineCount = text.split(/\n/).length;
// 결과 표시
document.getElementById('charCountNoSpaces').innerText = charCountNoSpaces;
document.getElementById('charCountWithSpaces').innerText = charCountWithSpaces;
document.getElementById('wordCount').innerText = wordCount;
document.getElementById('lineCount').innerText = lineCount;
}
// 이벤트 리스너를 추가하여 텍스트 변경 시 자동으로 계산되도록 함
document.getElementById('textInput').addEventListener('input', countText);
</script>
</body>
</html>이 코드는 다음과 같이 동작합니다:
- 사용자로부터 입력받은 텍스트를 textarea에 입력합니다.
- 텍스트가 입력되거나 붙여넣기 될 때마다 input 이벤트가 발생하고, countText() 함수가 자동으로 실행됩니다.
- countText() 함수는 텍스트의 공백 제외 글자 수, 공백 포함 글자 수, 단어 수, 줄 수를 계산합니다.
- 계산된 결과는 각각 charCountNoSpaces, charCountWithSpaces, wordCount, lineCount 요소에 표시됩니다.
이제 사용자가 텍스트를 붙여넣기만 해도 자동으로 계산이 이루어집니다.
감사합니다. 세상은 내러티브다. 메섹톡이었습니다.
반응형