<!DOCTYPE html>
<html>
<head>
<style>
.red {
color: red;
}
.bold {
font-weight: bold;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Filler Word Checker</h1>
<form>
<label for="input">文章を入力してください:</label><br>
<textarea id="input" name="input" rows="4" cols="50"></textarea><br><br>
<button type="button" onclick="checkFillerWords()">チェック</button>
</form>
<p id="output"></p>
<script>
function checkFillerWords() {
var inputText = document.getElementById("input").value;
var fillerWords = ["えー", "まあ", "あー", "えーと", "ええと"];
var count = 0;
for (var i = 0; i < fillerWords.length; i++) {
var regex = new RegExp(fillerWords[i], "g");
var matches = inputText.match(regex);
if (matches) {
count += matches.length;
inputText = inputText.replace(regex, "<span class='red'>" + fillerWords[i] + "</span>");
}
}
document.getElementById("output").innerHTML = inputText;
if (count >= 5) {
document.getElementById("output").innerHTML += "<br><br><span class='bold'>言葉に詰まっているよ！もう少しすらすらと言えるようになろう！</span>";
} else {
document.getElementById("output").innerHTML += "<br><br><span class='bold'>その調子！</span>";
}
}
</script>
</body>
</html>
ジョーク: フィラーワードが多いとすらすらと話せないので、言葉に詰まってしまいます。でも大丈夫、その調子で練習を続ければもっとすらすら話せるようになります！
