在前端开发中，实现文本对比并高亮显示差异是一个非常实用的功能。这通常用于实现文档比对、代码审查等场景。本文将介绍如何用 JavaScript 和 HTML 实现简单的文本对比，并高亮显示出差异部分。
一、基本思路
- 输入文本：用户在线输入两段文本。
- 差异比对：使用算法对这两段文本进行比对，找出不同之处。
- 高亮显示：将差异部分用 HTML 标签包裹，并应用相应的 CSS 样式进行高亮。
二、文本差异算法
我们可以使用 diff 算法来比较两个文本。这种算法会逐字或逐行比较，找出新增、删除或修改的内容。
三、代码实现
下面是一个简单的前端实现示例：
1. HTML 结构
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本对比</title>
<style>
.highlight {
background-color: yellow;
}
.container {
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>文本对比工具</h1>
<textarea id="text1" rows="10" cols="50" placeholder="输入第一段文本"></textarea>
<textarea id="text2" rows="10" cols="50" placeholder="输入第二段文本"></textarea>
<button id="compareBtn">比较文本</button>
<h2>对比结果</h2>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
2. JavaScript 实现逻辑
// script.js
document.getElementById('compareBtn').addEventListener('click', function() {
const text1 = document.getElementById('text1').value.split('\n');
const text2 = document.getElementById('text2').value.split('\n');
const result = compareTexts(text1, text2);
document.getElementById('result').innerHTML = result;
});
function compareTexts(text1, text2) {
let result = '';
const maxLength = Math.max(text1.length, text2.length);
for (let i = 0; i < maxLength; i++) {
const line1 = text1[i] || '';
const line2 = text2[i] || '';
if (line1 === line2) {
result += line1 + '<br>';
} else {
result += `<span class="highlight">原文本: ${line1}</span><br>`;
result += `<span class="highlight">新文本: ${line2}</span><br>`;
}
}
return result;
}
四、功能说明
- 用户在两个文本框中分别输入需要对比的文本。
- 点击“比较文本”按钮后，
compareTexts函数会被调用，开始进行文本的逐行比对。 - 如果两行相同，直接输出该行文本；如果不同，使用
<span>标签包裹差异部分并添加highlight类，以便进行高亮显示。 - 最终的结果会在结果区域显示出对比结果。
五、总结
通过上述代码，我们实现了一个简单的文本对比工具，可以比较两个文本并高亮显示差异。这个工具可以应用于许多场景，例如文档修改的审查、代码的版本比较等。根据实际需求，可以进一步扩展这个工具，例如添加差异类型标记、支持更复杂的文本格式等。通过使用第三方库如 diff 或 jsdiff，还可以更精准地进行文本差异比对。希望这个小工具能够对你有所帮助！
