<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>差分比較アプリ</title>
</head>
<body>
<h1>差分比較アプリ</h1>
<form>
<label for="before">前の文章：</label><br />
<textarea id="before" name="before" rows="5" cols="50"></textarea><br />
<label for="after">後の文章：</label><br />
<textarea id="after" name="after" rows="5" cols="50"></textarea>
</form>
<button onclick="compare()">比較する</button>
<hr />
<div id="result"></div>
<script>
function compare() {
const before = document.getElementById("before").value;
const after = document.getElementById("after").value;
let result = "";
for (let i = 0; i < before.length; i++) {
if (before[i] === after[i]) {
result += before[i];
} else {
result +=
'<span style="text-decoration:line-through;">' +
before[i] +
"</span>";
}
}
if (after.length > before.length) {
result += '<span style="background-color:lightgreen;">';
result += after.substring(before.length, after.length);
result += "</span>";
}
document.getElementById("result").innerHTML = result;
}
</script>
</body>
</html>
<!-- 「前の文章をここに入力してください」と表示されたら、誰かがテキストボックスに前後入れ忘れをしたということです。 -->
<!-- プログラミング教育ってなんで、みんなalert使うんですかね… -->
