defrindr · June 15, 2025 09:17
diff --git a/difftool.html b/difftool.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Simple Diff Tool</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    textarea { width: 45%; height: 150px; }
    #result { margin-top: 20px; white-space: pre-wrap; font-family: monospace; }
    .added { background-color: #d4f8d4; }  /* green */
    .removed { background-color: #f8d4d4; } /* red */
  </style>
 </head>
 <body>
  <h2>Simple Diff Tool</h2>
  <div>
    <textarea id="oldText" placeholder="Old text..."></textarea>
    <textarea id="newText" placeholder="New text..."></textarea>
  </div>
  <button onclick="compare()">Compare</button>
  <div id="result"></div>

  <script>
    function diffWords(oldStr, newStr) {
      const oldWords = oldStr.split(/\s+/);
      const newWords = newStr.split(/\s+/);
      const result = [];

      let i = 0, j = 0;

      while (i < oldWords.length || j < newWords.length) {
        if (oldWords[i] === newWords[j]) {
          result.push(oldWords[i]);
          i++; j++;
        } else {
          if (oldWords[i] && !newWords.includes(oldWords[i])) {
            result.push(`<span class="removed">${oldWords[i]}</span>`);
            i++;
          } else if (newWords[j] && !oldWords.includes(newWords[j])) {
            result.push(`<span class="added">${newWords[j]}</span>`);
            j++;
          } else {
            result.push(`<span class="removed">${oldWords[i]}</span>`);
            result.push(`<span class="added">${newWords[j]}</span>`);
            i++; j++;
          }
        }
      }

      return result.join(' ');
    }

    function compare() {
      const oldText = document.getElementById('oldText').value;
      const newText = document.getElementById('newText').value;
      const resultHtml = diffWords(oldText, newText);
      document.getElementById('result').innerHTML = resultHtml;
    }
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Simple Diff Tool</title>
	<style>
	body { font-family: sans-serif; margin: 20px; }
	textarea { width: 45%; height: 150px; }
	#result { margin-top: 20px; white-space: pre-wrap; font-family: monospace; }
	.added { background-color: #d4f8d4; } /* green */
	.removed { background-color: #f8d4d4; } /* red */
	</style>
	</head>
	<body>
	<h2>Simple Diff Tool</h2>
	<div>
	<textarea id="oldText" placeholder="Old text..."></textarea>
	<textarea id="newText" placeholder="New text..."></textarea>
	</div>
	<button onclick="compare()">Compare</button>
	<div id="result"></div>

	<script>
	function diffWords(oldStr, newStr) {
	const oldWords = oldStr.split(/\s+/);
	const newWords = newStr.split(/\s+/);
	const result = [];

	let i = 0, j = 0;

	while (i < oldWords.length \|\| j < newWords.length) {
	if (oldWords[i] === newWords[j]) {
	result.push(oldWords[i]);
	i++; j++;
	} else {
	if (oldWords[i] && !newWords.includes(oldWords[i])) {
	result.push(`<span class="removed">${oldWords[i]}</span>`);
	i++;
	} else if (newWords[j] && !oldWords.includes(newWords[j])) {
	result.push(`<span class="added">${newWords[j]}</span>`);
	j++;
	} else {
	result.push(`<span class="removed">${oldWords[i]}</span>`);
	result.push(`<span class="added">${newWords[j]}</span>`);
	i++; j++;
	}
	}
	}

	return result.join(' ');
	}

	function compare() {
	const oldText = document.getElementById('oldText').value;
	const newText = document.getElementById('newText').value;
	const resultHtml = diffWords(oldText, newText);
	document.getElementById('result').innerHTML = resultHtml;
	}
	</script>
	</body>
	</html>