page.tsx (1657B)
1 "use client"; 2 3 import { useState } from "react"; 4 5 export default function CharCountPage() { 6 const [text, setText] = useState(""); 7 8 const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => { 9 setText(event.target.value); 10 }; 11 12 const countCharsWithNewlines = (str: string): number => { 13 return str.length; 14 }; 15 16 const countCharsWithoutNewlines = (str: string): number => { 17 return str.replace(/\n/g, "").length; 18 }; 19 20 const countCharsWithoutWhitespace = (str: string): number => { 21 return str.replace(/\s/g, "").length; 22 }; 23 24 const countCharsWithoutNewlinesWithWhitespace = (str: string): number => { 25 return str.replace(/\n/g, "").replace(/\s/g, "").length; 26 }; 27 const countWords = (str: string): number => { 28 const words = str.trim().split(/\s+/); 29 return words[0] === "" ? 0 : words.length; 30 }; 31 32 return ( 33 <main> 34 <h1>Count Characters</h1> 35 <textarea 36 value={text} 37 onChange={handleChange} 38 placeholder="ここにテキストを入力してください..." 39 rows={10} 40 cols={50} 41 /> 42 <div> 43 <h2>文字数カウント結果:</h2> 44 <ul> 45 <li>改行と空白を含む文字数: {countCharsWithNewlines(text)}</li> 46 <li>改行を含まない文字数: {countCharsWithoutNewlines(text)}</li> 47 <li>空白を含まない文字数: {countCharsWithoutWhitespace(text)}</li> 48 <li> 49 改行と空白を含まない文字数: 50 {countCharsWithoutNewlinesWithWhitespace(text)} 51 </li> 52 <li>単語数: {countWords(text)}</li> 53 </ul> 54 </div> 55 </main> 56 ); 57 }